Sustainable Theming with Fusion - DCCO 2011

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


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?


TOP 3UNSUSTAINABLE HABITS

OF GOOD THEMERS


ASSUMINGSTATIC NEEDS & CONTENT

• New stakeholders, campaigns, features, goals

• Shifts in technology

• Don’t work against Drupal’s flexibility


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)


REPEATING YOURSELF,REPEATING YOURSELF.

• Re-building Layouts & configuring grids

• Re-styling for common design motifs

• Wrangling the same cross-browser issues


QUICK FIXESTO MAKE ANY THEMING PROJECT SUSTAINABLE


DESIGN ABSTRACTION

• OOGD - Object-Oriented Graphic Design

• Plan for abstraction in the design phase

• Implement abstraction when theming


CREATE YOUR DESIGN


THEN ABSTRACT


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


STYLE GENERALLY & CREATE FLEXIBILITY

• Use real(ish) content

• Read this: bit.ly/real-lorem-ipsum

• Use a grid


FUSIONHOW IT HELPS YOU THEME

MORE SUSTAINABLY


LOL CAT BREAK!!


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


http://bit.ly/about-grids




STYLE OPTIONS TO UI

CUSTOM SUBTHEME

FUSION CORE

GRID

SKINR MODULE

HOW THE PIECES FIT


SKINR CREATES OPTIONS

• For designers & developers

• For site admins and content managers


TARGETING EACH BLOCK ID

HOW YOU USED TO STYLE BLOCKS


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?


SKINR STYLES APPLY TO MANY BLOCKS


CLIENTS CAN EASILY CHANGE SKINS

*with no CSS edits


EASY, POINT-AND-CLICK INTERFACE


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


BUILD THEMES ON DEMO SITES


TWEAK & POLISH AFTER DEVELOPMENT


MODULAR THEMING• Look for common elements

• Avoid verbose CSS

• Location & size agnostic

• Stack and extend skins


SUSTAINABLE THEMING...

• Embraces flexibility of advanced CMS

• Works even when functionality & content change

• Creates an efficient workflow


FUSION RESOURCES

• @topnotchthemes

• fusiondrupalthemes.com• Documentation• News• Forums

• drupal.org/project/skinr

• Documentation• Issue Queue


GET A FREE DEMO SITE

webenabled.com/application/tnt-fusion

Clone a copy of the demo site for our free theme, Magazeen


THANKS FOR ATTENDING!


Sustainable Theming with Fusion - DCCO 2011

Technology

Transcript of Sustainable Theming with Fusion - DCCO 2011