PSD to Theme: The SMACSS Way
•
2 likes•1,986 views
This document discusses using SMACSS (Semantic and Scalable Architecture for CSS) principles when converting a PSD design file into a Drupal theme. It recommends first sketching out design components, then creating a library of basic styles according to SMACSS conventions like base, layout, and component rules. The new process is to adjust Drupal class names to match component style names, look for bugs, and refactor components to match the design. The benefits are separating components into their own files and building the site according to identified components before applying styles in Drupal.
Report
Share
PSD to Theme: The SMACSS Way
- 1. PSD to Theme: The SMACSS Way Emma Jane Westby // @emmajanehw www.drupalize.me lb.cm/smacss-badcamp
- 5. 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.
- 6. 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.
- 7. Pro Tip Let your base theme take care of your requirements: • grid framework • accessibility compliance • responsive defaults
- 9. SMACSS • Semantic and Scalable Architecture for CSS • Jonathan Snook • http://smacss.com/
- 10. 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)
- 11. Folder Structure • base: HTML element • components: almost everything • global: extension of HTML element • layout: region definitions
- 12. styles.scss
- 13. components
- 14. 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.
- 15. yeahbuthow?
- 16. 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
- 17. Ask Yourself Three Questions 1. What’s the shape? 2. What’s consistent throughout the site? 3. What can be moved like furniture?
- 18. big to little
- 19. Design
- 20. What’s the shape? these are your layout rules
- 21. Layout Rules
- 24. layout/_default.scss (depends on your base theme and/or grid framework)
- 25. What’s consistent throughout the site? these are (typically) your base rules
- 26. Base Rules
- 27. base/_base.scss html { width: 100%; height: 100%; -webkit-overflow-scrolling: touch; display: block; @include border-box-sizing;
- 28. What can be moved like furniture? these are your components
- 30. Extract the Anchors (aka images)
- 37. 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; } }
- 38. Apply it to Drupal.
- 39. With your components in mind, build your site. You cannot apply a style to an element which isn’t rendering on the page.
- 40. 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
- 42. Launch an MVP Theme
- 43. Apply Your Styles • Alter your SCSS with extend. .drupal-weird-class { @extend .my-awesome-class; } • Alter Drupal’s classes. template.php
- 44. Refactor: Remove what’s not working. Repeat.
- 45. 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
- 46. 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
- 47. 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