Zurb's Foundation 5 – An awesome front end framework – Get Started

View Github Repository Open presentation in a new window

AJZane

See all presentation from AJZane

Zurb's Foundation 5 – An awesome front end framework – Get Started

0 0

slides-foundation5

Intro into Zurb's Foundation 5 front end framework

On Github AJZane / slides-foundation5

Zurb's Foundation 5

An awesome front end framework

foundation.zurb.com

This guy: AJ Zane

 

github: AJZane | @azanebrain | g+

Background:

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

I'm AJ Zane. I can be found at AJZane on most things, or on twitter @azanebrain, which I've just started using My background is in Interactive Multimedia, Digital Marketing, Big Data Analytics, and the so-relevant East Asian Studies

Presentation Overview

Link: github.com/AJZane/slides-foundation5

  • Front end frameworks
  • Setting up Foundation
  • Foundation Concepts
  • Docs
  • Demo
This presentation is going to introduce front end frameworks and give you an in depth look at Foundation You can clone this whole presentation and follow along if you'd like, or refer to it later. I have a demo foundation site in the 'foundation-demo' directory of the repo

Definition

A front end framework is a library of CSS, JS, and HTML to aid in developing web sites. Foundation | BootstrapGumby | Initializr / HTML5 Bootstrap Groundwork | HTML5 KickstartIvory | KubeUIKit

Definition: A front end framework is a library of CSS, JS, and HTML to aid in developing web sites. As you can see, there are a lot frameworks. The biggest are (Twitter) Bootstrap and Foundation

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

In fact, you’ll see that these smaller libraries come together to form foundation. Like a yetti megazord

But Why?

Use someone else's code

Change markup to work with just 1 framework

Plumbing vs Developing

If you become good with a framework, you could become a 'plumber' not a developer. It's true. It's very easy to depend on it. So as long as you understand what's going on under the hood, so you can use it to your advantage and understand WHY it works

Community.

>5,000 commits

>350 contributors

40 pages of closed pull requests

>3,500 closed issues

That's in 2 years. There's 168 hours in a week. If you spent every single hour working, do you think you could accomplish that much?

Good for groups

Documentation

Common lexicon

Separation of layout and functionality

Good documentation is hard to write. You can jump between projects and know the code patterns and layout elements You'll see in the demo how designers and developers can work in parallel because elements are modular

Meant for prototyping

Case Studies

This is where Foundation is different than other frameworks It was originally for prototyping, but is such a strong architecture it can support real sites It's perfect for iterative your development

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
Here you can see how the pieces come together to make the framework (like a megazord)

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
Normalize makes a standard level of CSS and browser compatibility Modernizr is for browser compatibility and feature tests jQuery is for javascript and UI Foundation's components are actually only 2 pieces

Concepts (stylistic base)

  • The styles of Foundation don’t get in the way and are easy to overwrite
  • Demo
Foundation is very easy to modify and build on

Concepts (css)

Visibility | Grid

Block grid | Buttons

Thumbnails | Utility classes

Right to left support | Sub nav and Side nav

Global styles | Media queries

VISIBILITY: small/med/large GRID: rows & columns. Default is 12 col -- & offset, center, push/pull --& mixins - allows you to assign row classes to the css, instead of inline markup UTILITY: You can start to see how the markup is very 'foundation-y'. You'll see later that you can change this through sass, but it is nice to be able to look at the HTML and know how the page will look Sub/Side Nav: the docs nav is a sidenav --& sub nav + magellan is very cool. I’ll get into it later GLOBAL STYLES: Skip down to the variables. Values are easy to overwrite (app/_settings.sass - make it 18col) media query semantics. Foundation uses ‘size-up’ to explain min-width. Makes a lot of sense MEDIA QUERIES: Very easy to customize your layout

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

FLEXVIDEO: I’m not sure about performance. Notice that they are using youtube and video

Concepts (more UX)

Forms (Abide Validation) | Reveal (modals)

Alert | Tooltips

Joyride | Dropdown content

ALERT: And you can apply them to any div (demo) DROPDOWN CONTENT: This is similar to the dropdown button

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
Carry all the way - Wireframe BECOMES the final product Contanstly getting better - Main site has fly in animation classes

Yettis

 
Most importantly. It's all about yettis.