Upload
acquia
View
8.760
Download
1
Embed Size (px)
DESCRIPTION
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
Citation preview
90 Minute Introduction to the Fusion Theming Framework for Drupal
Bryan House
Sr. Director, Marketing Acquia
@bryanhouse
Stephanie Pakrul Co-Founder
Top Notch Themes
@topnotchthemes
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
Drupal Theming with Fusion
presented by:
Stephanie Pakrul - TopNotchThemes
June 17, 2010
http://fusiondrupalthemes.com
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
Quick demo!
http://fusiondrupalthemes.com
Who is Fusion for?
Developers & Themers
Rapid prototyping
Decouple workflow
Grids without the math
Stop reinventing the wheel
Sustainable theming
Easier maintenance
Non-themers
Easy CSS-only theming
Bulletproof cross-browser
layouts through Drupal's UI
Grid enforces design
consistency
Free & commercial support
What is Fusion?
and how can it make my life easier?
http://fusiondrupalthemes.com
What is Fusion?
FUSION SUBTHEME
SKINR MODULEGRID
FUSION CORE Base theme
960.gs-style CSS grid
Exposes UI options
Inherits from Fusion Core
http://fusiondrupalthemes.com
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
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
Layout in Fusion
css grids, without the headache
http://fusiondrupalthemes.com
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
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
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
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
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
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
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
Fusion Regions
header
search
side
bar
content
footer
header
login
side
bar content
footer
header
side
barcontent
footer
banner
header
content
footer
side
bar
Skinr in Fusion
style once, reapply liberally
http://fusiondrupalthemes.com
Why Skinr?
Skinr provides the user
interface for styles
Build modular,
extensible styles
Share styles across
different types of
content
http://fusiondrupalthemes.com
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
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
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
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
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
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
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
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
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
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
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
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
Adding Custom Skinr Styles
Define the style in
your .info file
Enable the style on a
block, view or panel
Add CSS
Sites using Fusion
in the wild...
http://fusiondrupalthemes.com
Sites using Fusion
Interaction Design Associationhttp://www.ixda.org
StatusNethttp://status.net
Intelligent Utilityhttp://www.intelligentutility.com
Chiyopiahttp://www.chiyopia.com
RheumMDhttp://rheummd.org
Kinetex Resources Corporationhttp://www.kinetex.ca
Coding time!
time to roll up our sleeves...
http://fusiondrupalthemes.com
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
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.
Continuing Ed.
Documentation and Resources
http://fusiondrupalthemes.com
Fusion Documentation
User Documentationhttp://fusiondrupalthemes.com/support/documentation
How to Create a Custom Grid for Fusionhttp://fusiondrupalthemes.com/support/theme-developers/grid-
concepts/creating-custom-grid-definition
Developer Centerhttp://fusiondrupalthemes.com/developers
http://fusiondrupalthemes.com
Get More Help
Fusion Forumshttp://fusiondrupalthemes.com/forum/using-fusion
TopNotchThemes on IRChttp://drupal.org/irc
#topnotchthemes
Fusion Issue Queuehttp://drupal.org/project/issues/fusion
http://fusiondrupalthemes.com
Fusion Downloads
Fusion Corehttp://drupal.org/project/fusion
Free Fusion Subthemes from TNThttp://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
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
Thanks!
Q&A