This guy: AJ Zane
github: AJZane | @azanebrain | g+
Background:
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
Definition
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
Community.
>5,000 commits
>350 contributors
40 pages of closed pull requests
>3,500 closed issues
Good for groups
Documentation
Common lexicon
Separation of layout and functionality
Meant for prototyping
Case Studies
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
- index.html
Compile
Run
compass compile
My project was not including normalize.
Import it on app.scss:
@import "normalize";
Before everything else
What actually makes the framework
Dependencies
- normalize.css
- modernizr
- jQuery
Foundation
- 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
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
Yettis