90 Minute Introduction to the Fusion Theming Framework for Drupal

8,574 views

Published on

Fusion is a powerful Drupal grid theme framework with point-and-click layouts & built in styles for Blocks, Views, and other modules. Learn how to unlock more of Drupal's potential with Fusion theming without needing to be a coder. Over 7000 sites today are using Fusion – join us and see why. Key takeaways will include:
- A review of Fusion and Skinr key features
- How to build more flexible themes faster, without reinventing the wheel
- How to harness the power of Fusion to build themes faster and simplify future changes
- A tour of Drupal sites built using Fusion and Skinr

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

No Downloads
Views
Total views
8,574
On SlideShare
0
From Embeds
0
Number of Embeds
102
Actions
Shares
0
Downloads
293
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

90 Minute Introduction to the Fusion Theming Framework for Drupal

  1. 1. 90 Minute Introduction to the Fusion Theming Framework for Drupal Stephanie Pakrul Bryan House Co-Founder Sr. Director, Marketing Top Notch Themes Acquia @topnotchthemes @bryanhouse
  2. 2. Upcoming Webinars  Thursday July 29th – How Drupal 7 - The Top 40 Core Modules and What They Mean for You Register Today - http://acquia.com/webinars
  3. 3. Drupal Theming with Fusion presented by: Stephanie Pakrul - TopNotchThemes June 17, 2010
  4. 4. Introductions  Hi, I’m Stephanie  Co-founder of TopNotchThemes  Building Drupal themes for over 4 years  Launched the first all-Drupal premium theme store in 2008 http://fusiondrupalthemes.com
  5. 5. Quick demo!
  6. 6. Who is Fusion for? Non-themers Developers & Themers  Easy CSS-only theming  Rapid prototyping  Bulletproof cross-browser  Decouple workflow layouts through Drupal's UI  Grids without the math  Grid enforces design  Stop reinventing the wheel consistency  Sustainable theming  Free & commercial support  Easier maintenance http://fusiondrupalthemes.com
  7. 7. What is Fusion? and how can it make my life easier?
  8. 8. What is Fusion? FUSION CORE Base theme 960.gs-style Exposes UI CSS grid GRID SKINR MODULE options Inherits from FUSION SUBTHEME Fusion Core http://fusiondrupalthemes.com
  9. 9. A Next Generation Base Theme  Lots of helpful classes and wrappers  Integrated Superfish for dropdown menus  Accessible, SEO-friendly, supports RTL  Well commented with scaffolding CSS  Helpful styling for popular modules  A team of awesome themers behind it! http://fusiondrupalthemes.com
  10. 10. 5 Steps to Build a Fusion Theme  Copy & rename fusion_starter subtheme  Set up basic layout through .info file and/or Drupal UI  Do general theming in CSS – basic typography, backgrounds, etc.  Create Skinr styles in .info file and CSS for blocks, Views, content types, and more  Apply these to your content through Skinr's UI http://fusiondrupalthemes.com
  11. 11. Layout in Fusion css grids, without the headache
  12. 12. What's a CSS Grid?  System of CSS classes to define layout  Enforces visual consistency  Fusion exposes a grid system through Drupal's UI  Easily create custom grids  Further reading about grids: http://bit.ly/bFQLHi http://fusiondrupalthemes.com
  13. 13. 960px Grid w/ Layout Options  16/12 column layout  Fluid or fixed width  Sidebars split, both first or both last  Configurable sidebar widths http://fusiondrupalthemes.com
  14. 14. 960px Grid w/ Layout Options  16/12 column layout  Fluid or fixed width  Sidebars split, both first or both last  Configurable sidebar widths http://fusiondrupalthemes.com
  15. 15. 960px Grid w/ Layout Options  16/12 column layout  Fluid or fixed width  Sidebars split, both first or both last  Configurable sidebar widths http://fusiondrupalthemes.com
  16. 16. 960px Grid w/ Layout Options  16/12 column layout  Fluid or fixed width  Sidebars split, both first or both last  Configurable sidebar widths http://fusiondrupalthemes.com
  17. 17. 960px Grid w/ Layout Options  16/12 column layout  Fluid or fixed width  Sidebars split, both first or both last  Configurable sidebar widths http://fusiondrupalthemes.com
  18. 18. 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 http://fusiondrupalthemes.com
  19. 19. Fusion Regions search login header header header header banner content sidebar content content sidebar sidebar sidebar content footer footer footer footer http://fusiondrupalthemes.com
  20. 20. Skinr in Fusion style once, reapply liberally
  21. 21. Why Skinr?  Skinr provides the user interface for styles  Build modular, extensible styles  Share styles across different types of content http://fusiondrupalthemes.com
  22. 22. 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 http://fusiondrupalthemes.com
  23. 23. Some of Fusion’s Skinr Styles  Horizontal login form  Multi-column menu  2 or 3 column lists  Vertical dropdowns  jQuery Equal Heights http://fusiondrupalthemes.com
  24. 24. More Skinr Features  Apply multiple classes with one skin  Conditionally load CSS, JS, or a custom .tpl.php file  Import/export styles in bulk  Resizable modal with live previews (2.x only)  Page-level (2.x) and region-level (D7) skins  Skin sets can also live in sites/*/skins with their own .info files and be enabled/disabled like modules (2.x) http://fusiondrupalthemes.com
  25. 25. 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 http://fusiondrupalthemes.com
  26. 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 http://fusiondrupalthemes.com
  27. 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 http://fusiondrupalthemes.com
  28. 28. 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 http://fusiondrupalthemes.com
  29. 29. Adding Custom Skinr Styles  Define the style in your .info file  Enable the style on a block, view or panel  Add CSS http://fusiondrupalthemes.com
  30. 30. Adding Custom Skinr Styles  Define the style in your .info file  Enable the style on a block, view or panel  Add CSS http://fusiondrupalthemes.com
  31. 31. Adding Custom Skinr Styles  Define the style in your .info file  Enable the style on a block, view or panel  Add CSS http://fusiondrupalthemes.com
  32. 32. Adding Custom Skinr Styles  Define the style in your .info file  Enable the style on a block, view or panel  Add CSS http://fusiondrupalthemes.com
  33. 33. Adding Custom Skinr Styles  Define the style in your .info file  Enable the style on a block, view or panel  Add CSS http://fusiondrupalthemes.com
  34. 34. Adding Custom Skinr Styles  Define the style in your .info file  Enable the style on a block, view or panel  Add CSS http://fusiondrupalthemes.com
  35. 35. Sites using Fusion in the wild...
  36. 36. Sites using Fusion Interaction Design  Chiyopia Association http://www.chiyopia.com http://www.ixda.org  RheumMD StatusNet http://rheummd.org http://status.net  Kinetex Resources Intelligent Utility Corporation http://www.intelligentutility.com http://www.kinetex.ca http://fusiondrupalthemes.com
  37. 37. Coding time! time to roll up our sleeves...
  38. 38. Looking Ahead – Fusion  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 http://fusiondrupalthemes.com
  39. 39. Looking Ahead – TopNotchThemes  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. http://fusiondrupalthemes.com
  40. 40. Continuing Ed. Documentation and Resources
  41. 41. Fusion Documentation  User 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 http://fusiondrupalthemes.com
  42. 42. 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 http://fusiondrupalthemes.com
  43. 43. 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 http://fusiondrupalthemes.com
  44. 44. Get a Fusion Demo Site Get a copy of the Magazeen theme demo site used in today's webinar at: http://www.webenabled.com/application/tnt-fusion http://fusiondrupalthemes.com
  45. 45. Thanks! Q&A

×