Upload
sheenadonnelly
View
1.909
Download
0
Tags:
Embed Size (px)
DESCRIPTION
TopNotchThemes presentation on Sustainable Theming at DrupalCamp Colorado 2011.
Citation preview
SUSTAINABLE THEMING
FUSIONDrupal Camp Colorado 2011
TopNotchThemes - Stephanie Pakrul & Sheena Donnelly
with
Sunday, June 12, 2011
GOOD AFTERNOON!
• TopNotchThemes - Custom Designs & Drupal Theming
• FusionDrupalThemes.com - Ready-to-download Drupal themes
Sunday, June 12, 2011
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
TOP 3UNSUSTAINABLE HABITS
OF GOOD THEMERS
Sunday, June 12, 2011
ASSUMINGSTATIC NEEDS & CONTENT
• New stakeholders, campaigns, features, goals
• Shifts in technology
• Don’t work against Drupal’s flexibility
Sunday, June 12, 2011
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
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
QUICK FIXESTO MAKE ANY THEMING PROJECT SUSTAINABLE
Sunday, June 12, 2011
DESIGN ABSTRACTION
• OOGD - Object-Oriented Graphic Design
• Plan for abstraction in the design phase
• Implement abstraction when theming
Sunday, June 12, 2011
CREATE YOUR DESIGN
Sunday, June 12, 2011
THEN ABSTRACT
Sunday, June 12, 2011
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
STYLE GENERALLY & CREATE FLEXIBILITY
• Use real(ish) content
• Read this: bit.ly/real-lorem-ipsum
• Use a grid
Sunday, June 12, 2011
FUSIONHOW IT HELPS YOU THEME
MORE SUSTAINABLY
Sunday, June 12, 2011
LOL CAT BREAK!!
Sunday, June 12, 2011
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
STYLE OPTIONS TO UI
CUSTOM SUBTHEME
FUSION CORE
GRID
SKINR MODULE
HOW THE PIECES FIT
Sunday, June 12, 2011
SKINR CREATES OPTIONS
• For designers & developers
• For site admins and content managers
Sunday, June 12, 2011
TARGETING EACH BLOCK ID
HOW YOU USED TO STYLE BLOCKS
Sunday, June 12, 2011
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
SKINR STYLES APPLY TO MANY BLOCKS
Sunday, June 12, 2011
CLIENTS CAN EASILY CHANGE SKINS
*with no CSS edits
Sunday, June 12, 2011
EASY, POINT-AND-CLICK INTERFACE
Sunday, June 12, 2011
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
BUILD THEMES ON DEMO SITES
Sunday, June 12, 2011
TWEAK & POLISH AFTER DEVELOPMENT
Sunday, June 12, 2011
MODULAR THEMING• Look for common elements
• Avoid verbose CSS
• Location & size agnostic
• Stack and extend skins
Sunday, June 12, 2011
SUSTAINABLE THEMING...
• Embraces flexibility of advanced CMS
• Works even when functionality & content change
• Creates an efficient workflow
Sunday, June 12, 2011
FUSION RESOURCES
• @topnotchthemes
• fusiondrupalthemes.com• Documentation• News• Forums
• drupal.org/project/skinr
• Documentation• Issue Queue
Sunday, June 12, 2011
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
THANKS FOR ATTENDING!
Sunday, June 12, 2011