Never re-invent the wheel ! That’s a good moto for any developer out there. Let me show you how to quickly bootstrap you website stylesheet with Foundation. Its default components will help you to define a generic style very easily so you can concentrate on customizing to match your pixel-perfect design.
Setup Foundation on you machine
Install the foundation command line using npm
|
1 |
$ sudo npm install --global foundation-cli |
Creation of a new project
Setup your project with “foundation new” command.
You’ll have to choose between different options. I just choose the most common one, use Foundation for site with a simple template.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
$ foundation new ? What are you building today? A website (Foundation for Sites) ? What's the project called? (no spaces) TestSite ? Which template would you like to use? Basic Template: includes a Sass compiler . /| , , /|/ \/| /| Thanks for using ZURB Foundation for Sites! /|/ |/ | ------------------------------------------- |___| |___| Let's set up a new project. \___| ^^ ^^ |___/ It shouldn't take more than a minute. | -[O]--[O]- | | ___, | | ... | \__________/ Downloading the project template... Done downloading! Installing dependencies... [...] You're all set! ✓ New project folder created. ✓ Node modules installed. ✓ Bower components installed. Now run foundation watch while inside the TestSite folder. |
At the end, just type
|
1 2 |
$ cd TestSite $ foundation watch |
Each time you’ll modify a SASS file, it’ll be compiled (and rather quickly !) into an app.css file.
All you main SASS code has too be written in app.scss file.
You have the choice to include all foundation, or just a few part of it. Or even nothing at all. But I recommend at least one :
|
1 |
@include foundation-global-styles; |
Which is taking care of resetting all styles, setting default styling for HTML elements and so on.
Write your code without annoying default Foundation classes
The goal is to use our own classes with Foundation code. Here is a simple example :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// Container will behave like a .row // Create a row of 10 columns .container { @include grid-row(10, 'collapse', null, true, $grid-column-gutter); } // 3 cols sidebar with 0 gutter .sidebar { @include grid-column(3, 0); } // 7 cols main with 0 gutter .main { @include grid-column(7, 0); } |
For each of its components, Foundation gives you access to several mixins that you can include everywhere.
