Drupalcon SF session: http://sf2010.drupal.org/conference/sessions/theming-skinr

1. Theming with
Skinr!
Presented by Jacine Rodriguez

2. Hello
Jacine Rodriguez Bala Bosch
Jacine moonray
http://drupal.org/user/ http://drupal.org/user/
88931 68275
twitter.com/jacine twitter.com/dasphere

3. Themer Pain Points
Lack of Mockups = No big picture planning
Lack of Time = Sloppy CSS
Crazy Selectors = Less Reusable Code
Not much flexibility,
After Completion = Low shelf life

4. You’re doing it wrong if...
you’re not styling default Drupal elements
you’re targeting ID’s in your CSS excessively
you’re writing way too specific CSS
you’re creating a new tpl file for every little change
you’re not structuring markup in a way that is flexible

5. Skinr is a tool which...
allows you create your own reusable style definitions
(skins) in the theme layer
lets you create your own CSS classes, and forget
about Drupal
makes your styles pointy clicky so that you can take a
vacation

6. What can I do with Skinr?
headings layout
blocks/panes fonts
menus carousels
lists sliders
As much or as little as you want to...

7. Where Skinr shines
Contributed themes
Projects where development is ongoing
Themes for clients that are very hands on
Code snippet sharing and reuse

8. Start by defining your Skins
in .info
skinr[my_nav][title] = Navigation Style
skinr[my_nav][description] = Here's a nav with 2 color options. Pick one.
skinr[my_nav][features][] = block_menu_block
skinr[my_nav][type] = select
skinr[my_nav][stylesheets][all][] = css/nav.css
skinr[my_nav][options][1][label] = Blue
skinr[my_nav][options][1][class] = nav nav-blue
skinr[my_nav][options][2][label] = Green
skinr[my_nav][options][2][class] = nav nav-green

9. Print $skinr in your templates

10. A Client example...

11. What we skinned...

12. Themes that support Skinr
Base themes
Fusion, Adaptive Theme, Zen, Studio, Basic
General/Subthemes
Acquia Prosper, Acquia Marina, AT Koda, Light Fantastic,
Celadon, Newswire, Abstract, AT Panels Everywhere

13. More information
Project page: http://drupal.org/project/skinr
Documentation: Skinr provides full documentation
within the Skinr module via the Advanced Help module.