Rapid Frontend Development

With 

Zurb Foundation

George Spake

Web Services at UTHSC

PHP/WordPress

@georgespake

github.com/gpspake

Foundation Projects Available on Github

WordPress: Grunterie

Laravel: Laravation

What is Foundation?

"The most advanced responsive front-end framework in the world."

Mobile-first frontend framework

Comprised of html/css/js "components"

Alternative to Bootstrap

Managed by Zurb

Luke Dub

First to Market with Mobile First

Built From the Ground up with SASS

Foundation Vs Bootstrap

SASS

Zurb/Luke W.

Flat Design

Accessibility

Culture

LESS

@MDO/@FAT

  Skeumorphic Design

Robust

Culture

Mobile 1st

Responsive

Open Source

Frontend-Frameworks

Standards

Can't decide? BFF

But that Foundation Tho'

"They're both good but I prefer Foundation"

-George Spake 2014

Don't just use Foundation to prototype,

Build stuff with it!

"Bootstrap for life Son!"

-George Spake 2013

Notable Components

The Grid

• Multiple Break Points (Small, medium, large)
• Mad Powerful, Totally customizable (Break point ranges, number of columns)
• Mobile First (queries go up - not down)

Other Stuff

• Visibility (.hide-for-medium-up, .show-for-medium-up)
• Flex video: makes videos responsive
• Utility classes (round, radius, float, alignment)
• Orbit slider (deprecated)
• Top bar navigation (Sticky navigation)
• Off Canvas (quirky)

Getting Started

Plain Ol' CSS

Use form to select components

With Sass/Grunt

Uses LibSass Grunt Task

foundation new project-name --libsass

or...

With Compass

Uses Compass Gem

foundation new project-name

With SASS

Use Foundation Gem

Several ways to set up a project...

Getting Started

• Create grunt/libsass project
• Add grunt-contrib-compass
• Add options to Grunt (No need for config.rb)
• Awesome features/mixins but compiles slower than lib-sass
• compass will handle vanilla scss but libsass won't handle compass stuff.

Using Compass with Grunt...

Managing and Maintaining

Your Project

Use Foundation gem to update project (Uses Bower)

Foundation Update

(Foundation docs just suggest bower update now)

Change settings and turn components on or off in

_settings.scss and app.scss

Deploying Your Project

Tips

• Turn off unused modules in _settings.scss
• Be careful with SASS includes
• Don't push stuff that you aren't using 
  (SCSS, npm modules)
• Combine, minify and uglify
• USE GRUNT!!! (write an awesome build script)

Projects

Grunterie

• WordPress Theme/Framework
• Based on Reverie
• Built on Foundation
• Use libsass or compass (Just change one line)
• Easy Foundation Shortcode Plugin

Laravation

• Foundation based Laravel Project
• Inspired by MemphisPHP/Larastrap
• Use libsass or compass (Just change one line)