Websites: https://www.designveloper.com Visit our blog: https://www.designveloper.com/blog Like Facebook page: https://www.facebook.com/designveloper/ Youtube: http://bit.ly/29PTtFS

1. Introduction to
Foundation
Author: Lai Ho
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
DESIGNVELOPER

2. 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

3. 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

4. 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

5. 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
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

6. 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

7. The grid system in Foundation(1)
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

8. 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

9. CSS Overview(1)
• Side nav
• Sub nav
• Breadcrumbs
• Pagination
• Thumbnails
• Flex Video
• Forms
• Buttons
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

10. CSS Overview(2)
• Button Groups
• Typography
• Inline Lists
• Labels
• Keystrokes
• Panels
• Pricing Tables
• Progress Bars
• Tables Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

11. 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

12. JavaScript effects(2)
• Reveal
• Alert Boxes
• Tooltips
• Magellan
• Joyride
• Dropdown
• Accordion
• Tabs
• EqualizerWebsite: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

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