Introduction to
Foundation
Author: Lai Ho
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh Dist...
Agenda
• What’s Foundation?
• Featured of Foundation
• Getting started with Foundation
• The grid system in Foundation
• C...
What is Foundation?
• A package of css, javascript files created by ZURB
at 2011
• A quick way to create a flexible layout...
Featured
• Faster for Users and faster to code
• Mobile First and multi-screen support (responsive
design)
• Built on Sass...
Getting stared with Foundation(1)
• You'll have two options: a default download, and a
custom download
• You’ll receive a ...
Getting stared with Foundation(2)
• css
∙ foundation.css
∙ foundation.min.css
∙ normalize.css
• js
∙ foundation.min.js
∙ F...
The grid system in Foundation(1)
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM...
The grid system in Foundation(2)
Extra small
devices Phones
Small devices
Tablets (< 640px)
Medium devices
Desktops (< 102...
CSS Overview(1)
• Side nav
• Sub nav
• Breadcrumbs
• Pagination
• Thumbnails
• Flex Video
• Forms
• Buttons
Website: http:...
CSS Overview(2)
• Button Groups
• Typography
• Inline Lists
• Labels
• Keystrokes
• Panels
• Pricing Tables
• Progress Bar...
JavaScript effects(1)
• Off Canvas
• Top Bar
• Magellan
• Orbit
• Clearing
• Range Slider
• Abide
• Split Buttons
• Dropdo...
JavaScript effects(2)
• Reveal
• Alert Boxes
• Tooltips
• Magellan
• Joyride
• Dropdown
• Accordion
• Tabs
• EqualizerWebs...
DEMO
Thank you!
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
Upcoming SlideShare
Loading in …5
×

Introduction to Foundation

486 views

Published on

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

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
486
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to Foundation

  1. 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. 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. 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. 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. 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. 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. 7. The grid system in Foundation(1) Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  8. 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. 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. 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. 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. 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. 13. DEMO Thank you! Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

×