PSD to Theme:
The SMACSS Way
Emma Jane Westby // @emmajanehw
www.drupalize.me
lb.cm/smacss-badcamp
Emma Jane
Drupalize.Me
IRC: emmajane
@emmajanehw
photo credit: mortendk
The Old Way to
PSD to Theme
1. Sketch out the design components.
2. Choose an appropriate base theme.
3. Apply relevant st...
The New Way to
PSD to Theme
1. Sketch out the design components.
2. Create a library of basic styles according to
SMACSS c...
Pro Tip
Let your base theme take care of your
requirements:

• grid framework
• accessibility compliance
• responsive defa...
Intro to SMACSS
SMACSS
• Semantic and Scalable Architecture for CSS
• Jonathan Snook
• http://smacss.com/
SMACSS Rules
• Base rules (HTML element overrides)
• Layout rules (wire frames)
• Component rules (anything that can be
pl...
Folder Structure
•

base:
HTML element

•

components:
almost everything

•

global:
extension of HTML
element

•

layout:...
styles.scss
components
Pro Tips
• Separate your components into their own
files from the beginning.

• Name your files according to the container
s...
yeahbuthow?
You new here?
“Are you new to front-end web
development? Here's a secret: no one else
really knows what they're doing eith...
Ask Yourself
Three Questions
1. What’s the shape?
2. What’s consistent throughout the site?
3. What can be moved like furn...
big to little
Design
What’s the shape?
these are your layout rules
Layout Rules
Identify the Grid
Sketch the Essence
layout/_default.scss

(depends on your base theme and/or grid
framework)
What’s consistent
throughout the site?
these are (typically) your base rules
Base Rules
base/_base.scss
html {
width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch;
display: block;
@include border-box-si...
What can be moved
like furniture?
these are your components
Identify Visual Anchors
Extract the Anchors
(aka images)
Recognize Components
Recognize Components
Recognize Components
Recognize Components
Recognize Components
Recognize Components
components/
_news-teaser.scss
How is it different than your base rules?
.news-teaser {
h2 { text-transform: uppercase; }
p...
Apply it to Drupal.
With your components
in mind, build your site.
You cannot apply a style to an element
which isn’t rendering on the page.
Establish Your Theme
-

.info file
regions (from layout rules)
add the SCSS files and crunched CSS files
add your page.tpl.ph...
Adjust page.tpl.php
Launch an MVP Theme
Apply Your Styles
• Alter your SCSS with extend.
.drupal-weird-class {
@extend .my-awesome-class;
}

• Alter Drupal’s clas...
Refactor:
Remove what’s not working.
Repeat.
Summary
• the benefits of theming by component
• what you need to have in place before you
start

• what's worth keeping fr...
Applying
SMACSS to Drupal

• CSS Coding Standards:

https://drupal.org/node/1886770

• Applying SMACSS to Drupal:

http://...
PSD to Theme:
The SMACSS Way
Emma Jane Westby // @emmajanehw
www.drupalize.me
video lessons for this presentation coming s...
PSD to Theme: The SMACSS Way
Upcoming SlideShare
Loading in …5
×

PSD to Theme: The SMACSS Way

1,828 views

Published on

You've just been handed a gorgeous, static Photoshop file. By tomorrow it needs to be a flexible, extensible, and compatible Drupal theme for some Web site you've never seen. Oh and they said something about it needing to be responsive to 508 or something like that? *gulp* The problem with creating a Drupal theme is —once you know how—it becomes intuitive. Themers spontaneously transform design files into complete Drupal themes without realizing all of the little steps their brain takes to achieve the final solution. It's sort of like those “learn to draw a cat” books where it takes you from a basic circle to a cat with beautiful fur in four simple steps. It's never four complete simple steps though. It's two steps of making circles and then some kind of crazy artist voodoo that makes a complete cat by the last step. In this session Emma Jane Westby (of Front End Drupal fame) will walk you through the steps ... all the steps ... of converting a design into a theme.

Without missing any steps, Emma will walk you through:

the benefits of theming by component
what you need to have in place before you start
what's worth keeping from SMACSS (and what's just overhead)
how to refine her simple procedure so it works for your team, and with any version of Drupal

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,828
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
25
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

PSD to Theme: The SMACSS Way

  1. 1. PSD to Theme: The SMACSS Way Emma Jane Westby // @emmajanehw www.drupalize.me lb.cm/smacss-badcamp
  2. 2. Emma Jane Drupalize.Me IRC: emmajane @emmajanehw
  3. 3. photo credit: mortendk
  4. 4. The Old Way to PSD to Theme 1. Sketch out the design components. 2. Choose an appropriate base theme. 3. Apply relevant static images to the main tpl.php files. 4. Launch the theme. 5. Look for bugs and create high specificity selectors to target and fix problems.
  5. 5. The New Way to PSD to Theme 1. Sketch out the design components. 2. Create a library of basic styles according to SMACSS convention. 3. Adjust Drupal class names to match style component names. 4. Look for bugs and refactor the component styles to match the design.
  6. 6. Pro Tip Let your base theme take care of your requirements: • grid framework • accessibility compliance • responsive defaults
  7. 7. Intro to SMACSS
  8. 8. SMACSS • Semantic and Scalable Architecture for CSS • Jonathan Snook • http://smacss.com/
  9. 9. SMACSS Rules • Base rules (HTML element overrides) • Layout rules (wire frames) • Component rules (anything that can be placed, or reused on your site) • State rules (augments and overrides) • Theme rules (variations)
  10. 10. Folder Structure • base: HTML element • components: almost everything • global: extension of HTML element • layout: region definitions
  11. 11. styles.scss
  12. 12. components
  13. 13. Pro Tips • Separate your components into their own files from the beginning. • Name your files according to the container selector found in the DOM. • A component isn’t accepted until it’s documented with a screenshot referenced from the SCSS file.
  14. 14. yeahbuthow?
  15. 15. You new here? “Are you new to front-end web development? Here's a secret: no one else really knows what they're doing either.” ~ Nicolas Gallagher
  16. 16. Ask Yourself Three Questions 1. What’s the shape? 2. What’s consistent throughout the site? 3. What can be moved like furniture?
  17. 17. big to little
  18. 18. Design
  19. 19. What’s the shape? these are your layout rules
  20. 20. Layout Rules
  21. 21. Identify the Grid
  22. 22. Sketch the Essence
  23. 23. layout/_default.scss (depends on your base theme and/or grid framework)
  24. 24. What’s consistent throughout the site? these are (typically) your base rules
  25. 25. Base Rules
  26. 26. base/_base.scss html { width: 100%; height: 100%; -webkit-overflow-scrolling: touch; display: block; @include border-box-sizing;
  27. 27. What can be moved like furniture? these are your components
  28. 28. Identify Visual Anchors
  29. 29. Extract the Anchors (aka images)
  30. 30. Recognize Components
  31. 31. Recognize Components
  32. 32. Recognize Components
  33. 33. Recognize Components
  34. 34. Recognize Components
  35. 35. Recognize Components
  36. 36. components/ _news-teaser.scss How is it different than your base rules? .news-teaser { h2 { text-transform: uppercase; } p:first-child { color: $highlight; } p { color: $base; } }
  37. 37. Apply it to Drupal.
  38. 38. With your components in mind, build your site. You cannot apply a style to an element which isn’t rendering on the page.
  39. 39. Establish Your Theme - .info file regions (from layout rules) add the SCSS files and crunched CSS files add your page.tpl.php file from your base theme of choice with regions defined + printed
  40. 40. Adjust page.tpl.php
  41. 41. Launch an MVP Theme
  42. 42. Apply Your Styles • Alter your SCSS with extend. .drupal-weird-class { @extend .my-awesome-class; } • Alter Drupal’s classes. template.php
  43. 43. Refactor: Remove what’s not working. Repeat.
  44. 44. Summary • the benefits of theming by component • what you need to have in place before you start • what's worth keeping from SMACSS (and what's just overhead) • how to refine her simple procedure so it works for your team, and with any version of Drupal
  45. 45. Applying SMACSS to Drupal • CSS Coding Standards: https://drupal.org/node/1886770 • Applying SMACSS to Drupal: http://atendesigngroup.com/blog/applyingsmacss-drupal • Dominate the Theme Layer: http://munich2012.drupal.org/program/ sessions/dominate-theme-layer.html
  46. 46. PSD to Theme: The SMACSS Way Emma Jane Westby // @emmajanehw www.drupalize.me video lessons for this presentation coming soon! slides: lb.cm/smacss-badcamp

×