introduction to foundation
TRANSCRIPT
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!