Download as PDF, PPTX
Sustainable Theming with Fusion - DCCO 2011
- 1. SUSTAINABLE THEMING with FUSION Drupal Camp Colorado 2011 TopNotchThemes - Stephanie Pakrul & Sheena Donnelly Sunday, June 12, 2011
- 2. GOOD AFTERNOON! • TopNotchThemes - Custom Designs & Drupal Theming • FusionDrupalThemes.com - Ready-to- download Drupal themes Sunday, June 12, 2011
- 3. DO YOU WANTTO... • Decouple theming from development? • Reduce repetition in your workflow? • Focus more on design? • Hand off sites that are easier to maintain? Sunday, June 12, 2011
- 4. TOP 3 UNSUSTAINABLE HABITS OF GOOD THEMERS Sunday, June 12, 2011
- 5. ASSUMING STATIC NEEDS & CONTENT • New stakeholders, campaigns, features, goals • Shifts in technology • Don’t work against Drupal’s flexibility Sunday, June 12, 2011
- 6. STRIVING FOR PIXEL PERFECTION (or trusting photoshop in any way) • Vestigial practice of print designers • medium Accept that you have little control over the • Differences in devices, browsers and users Sunday, June 12, 2011
- 7. REPEATING YOURSELF, REPEATING YOURSELF. • Re-building Layouts & configuring grids • Re-styling for common design motifs • Wrangling the same cross-browser issues Sunday, June 12, 2011
- 8. QUICK FIXES TO MAKE ANY THEMING PROJECT SUSTAINABLE Sunday, June 12, 2011
- 9. DESIGN ABSTRACTION • OOGD - Object-Oriented Graphic Design • Plan for abstraction in the design phase • Implement abstraction when theming Sunday, June 12, 2011
- 10. CREATE YOUR DESIGN Sunday,June 12, 2011
- 11. THEN ABSTRACT Sunday, June12, 2011
- 12. BEGIN WITH A SOLID BASE THEME • Ok, we're a bit biased :) • 960, Framework Fusion, Zen, Omega, Genesis, • Taking care of the Drufaults • Provides scaffold CSS Sunday, June 12, 2011
- 13. STYLE GENERALLY & CREATE FLEXIBILITY • Use real(ish) content • Read this: bit.ly/real-lorem-ipsum • Use a grid Sunday, June 12, 2011
- 14. FUSION HOW IT HELPS YOU THEME MORE SUSTAINABLY Sunday, June 12, 2011
- 15. LOL CAT BREAK!! Sunday,June 12, 2011
- 16. SOLID, FLEXIBLE BASE • Easy-to-Customize Grid • More about grids in general: http://bit.ly/ about-grids • Smart regions for flexible layout • Default skinr styles • GUI controls for rapid prototyping Sunday, June 12, 2011
- 17. HOW THE PIECESFIT FUSION CORE GRID SKINR MODULE STYLE OPTIONS TO UI CUSTOM SUBTHEME Sunday, June 12, 2011
- 18. SKINR CREATES OPTIONS • For designers & developers • For site admins and content managers Sunday, June 12, 2011
- 19. HOW YOU USEDTO TARGETING EACH STYLE BLOCKS BLOCK ID Sunday, June 12, 2011
- 20. WHAT HAPPENS IFTHE CLIENT’S NEEDS CHANGE? Do they call you? Do they write bad CSS on their own? What if they decide to switch to panels? Are they stuck? Sunday, June 12, 2011
- 21. SKINR STYLES APPLY TO MANY BLOCKS Sunday, June 12, 2011
- 22. CLIENTS CAN EASILY CHANGE SKINS *with no CSS edits Sunday, June 12, 2011
- 23. EASY, POINT-AND- CLICK INTERFACE Sunday, June 12, 2011
- 24. THEME BEFORE THE SITE IS BUILT • What if you don't know block IDs? • Working on a team • Parallel site development • Flexibility before content is entered Sunday, June 12, 2011
- 25. BUILD THEMES ON DEMO SITES Sunday, June 12, 2011
- 26. TWEAK & POLISH AFTER DEVELOPMENT Sunday, June 12, 2011
- 27. MODULAR THEMING • Look for common elements • Avoid verbose CSS • Location & size agnostic • Stack and extend skins Sunday, June 12, 2011
- 28. SUSTAINABLE THEMING... • Embraces flexibility of advanced CMS • Works even when functionality & content change • Creates an efficient workflow Sunday, June 12, 2011
- 29. FUSION RESOURCES • @topnotchthemes • fusiondrupalthemes.com • Documentation • News • Forums • drupal.org/project/skinr • Documentation • Issue Queue Sunday, June 12, 2011
- 30. GET A FREEDEMO SITE Clone a copy of the demo site for our free theme, Magazeen webenabled.com/application/tnt-fusion Sunday, June 12, 2011
- 31. THANKS FOR ATTENDING! Sunday,June 12, 2011