astonishdesign.com@astonish_design | #drupalcon
Implement Foundation or Other Front-End Frameworks inYour Theme
James MoughonLEAD DEVELOPER
astonishdesign.com@astonish_design | #drupalcon
Key Points• Prototyping
• What is a front-end framework?
• What is Foundation?
• Performance matters
• Planning out the theme
• Using Foundation with Drupal
• Tools of the trade
• Handling updates
astonishdesign.com@astonish_design | #drupalcon
The Problem
astonishdesign.com@astonish_design | #drupalcon
Prototyping Focus
astonishdesign.com@astonish_design | #drupalcon
Prototyping Outcome
astonishdesign.com@astonish_design | #drupalcon
Example Prototypes
[demo]
astonishdesign.com@astonish_design | #drupalcon
Framework
astonishdesign.com@astonish_design | #drupalcon
Framework
“Framework: the basic structure of something or a set of ideas or facts that provide support for something.”
– Merriam-Webster
astonishdesign.com@astonish_design | #drupalcon
Frameworks in the Wild
[bootstrap][foundation]
http://trends.builtwith.com/docinfo/Twitter-Bootstraphttp://trends.builtwith.com/docinfo/Foundation
46,000 Installations52,000 downloads on d.o
2,500,000 Installations154,000 downloads on d.o
astonishdesign.com@astonish_design | #drupalcon
Usage in Drupal
[bootstrap]
[foundation]
astonishdesign.com@astonish_design | #drupalcon
Foundation
astonishdesign.com@astonish_design | #drupalcon
I have a story for you…
astonishdesign.com@astonish_design | #drupalcon
Mobile Latency
http://chimera.labs.oreilly.com/books/1230000000545/ch08.html#ELIMINATE_KEEP_ALIVES
astonishdesign.com@astonish_design | #drupalcon
Connection Persistence
http://chimera.labs.oreilly.com/books/1230000000545/ch07.html#MOBILE_POWER_REQUIREMENTS
astonishdesign.com@astonish_design | #drupalcon
Planning the Implementation
astonishdesign.com@astonish_design | #drupalcon
Used vs. Not UsedUsed
Alerts ✓Block Grid
Breadcrumbs
Buttons ✓Button Groups
Dropdown buttons
Split Buttons
Clearing
Forms ✓Dropdowns
Flex Video
Joyride
Keystroke
Labels
Used
Magellan
Orbit
Pagination ✓Panels
Pricing Tables
Progress Bars
Reveal
Sliders
Accordian ✓Tabs ✓Side Nav
Top Bar / Nav
Tables ✓Typography ✓
astonishdesign.com@astonish_design | #drupalcon
Foundation + Drupal
+
astonishdesign.com@astonish_design | #drupalcon
DIY: Foundation + Drupal
+
astonishdesign.com@astonish_design | #drupalcon
Tools of the Trade
astonishdesign.com@astonish_design | #drupalcon
OptionalSass
astonishdesign.com@astonish_design | #drupalcon
Grunt + Compass
astonishdesign.com@astonish_design | #drupalcon
Grunt + Uglify.js
astonishdesign.com@astonish_design | #drupalcon
Approach to Upgrades
astonishdesign.com@astonish_design | #drupalcon
Let’s Recap
astonishdesign.com@astonish_design | #drupalcon
Questions?Comments?
Implement Foundation or Other Front-End Frameworks inYour Theme
James MoughonLEAD DEVELOPER
@jmoughon
