The document presents 'Fusion,' a flexible and sustainable Drupal theme system developed by TopNotchThemes, aiming to facilitate easier theming for non-experts and improve site maintenance. It outlines the benefits of sustainable theming, such as preparing for future changes and enhancing client ownership, while detailing Fusion's features including customizable layouts and style options. Additionally, it provides resources for developers and upcoming enhancements planned for Fusion.

1. Sustainable Theming with Fusion presented by: Sheena Donnelly – TopNotchThemes Follow along w/ a free demo site: http://www.webenabled.com/application/tnt-fusion

2. Introductions TopNotchThemes The first all-Drupal premium theme providers Fusion is our new line of products! http://fusiondrupalthemes.com Support for themers using Fusion http://fusiondrupalthemes.com/join-fusion-pro

3. Fusion Pro Service One Year Subscription $495 ($795 value) 2-for-1 theme licenses First-priority support Private forums One-on-One access to our professional theming team (i.e. I will write CSS for you)

4. What is Sustainable Theming? and why should we care?

5. Planning for the Future Building a theme that services a truly dynamic website Not making assumptions about a site’s future Giving attention to future changes to a site’s content before they’re made Making support painless Providing a better product and giving clients ownership of their website

6. How Can We Accomplish This? Create general styles first, then build up to specific styling Plan paths for adding and overriding styles Create choices for content administrators Make those choices easily accessible (UI)

7. Where Does Fusion Come In? Fusion was built by TopNotchThemes, a company that builds and sells premium Drupal themes We needed a theming system that would: Produce themes that work for a wide range of sites Cut back on repetitive theming tasks Allow non-themers the ability to tweak the layout and look of a site without CSS knowledge The Result: Fusion is a base theme that natively results in a sustainable end-product

8. What Exactly is Fusion? and what makes it so darn special?

9. Fusion is a Base Theme Built for flexibility and sustainability 960px Grid with Layout Options in UI Skinr Integration Great documentation and support http://drupal.org/project/fusion

10. Who is Fusion For? Non-themers Easy CSS-only theming Bulletproof cross-browser layouts through Drupal's UI Grid enforces design consistency Free & commercial support Developers & Themers Rapid prototyping Decouple workflow Grids without the math Stop reinventing the wheel Sustainable theming Easier maintenance

11. Fusion’s Features What makes it different?

12. 960px Grid w/ Layout Options 16/12 column layout Fluid or fixed width Sidebars split, both first or both last Configurable sidebar widths

13. 960px Grid w/ Layout Options 16/12 column layout Fluid or fixed width Sidebars split, both first or both last Configurable sidebar widths

14. 960px Grid w/ Layout Options 16/12 column layout Fluid or fixed width Sidebars split, both first or both last Configurable sidebar widths

15. 960px Grid w/ Layout Options 16/12 column layout Fluid or fixed width Sidebars split, both first or both last Configurable sidebar widths

16. 960px Grid w/ Layout Options 16/12 column layout Fluid or fixed width Sidebars split, both first or both last Configurable sidebar widths

17. Fusion Regions Lots of collapsible regions Use block visibility, widths, and position to create thousands of possible layouts Blocks will divide equally per region to fill their row You can override widths manually or set a block to drop to a new row

18. Fusion Regions header search sidebar content footer header login sidebar content footer header sidebar content footer banner header content footer sidebar

19. Skinr Integration Are you thinking “Whoop-dee-do. I can add Skinr to any base theme” ? Fusion comes with ready-to-use Skinr styles Cut back on repetitive work. Add a few lines of custom CSS to tweak the Fusion styles to your theme Disable any unwanted Fusion styles and add your own

20. Some of Fusion’s Skinr Styles Horizontal login form Multi-column menu 2 or 3 column lists Vertical drop-down menus

21. Quick Demo Let’s see Fusion’s power in action

22. Build Your Own Fusion Theme and get on the path to sustainability

23. Creating a Subtheme Similar to creating a sub theme for any other Drupal theme Copy fusion_starter directory from fusion into sites/all/thems Rename some things (theme directory, .info file, CSS file) Update content in .info file Enable Fusion and your new theme Get Details: http://fusiondrupalthemes.com/support/theme-developers/subtheming-quickstart

24. Tweaking Fusion’s Skinr Styles Just add CSS! Your theme’s CSS files will override Fusion core’s styles. Tweak slightly with updated colors and fonts Or completely change the style

25. Disabling Fusion’s Skinr Styles Find the set of styles in Fusion Core’s .info file Copy the styles to your theme’s .info Remove / tweak individual options Or remove the entire set

26. Disabling Fusion’s Skinr Styles Find the set of styles in Fusion Core’s .info file Copy the styles to your theme’s .info Remove / tweak individual options Or remove the entire set

27. Disabling Fusion’s Skinr Styles Find the set of styles in Fusion Core’s .info file Copy the styles to your theme’s .info Remove / tweak individual options Or remove the entire set

28. Adding Custom Skinr Styles Define the style in your .info file Enable the style on a block, view or panel Add CSS

29. Adding Custom Skinr Styles Define the style in your .info file Enable the style on a block, view or panel Add CSS

30. Adding Custom Skinr Styles Define the style in your .info file Enable the style on a block, view or panel Add CSS

31. Adding Custom Skinr Styles Define the style in your .info file Enable the style on a block, view or panel Add CSS

32. Adding Custom Skinr Styles Define the style in your .info file Enable the style on a block, view or panel Add CSS

33. Adding Custom Skinr Styles Define the style in your .info file Enable the style on a block, view or panel Add CSS

34. What’s in Store Looking ahead to Fusion’s future

35. Fusion: the base theme Drupal 7 version in dev – straight port first, then 2.x Moving theme settings into Skinr styles Community repository of skin sets Better Context/Spaces/Features integration Better support of Panels

36. TopNotchThemes: Our Goals Launch of PowerSites for all premium themes Expecting to complete TNT theme upgrades this fall Expanding Fusion PRO Currently finalizing initial version of a partner program More documentation, screencasts, etc.

37. Continuing Ed. Documentation and Resources

38. Fusion Documentation Standard Documentation http://fusiondrupalthemes.com/support/documentation How to Create a Custom Grid for Fusion http://fusiondrupalthemes.com/support/theme-developers/grid-concepts/creating-custom-grid-definition Developer Center http://fusiondrupalthemes.com/developers

39. Get More Help Fusion Forums http://fusiondrupalthemes.com/forum/using-fusion TopNotchThemes on IRC http://drupal.org/irc #topnotchthemes Fusion Issue Queue http://drupal.org/project/issues/fusion

40. Fusion Downloads Fusion Core http://drupal.org/project/fusion Free Fusion Subthemes from TNT http://drupal.org/project/acquia_marina http://drupal.org/project/acquia_prosper http://drupal.org/project/acquia_slate http://drupal.org/project/magazeen Fusion Distro http://drupal.org/project/fusion_distro

41. Get a Fusion Demo Site http://www.webenabled.com/application/tnt-fusion