introduction to foundation

Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

Introduction toFoundation

Author: Lai Ho

Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

Agenda• What’s Foundation?

• Featured of Foundation

• Getting started with Foundation

• The grid system in Foundation

• CSS overview

• JavaScript effects

Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

What is Foundation?• A package of css, javascript files created

by ZURB at 2011

• A quick way to create a flexible layout for

a Web page, using the principles of

responsive design

Download Foundation

• Website: http://foundation.zurb.com/

• GitHub:

https://github.com/zurb/foundation

Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

Featured • Faster for Users and faster to code

• Mobile First and multi-screen support

(responsive design)

• Built on Sass

Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

Getting stared with

Foundation(1)• You'll have two options: a default

download, and a custom download

• You’ll receive a .zip archive containing the

following files:

∙ index.html

∙ humans.txt

∙ robots.txt

Getting stared with

Foundation(2)• css

∙ foundation.css

∙ foundation.min.css

∙ normalize.css

• js

∙ foundation.min.js

∙ Folder foundation

∙ Folder vendor

Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

The grid system in

Foundation(1)

The grid system in

Foundation(2)Extra small devices Phones

Small devices Tablets (< 640px)

Medium devices Desktops (< 1024px)

Grid behavior

Horizontal at all times

Collapsed to start, horizontal above breakpoints

Class prefix small- medium- large

Offsets small-offset- medium-offset-

large-offset-• Incomplete Rows

• Centered Columns

• Block grid

Demo: Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

CSS Overview(1)• Side nav

• Sub nav

• Breadcrumbs

• Pagination

• Thumbnails

• Flex Video

• Forms

• ButtonsWebsite: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

CSS Overview(2)• Button Groups

• Typography

• Inline Lists

• Labels

• Keystrokes

• Panels

• Pricing Tables

• Progress Bars

• TablesWebsite: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

JavaScript effects(1)• Off Canvas

• Top Bar

• Magellan

• Orbit

• Clearing

• Range Slider

• Abide

• Split Buttons

• Dropdown Buttons Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

JavaScript effects(2)• Reveal

• Alert Boxes

• Tooltips

• Magellan

• Joyride

• Dropdown

• Accordion

• Tabs

• Equalizer

Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

DEMO

Thank you!