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
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
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)
