I don't understand how to compile foundation with my own SASS additions.
I have my own Github repo with ZURB foundation 5, I've extended it (with SASS and JS) and changed some things.
Let's say my repo is here: github.com/some_name/my_foundation_version.
So, I download it from git
git clone git://github.com/some_name/my_foundation_versionbut then what?
I don't understand how to use bower or grunt in this case. How do I use my own git repo?
UPDATE:
Going into: ./foundation/scss and run sass foundation.scss:output.css doesn't work either
Method One - Self Compile using koala etc
If you just want to use the scss to compile yourself you need 2 repo's not one
First you want the Foundation Master Repo Then Secondly The Bower_components
Foundation Master
Bower-Foundation
Unpack the foundation master then in it create a directory called foundation and unpack the bower components into there.
I personally then use koala to compile the scss which is a simple drag and drop programme I click on the app.scss set the output path to app.css and away I go.
If you want a version to play here is a repo i'm playing with for a framework also has the icons set and a few other bits in there but you can simply download unzip and it should then compile
https://github.com/Relution-Design/legion-assets
I also use netbeans which is more or less the same process, make sure correct libs are installed in netbeans set output path and compile on save.
Method 2
Firstly Make sure that you have all the dependencies!! 3 months I spent and was missing one . . . . HEAD IN HANDS :( then follow the instructions
FOUNDATION SCSS
Related
I want to customize Bootstrap 4 theme such as colors, fonts, etc..
I read the instructions from Bootstrap website saying that I need to create custom.scss file and import Bootstrap’s source Sass files like this
// Custom.scss
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
#import "node_modules/bootstrap/scss/bootstrap";
I'm new to both Sass and NodeJS and I do not know how to get started with a NodeJS and Sass project.
I went as far as installing NodeJS and Sass on my Mac using brew. I also installed Bootstrap by typing:
npm install bootstrap
This is the most progress I have made. I do not know in which path the bootstrap files are installed when I did the command npm install bootstrap and also I do not know how to bring that Bootstrap installation into my project folder.
Could anyone please provide some information or point me to a resource on how to get started with a NodeJS and Sass project so I can customize Bootstrap 4 theme using Sass.
You have to run the npm install bootstrap command inside your project directory. Bootstrap and its files will then be installed into the directory node_modules/bootstrap inside your project directory.
Now, when placing your custom scss files into this folder, they will be able to access the node_modules directory, in which bootstrap is.
You can then create a custom building pipeline using npm tools for compiling scss files to css. This requires more in-depth knowledge on node.js and NPM, but that is the usual and recommended way of doing it.
If you just want to compile the scss once and work with the css from there without having to use node.js more in depth, you can use packages like scss-compile and then use console commands like node-sass -rw scssFiles -o cssOutputFiles to compile your custom theme once.
I'm kind of confused. This is my project structure
installing bootstrap using bower and some file and directory what direction should I follow to using sass in this kind of structure: for example I mean
install grunt
grunt to your project
add sass file what ever your want
...
I see a lot of ways and you know many of them do not match with my project structure. some one said grunt some one else said bootstrap sass and compile your project and more.
this article by css tricks is the MAP
Gulp for Beginners
1-install gulp globally
2-install gulp in your project
note-gulp is very very flexible with paths and project structures
3-you need two folder app-dist
4-add file gulpfilel.js
5-install sass plugin in gulp
6-write a task and run it !
7-just simple ?!!
I'm trying out semantic-ui in a meteor/npm environment and am left a little dissatisfied with the install process. I love the interactivity, but it's made a mess of my project. I now have semantic folders inside my node_modules directory and outside, a semantic.json config file in the root, and my node_modules directory is now just completely full of ugly gulp folders (node_modules was empty before the install). Is this how it is supposed to go? If so, I'm out, I want to keep it clean, simple, and contained.
I also faced this issue. I ended up doing the following:
npm uninstall gulp semantic-ui
And add semantic like this:
create an empty custom.semantic.json file within your client library folder. suggested location of /client/lib/semantic-ui/custom.semantic.json depending on your applications structure
Run in termnial meteor add semantic:ui flemay:less-autoprefixer jquery
That way you have 1 folder of semantic inside your lib.
I am attempting a test dev setup of a foundation/underscores wordpress theme.
I have a wordpress install, and to that I added an underscores theme. I then made a folder in this called foundation and installed foundation ( sass using bower ) into that.
I will get it all working and hooked up using gulp, but I notice that Foundation placed a git file in the foundation folder. I have used git in the past but I'm unsure of what options I have here. Ideally I want to remove the git repo. Then at that point I would be doing a git init from the main theme folder ( the foundation sub folder I intend to only use for the sass source files). My quesion is ... Is there any issue with doing it this way. I essentially want to get rid of the git repo that came down with the foundation install and setup my own git repo manually; ( which will also cover the underscores and my own custom files in the parent directory)
My directory structure looks like this:
wp-content
themes
my_theme ( underscores) ( new git repo here )
foundation folder ( git repo here which I want to remove )
I also want to remove the package.json file and gruntfile because I hope to use gulp instead ( again from the main theme folder not the foundation directory )
Unless you're planning on hacking on the foundation code I wouldn't recommend this. There will be issues if you decide to upgrade to a newer version of foundation using bower. If you are working on this with another developer and choose to pursue this route I'd recommend removing the dependency from your bower.json file.
I'm already using bootstrap.css. But i would like to surcharge the less variables without using bootstrap customize editor.
I would like to add a less file in my project. My project is a simple nodejs project with express and harpejs.
Where to find the less file ? Using express it will compile it when i will deploy the project ?
Thanks.
Look at using bower.
npm install -g bower
bower install bootstrap
You will then find all the less files in bower_components/bootstrap/less/*. Copy the bootstrap.less file to your CSS directory and make alterations (make sure the paths are correct).
You can then look at using some Grunt tasks to get the less to build.