Downloaded 52 times
Uploaded byChris Morrow
Responsive Web Design using the Foundation 5 CSS Framework
The document discusses responsive web design (RWD) using Zurb Foundation 5, explaining its definition, pros and cons, and key concepts like fluid grids, flexible media, and media queries. It also covers the comparison of RWD with other design techniques, frameworks for web design, and provides a guide on setting up and customizing Foundation 5. Additionally, various development tools and resources are mentioned to aid in the responsive design process.
Responsive Web Design using the Foundation 5 CSS Framework
- 1. Responsive Web Design usingZURB Foundation 5 byChrisMorrow
- 2. THE PLAN What isResponsive Web Design? Responsive Design: Pros and Cons Frameworks Download/Setup of Foundation UI Dev Tools Using Foundation 5
- 3. WHAT IS RESPONSIVE WEBDESIGN? RWD is creating a website that dynamically changes a.k.a "responds" to all viewport sizes, device orientations, and device resolutions. Ethan Marcotte: three tenets of RWD are a fluid grid, flexible media, and media queries.
- 4.
- 5.
- 6.
- 7. OK GOOGLE! AWD vsRWD vs ___ AWD:AllWheelDrive RWD:RearWheelDrive FWD:FrontWheelDrive
- 8. DEV ACRONONYMS AWD: AdaptiveWeb Design AWD: Adaptive Web Delivery RWD: Responsive Web Design SWD: Situational Web Design WTF: Insert New Approach Here
- 9.
- 10. RWD Causes PoorPerformance " Because the images on a responsive site are just visually scaled down and not re-sized, smartphones and tablets can notice a lag in loading speeds, especially when being used on a mobile network "
- 11. When compared tomaintaining a seperate mobile site, responsive sites can be equal or lower in cost "Responsive Design is Expensive"
- 12. <default Bootstrap styles> "Allresponsive websites look the same"
- 13. "Anyone who embraces ResponsiveWeb Design is stupid"
- 15. ZURB QUOTE "Friends don'tlet friends design in 960px"
- 16. FRAMEWORKS FOR FREE!!! Howto Choose a Framework How many have used a framework or library? Try it for yourself: make an informed decision with firsthand knowledge Understand how it works not just what it does Take "it" apart, break it, then piece it together in "your" way
- 17. IS YOUR WORKFLOWSLOW?
- 18.
- 19.
- 20. BENEFITS OF UITOOLS? Grunt: run local server Grunt: automation Grunt: livereload Yeoman: starter projects Bower: dependency management
- 21. CSS FRAMEWORKS Which oneto choose? Foundation vs Bootstrap vs Skeleton vs YAML 4 vs Gumby vs Pure CSS vs Kube vs Columnal vs Toast vs 1140 Grid vs 960 Grid System vs Gridiculo.us Choose what you like best Only use what you need
- 23. RWD USING FOUNDATION5 How to Setup ZF5 The Grid Responsive Images / Media Media Queries Block Grid Customizing / Settings
- 24. HOW TO SETUPZF5 http://foundation.zurb.com/develop/download.html Download CSS Manual SCSS Download Use A Task Runner (GRUNT/GULP/...)
- 25. THE GRID Rows andColumns Centering Nesting Ordering Customizing the Grid
- 26. RESPONSIVE IMAGES /MEDIA Images PictureFill 2.0 Video Welcome Interchange!
- 27. FOUNDATION 5: MEDIAQUERIES width/16px (base font size) = EMS small: 0 - 640px (40em) medium: 641px - 1024px (40.063em - 64em) large: 1025px - 1440px xlarge: 1441px - 1920px xxlarge: 1921px+
- 28. FOUNDATION 5: CUSTOMIZING Understandingthe Setup Settings JS Components Make It Your Own
- 29. RESPONSIVE TESTING TOOLS? ChromeDevice Emulation (in dev tools) Firefox (Responsive View) iOS Simulator (Mac only) Adobe Edge Inspect: https://creative.adobe.com/products/inspect GhostLab: (mac only) http://vanamco.com/ghostlab/ BrowserStack: http://www.browserstack.com/
- 30. RESOURCES & LINKS Tools NodeJS:https://nodejs.org/ Yeoman:http://yeoman.io/ Grunt:http://gruntjs.com/ Bower:http://bower.io/ ZurbRelated Foundation:http://foundation.zurb.com/ KitchenSink:http://foundation.zurb.com/docs/components/kitchen_sink.html BuildingBlocks(codesamples):http://zurb.com/building-blocks
- 31.