Zurb's Foundation 5

An awesome front end framework



This guy: AJ Zane


github: AJZane | @azanebrain | g+


Interactive Multimedia, Digital Marketing, Big Data Analytics, East Asian Studies

Presentation Overview

Link: github.com/AJZane/slides-foundation5

  • Front end frameworks
  • Setting up Foundation
  • Foundation Concepts
  • Docs
  • Demo


A front end framework is a library of CSS, JS, and HTML to aid in developing web sites.
Foundation | Bootstrap
Gumby | Initializr / HTML5 Bootstrap
Groundwork | HTML5 Kickstart
Ivory | Kube


They typically come with UI kits and methodologies for

  • Columns and grid layouts
  • Responsive design
  • Device support

They are not

A content management system

A library that plugs into other tools
jQuery, normalize, 960 grid, modernizr are not frameworks

But Why?

Use someone else's code

Change markup to work with just 1 framework

Plumbing vs Developing


>5,000 commits

>350 contributors

40 pages of closed pull requests

>3,500 closed issues

Good for groups


Common lexicon

Separation of layout and functionality

Meant for prototyping

Case Studies

Get Started

1) Download and customize

2) Use command line

3) In your app


I suggest Sean Lange's YOGUBO presentation for an intro on Yeoman / Grunt / Bower

Get Started (cli)

  • Assuming you have bower and grunt installed
    • if not: [sudo] npm install -g bower grunt-cli
  • gem install foundation
  • foundation new MY_PROJECT

Folder Structure (cli)

  • Bower Components
    • Foundation
      • foundation JS & CSS
      • normalize.css
    • jQuery
    • Modernizr
  • SCSS
    • _settings.scss
    • app.scss
  • index.html


compass compile


My project was not including normalize.
Import it on app.scss:
@import "normalize";
Before everything else

What actually makes the framework


  • normalize.css
  • modernizr
  • jQuery



  • Foundation CSS
  • Foundation JS

Concepts (stylistic base)

  • The styles of Foundation don’t get in the way and are easy to overwrite
  • Demo

Concepts (css)

Visibility | Grid

Block grid | Buttons

Thumbnails | Utility classes

Right to left support | Sub nav and Side nav

Global styles | Media queries

Concepts (JS)

scripts run with this command: $(document).foundation(); (app.js)

interchange (images) | interchange (content)

offcanvas navigation | top bar

Magellan | Orbit Slider

Clearing lightbox | flexvideo

Concepts (more UX)

Forms (Abide Validation) | Reveal (modals)

Alert | Tooltips

Joyride | Dropdown content

Wrap Up

  • Great for quickly starting an idea and carrying it all the way through
  • Excellent for teams of any size
  • Modular. Minimal UI. Very Extendable
  • Constantly getting better
  • Case studies again