90 minute introduction to the fusion theming framework for drupal

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!


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?


What is Fusion?

FUSION SUBTHEME

SKINR MODULEGRID

FUSION CORE Base theme

960.gs-style CSS grid

Exposes UI options

Inherits from Fusion Core


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!


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


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://bit.ly/bFQLHi


960px Grid w/ Layout Options

16/12 column layout

Fluid or fixed width

Sidebars split, both first

or both last

Configurable sidebar

widths



16/12 column layout


Sidebars split, both

first or both last


widths



16/12 column layout


Sidebars split, both first

or both last


widths


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


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


Why Skinr?

Skinr provides the user

interface for styles

Build modular,

extensible styles

Share styles across

different types of

content


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


Some of Fusion’s Skinr Styles

Horizontal login form

Multi-column menu

2 or 3 column lists

Vertical dropdowns

jQuery Equal Heights


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)


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


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






theme’s .info

Remove / tweak

individual options







theme’s .info

Remove / tweak individual

options



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...


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...


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


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


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


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


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


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

90 minute introduction to the fusion theming framework for drupal

Technology