View
120
Download
0
Category
Preview:
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.
Citation preview
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?
james@astonishdesign.com
Implement Foundation or Other Front-End Frameworks inYour Theme
James MoughonLEAD DEVELOPER
@jmoughon
Recommended