sustainable theming with fusion - dcco 2011
DESCRIPTION
TopNotchThemes presentation on Sustainable Theming at DrupalCamp Colorado 2011.TRANSCRIPT
![Page 1: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/1.jpg)
SUSTAINABLE THEMING
FUSIONDrupal Camp Colorado 2011
TopNotchThemes - Stephanie Pakrul & Sheena Donnelly
with
Sunday, June 12, 2011
![Page 2: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/2.jpg)
GOOD AFTERNOON!
• TopNotchThemes - Custom Designs & Drupal Theming
• FusionDrupalThemes.com - Ready-to-download Drupal themes
Sunday, June 12, 2011
![Page 3: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/3.jpg)
DO YOU WANT TO...
• 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
![Page 4: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/4.jpg)
TOP 3UNSUSTAINABLE HABITS
OF GOOD THEMERS
Sunday, June 12, 2011
![Page 5: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/5.jpg)
ASSUMINGSTATIC NEEDS & CONTENT
• New stakeholders, campaigns, features, goals
• Shifts in technology
• Don’t work against Drupal’s flexibility
Sunday, June 12, 2011
![Page 6: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/6.jpg)
STRIVING FOR PIXEL PERFECTION
• Vestigial practice of print designers
• Accept that you have little control over the medium
• Differences in devices, browsers and users
(or trusting photoshop in any way)
Sunday, June 12, 2011
![Page 7: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/7.jpg)
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
![Page 8: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/8.jpg)
QUICK FIXESTO MAKE ANY THEMING PROJECT SUSTAINABLE
Sunday, June 12, 2011
![Page 9: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/9.jpg)
DESIGN ABSTRACTION
• OOGD - Object-Oriented Graphic Design
• Plan for abstraction in the design phase
• Implement abstraction when theming
Sunday, June 12, 2011
![Page 10: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/10.jpg)
CREATE YOUR DESIGN
Sunday, June 12, 2011
![Page 11: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/11.jpg)
THEN ABSTRACT
Sunday, June 12, 2011
![Page 12: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/12.jpg)
BEGIN WITH A SOLID BASE THEME
• Ok, we're a bit biased :)
• Fusion, Zen, Omega, Genesis, 960, Framework
• Taking care of the Drufaults
• Provides scaffold CSS
Sunday, June 12, 2011
![Page 13: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/13.jpg)
STYLE GENERALLY & CREATE FLEXIBILITY
• Use real(ish) content
• Read this: bit.ly/real-lorem-ipsum
• Use a grid
Sunday, June 12, 2011
![Page 14: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/14.jpg)
FUSIONHOW IT HELPS YOU THEME
MORE SUSTAINABLY
Sunday, June 12, 2011
![Page 15: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/15.jpg)
LOL CAT BREAK!!
Sunday, June 12, 2011
![Page 16: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/16.jpg)
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
![Page 17: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/17.jpg)
STYLE OPTIONS TO UI
CUSTOM SUBTHEME
FUSION CORE
GRID
SKINR MODULE
HOW THE PIECES FIT
Sunday, June 12, 2011
![Page 18: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/18.jpg)
SKINR CREATES OPTIONS
• For designers & developers
• For site admins and content managers
Sunday, June 12, 2011
![Page 19: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/19.jpg)
TARGETING EACH BLOCK ID
HOW YOU USED TO STYLE BLOCKS
Sunday, June 12, 2011
![Page 20: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/20.jpg)
WHAT HAPPENS IF THE 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
![Page 21: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/21.jpg)
SKINR STYLES APPLY TO MANY BLOCKS
Sunday, June 12, 2011
![Page 22: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/22.jpg)
CLIENTS CAN EASILY CHANGE SKINS
*with no CSS edits
Sunday, June 12, 2011
![Page 23: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/23.jpg)
EASY, POINT-AND-CLICK INTERFACE
Sunday, June 12, 2011
![Page 24: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/24.jpg)
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
![Page 25: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/25.jpg)
BUILD THEMES ON DEMO SITES
Sunday, June 12, 2011
![Page 26: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/26.jpg)
TWEAK & POLISH AFTER DEVELOPMENT
Sunday, June 12, 2011
![Page 27: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/27.jpg)
MODULAR THEMING• Look for common elements
• Avoid verbose CSS
• Location & size agnostic
• Stack and extend skins
Sunday, June 12, 2011
![Page 28: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/28.jpg)
SUSTAINABLE THEMING...
• Embraces flexibility of advanced CMS
• Works even when functionality & content change
• Creates an efficient workflow
Sunday, June 12, 2011
![Page 29: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/29.jpg)
FUSION RESOURCES
• @topnotchthemes
• fusiondrupalthemes.com• Documentation• News• Forums
• drupal.org/project/skinr
• Documentation• Issue Queue
Sunday, June 12, 2011
![Page 30: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/30.jpg)
GET A FREE DEMO SITE
webenabled.com/application/tnt-fusion
Clone a copy of the demo site for our free theme, Magazeen
Sunday, June 12, 2011
![Page 31: Sustainable Theming with Fusion - DCCO 2011](https://reader033.vdocument.in/reader033/viewer/2022060109/55579666d8b42aa3378b4ea7/html5/thumbnails/31.jpg)
THANKS FOR ATTENDING!
Sunday, June 12, 2011