Sustainable Drupal Theming with Fusion

2,535 views
2,428 views

Published on

An introduction to the Fusion base theme system and how it can create flexible, sustainable theme solutions.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,535
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
49
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • You can also use arbitrary indents (like 960.gs's push/pull) if you want to manually indent a block to a certain grid position
  • Subtheme upgrade docs are on site, more as we upgrade contrib themes first Fairly straight port to 7.x-1.x branch, taking advantage of simple D7 updates where possible (simplifying template.php, region styles for primary links) but not a major overhaul Then 2.x branch where we'd like to move more of our custom theme settings/layout into Skinr styles Already started a repository, but more coming Skinr 2.x lets you apply page styles based on path, but we think there's a great opportunity for Context-aware styles here, and being able to package up configuration in different ways At some point, Fusion's layout and Panels' flexible layout converge – our time may be better spent working on Panels + grid support
  • Fusion PRO has been very successful Contact us if you'd like to talk about access to our entire catalog through partner program – not for reselling, but companies looking to integrate Fusion themes into their product/service offering, purchasing a dozen or more themes per year
  • Sustainable Drupal Theming with Fusion

    1. 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. 2. Introductions <ul><li>TopNotchThemes </li></ul><ul><ul><li>The first all-Drupal premium theme providers </li></ul></ul><ul><ul><li>Fusion is our new line of products! </li></ul></ul><ul><ul><ul><li>http://fusiondrupalthemes.com </li></ul></ul></ul><ul><ul><li>Support for themers using Fusion </li></ul></ul><ul><ul><ul><li>http://fusiondrupalthemes.com/join-fusion-pro </li></ul></ul></ul>
    3. 3. Fusion Pro Service <ul><li>One Year Subscription $495 ($795 value) </li></ul><ul><ul><li>2-for-1 theme licenses </li></ul></ul><ul><ul><li>First-priority support </li></ul></ul><ul><ul><li>Private forums </li></ul></ul><ul><ul><li>One-on-One access to our professional theming team (i.e. I will write CSS for you) </li></ul></ul>
    4. 4. What is Sustainable Theming? and why should we care?
    5. 5. Planning for the Future <ul><li>Building a theme that services a truly dynamic website </li></ul><ul><li>Not making assumptions about a site’s future </li></ul><ul><li>Giving attention to future changes to a site’s content before they’re made </li></ul><ul><li>Making support painless </li></ul><ul><li>Providing a better product and giving clients ownership of their website </li></ul>
    6. 6. How Can We Accomplish This? <ul><li>Create general styles first, then build up to specific styling </li></ul><ul><li>Plan paths for adding and overriding styles </li></ul><ul><li>Create choices for content administrators </li></ul><ul><li>Make those choices easily accessible (UI) </li></ul>
    7. 7. Where Does Fusion Come In? <ul><li>Fusion was built by TopNotchThemes, a company that builds and sells premium Drupal themes </li></ul><ul><li>We needed a theming system that would: </li></ul><ul><ul><li>Produce themes that work for a wide range of sites </li></ul></ul><ul><ul><li>Cut back on repetitive theming tasks </li></ul></ul><ul><ul><li>Allow non-themers the ability to tweak the layout and look of a site without CSS knowledge </li></ul></ul><ul><li>The Result: Fusion is a base theme that natively results in a sustainable end-product </li></ul>
    8. 8. What Exactly is Fusion? and what makes it so darn special?
    9. 9. Fusion is a Base Theme <ul><li>Built for flexibility and sustainability </li></ul><ul><li>960px Grid with Layout Options in UI </li></ul><ul><li>Skinr Integration </li></ul><ul><li>Great documentation and support </li></ul><ul><li>http://drupal.org/project/fusion </li></ul>
    10. 10. Who is Fusion For? <ul><li>Non-themers </li></ul><ul><li>Easy CSS-only theming </li></ul><ul><li>Bulletproof cross-browser layouts through Drupal's UI </li></ul><ul><li>Grid enforces design consistency </li></ul><ul><li>Free & commercial support </li></ul><ul><li>Developers & Themers </li></ul><ul><li>Rapid prototyping </li></ul><ul><li>Decouple workflow </li></ul><ul><li>Grids without the math </li></ul><ul><li>Stop reinventing the wheel </li></ul><ul><li>Sustainable theming </li></ul><ul><li>Easier maintenance </li></ul>
    11. 11. Fusion’s Features What makes it different?
    12. 12. 960px Grid w/ Layout Options <ul><li>16/12 column layout </li></ul><ul><li>Fluid or fixed width </li></ul><ul><li>Sidebars split, both first or both last </li></ul><ul><li>Configurable sidebar widths </li></ul>
    13. 13. 960px Grid w/ Layout Options <ul><li>16/12 column layout </li></ul><ul><li>Fluid or fixed width </li></ul><ul><li>Sidebars split, both first or both last </li></ul><ul><li>Configurable sidebar widths </li></ul>
    14. 14. 960px Grid w/ Layout Options <ul><li>16/12 column layout </li></ul><ul><li>Fluid or fixed width </li></ul><ul><li>Sidebars split, both first or both last </li></ul><ul><li>Configurable sidebar widths </li></ul>
    15. 15. 960px Grid w/ Layout Options <ul><li>16/12 column layout </li></ul><ul><li>Fluid or fixed width </li></ul><ul><li>Sidebars split, both first or both last </li></ul><ul><li>Configurable sidebar widths </li></ul>
    16. 16. 960px Grid w/ Layout Options <ul><li>16/12 column layout </li></ul><ul><li>Fluid or fixed width </li></ul><ul><li>Sidebars split, both first or both last </li></ul><ul><li>Configurable sidebar widths </li></ul>
    17. 17. Fusion Regions <ul><li>Lots of collapsible regions </li></ul><ul><li>Use block visibility, widths, and position to create thousands of possible layouts </li></ul><ul><li>Blocks will divide equally per region to fill their row </li></ul><ul><li>You can override widths manually or set a block to drop to a new row </li></ul>
    18. 18. Fusion Regions header search sidebar content footer header login sidebar content footer header sidebar content footer banner header content footer sidebar
    19. 19. Skinr Integration <ul><li>Are you thinking “Whoop-dee-do. I can add Skinr to any base theme” ? </li></ul><ul><li>Fusion comes with ready-to-use Skinr styles </li></ul><ul><ul><li>Cut back on repetitive work. Add a few lines of custom CSS to tweak the Fusion styles to your theme </li></ul></ul><ul><ul><li>Disable any unwanted Fusion styles and add your own </li></ul></ul>
    20. 20. Some of Fusion’s Skinr Styles <ul><li>Horizontal login form </li></ul><ul><li>Multi-column menu </li></ul><ul><li>2 or 3 column lists </li></ul><ul><li>Vertical drop-down menus </li></ul>
    21. 21. Quick Demo Let’s see Fusion’s power in action
    22. 22. Build Your Own Fusion Theme and get on the path to sustainability
    23. 23. Creating a Subtheme <ul><li>Similar to creating a sub theme for any other Drupal theme </li></ul><ul><li>Copy fusion_starter directory from fusion into sites/all/thems </li></ul><ul><li>Rename some things (theme directory, .info file, CSS file) </li></ul><ul><li>Update content in .info file </li></ul><ul><li>Enable Fusion and your new theme </li></ul><ul><li>Get Details: http://fusiondrupalthemes.com/support/theme-developers/subtheming-quickstart </li></ul>
    24. 24. Tweaking Fusion’s Skinr Styles <ul><li>Just add CSS! </li></ul><ul><ul><li>Your theme’s CSS files will override Fusion core’s styles. </li></ul></ul><ul><ul><li>Tweak slightly with updated colors and fonts </li></ul></ul><ul><ul><li>Or completely change the style </li></ul></ul>
    25. 25. Disabling Fusion’s Skinr Styles <ul><li>Find the set of styles in Fusion Core’s .info file </li></ul><ul><li>Copy the styles to your theme’s .info </li></ul><ul><li>Remove / tweak individual options </li></ul><ul><li>Or remove the entire set </li></ul>
    26. 26. Disabling Fusion’s Skinr Styles <ul><li>Find the set of styles in Fusion Core’s .info file </li></ul><ul><li>Copy the styles to your theme’s .info </li></ul><ul><li>Remove / tweak individual options </li></ul><ul><li>Or remove the entire set </li></ul>
    27. 27. Disabling Fusion’s Skinr Styles <ul><li>Find the set of styles in Fusion Core’s .info file </li></ul><ul><li>Copy the styles to your theme’s .info </li></ul><ul><li>Remove / tweak individual options </li></ul><ul><li>Or remove the entire set </li></ul>
    28. 28. Adding Custom Skinr Styles <ul><li>Define the style in your .info file </li></ul><ul><li>Enable the style on a block, view or panel </li></ul><ul><li>Add CSS </li></ul>
    29. 29. Adding Custom Skinr Styles <ul><li>Define the style in your .info file </li></ul><ul><li>Enable the style on a block, view or panel </li></ul><ul><li>Add CSS </li></ul>
    30. 30. Adding Custom Skinr Styles <ul><li>Define the style in your .info file </li></ul><ul><li>Enable the style on a block, view or panel </li></ul><ul><li>Add CSS </li></ul>
    31. 31. Adding Custom Skinr Styles <ul><li>Define the style in your .info file </li></ul><ul><li>Enable the style on a block, view or panel </li></ul><ul><li>Add CSS </li></ul>
    32. 32. Adding Custom Skinr Styles <ul><li>Define the style in your .info file </li></ul><ul><li>Enable the style on a block, view or panel </li></ul><ul><li>Add CSS </li></ul>
    33. 33. Adding Custom Skinr Styles <ul><li>Define the style in your .info file </li></ul><ul><li>Enable the style on a block, view or panel </li></ul><ul><li>Add CSS </li></ul>
    34. 34. What’s in Store Looking ahead to Fusion’s future
    35. 35. Fusion: the base theme <ul><li>Drupal 7 version in dev – straight port first, then 2.x </li></ul><ul><li>Moving theme settings into Skinr styles </li></ul><ul><li>Community repository of skin sets </li></ul><ul><li>Better Context/Spaces/Features integration </li></ul><ul><li>Better support of Panels </li></ul>
    36. 36. TopNotchThemes: Our Goals <ul><li>Launch of PowerSites for all premium themes </li></ul><ul><li>Expecting to complete TNT theme upgrades this fall </li></ul><ul><li>Expanding Fusion PRO </li></ul><ul><li>Currently finalizing initial version of a partner program </li></ul><ul><li>More documentation, screencasts, etc. </li></ul>
    37. 37. Continuing Ed. Documentation and Resources
    38. 38. Fusion Documentation <ul><li>Standard Documentation http://fusiondrupalthemes.com/support/documentation </li></ul><ul><li>How to Create a Custom Grid for Fusion http://fusiondrupalthemes.com/support/theme-developers/grid-concepts/creating-custom-grid-definition </li></ul><ul><li>Developer Center http://fusiondrupalthemes.com/developers </li></ul>
    39. 39. Get More Help <ul><li>Fusion Forums http://fusiondrupalthemes.com/forum/using-fusion </li></ul><ul><li>TopNotchThemes on IRC http://drupal.org/irc #topnotchthemes </li></ul><ul><li>Fusion Issue Queue http://drupal.org/project/issues/fusion </li></ul>
    40. 40. Fusion Downloads <ul><li>Fusion Core http://drupal.org/project/fusion </li></ul><ul><li>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 </li></ul><ul><li>Fusion Distro http://drupal.org/project/fusion_distro </li></ul>
    41. 41. Get a Fusion Demo Site <ul><li>http://www.webenabled.com/application/tnt-fusion </li></ul>

    ×