drupalcon austin 2014 implement foundation or other front-end frameworks in your theme
DESCRIPTION
How do you get popular frameworks such as Foundation or Bootstrap to work with your theme? What about features that don't work right away? Are sub-themes a good approach? In this session we will cover an opinionated and tested approach to implementing themes with front-end frameworks. The talk will use Foundation for examples, but the principle can be applied to other frameworks, such as Bootstrap. KEY TAKEAWAYS: Understanding the purpose of front-end frameworks. How to go from prototype to theme. How to implement the framework's features. Overriding Drupal's defaults to work with the framework. You don't need the Kitchen Sink: Thoughts on features and performance. A note about sub-theming. ABOUT THE SPEAKER: James Moughon is a Developer at Astonish Design. James implements unique solutions with Drupal and other technologies. He has successfully implemented Foundation and other front-end frameworks on many projects.TRANSCRIPT
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
