Foundation5

Foundation is a Responsive Front-End Framework that gives you a base for building responsive websites.

Getting Started

Using the builder to download...
Pure CSS (also comes with a boilerplate)
Get it in Sass

What do you get out of the box

Responsive Grid
Responsive Navigation
Typography
Button Styles
Prebuilt Plugins

Build IT

We'll choose to build our Foundation project

using the Sass way.


    [sudo] npm install -g bower grunt-cli   
    
    gem install foundation   

    cd path/to/sites   

    foundation new project_name --libsass

Now What?

Look in Gruntfile.js

The "Default" task runs a build and starts to watch your sass files.
For deployment you can just run the "Build" task using grunt build.

Look at _settings.scss and app.scss under the Sass folder.

Notice that Foundation lets you include everything or just bits to help control file size.
Notice you that almost all settings and variables can be overwritten.

Look at the bower.json file

Look at bower_components, notice Foundation has a dependency of jQuery and Modernizr
Look at how scripts are linked on the page using bower_components.

Start building a page!

Add navigation

Use the off-canvas nav
Make a linked menu item

Make some content and add a Responsive Grid
Add Orbit (banner rotator)
Add a second page

Taking it to the next level

With all the flexibility of using Node, Grunt, and Bower there are so many directions you could quickly take your project. Do you want to build out a template setup for your html files? Look at assemble or grunt html build or many more. Do you want to add support for minifying JS or building out responsive images? Do you want to add Live Reload? All of this can be done using Grunt plugins.