Foundation RoundTable Notes

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

http://foundation.zurb.com/

Getting Started

• Using the builder to download...
• Pure CSS (also comes with a boilerplate)
• Get it in Sass (uses grunt / bower / libsass) or (use compass)

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
• 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.

Extras

Ruby
Node
Grunt
Bower
LibSass
Yeoman - Yo zf5