The combination of Sass, organized partials, a comprehensive style guide, along with some old fashioned planning and common sense can keep your project organized no matter how large it grows or how many new features are added. In this session, I'll cover a strategy that helps keep your theme styles more organized, efficient, scalable, and easier to maintain.

1. THEMING AIN’T EASY
BUT IT’S NECESSARY
How to make your job as a themer less complicated
while simultaneously making it more complicated.
Ryan Blyth // @ryan_blyth
Saturday, June 29, 13

2. •You are using Sass
•You are starting from scratch with your styles
A couple assumptions to get out of the way:
Saturday, June 29, 13

3. •organized
•efficient
•scalable
•maintainable
•easier to estimate and measure
To make theming more:
Saturday, June 29, 13

4. What is a Sass partial?
Sass file that starts with an underscore and is not directly
compiled into CSS. That partial file is then imported into
another file where it is eventually compiled into CSS.
Saturday, June 29, 13

5. Saturday, June 29, 13

6. Saturday, June 29, 13

7. Saturday, June 29, 13

8. http://farm8.staticflickr.com/7195/6894210910_1a5d9ba147_c.jpg
Saturday, June 29, 13

9. Saturday, June 29, 13

10. SMACCS CATEGORIES
•Base
•Layout
•Module
•State
•Theme
Saturday, June 29, 13

11. SMACCS CATEGORIES
•Base
•Layout
•Module
Saturday, June 29, 13

12. BASE
Base rules are the defaults.They are almost exclusively
single element selectors but it could include attribute
selectors, pseudo-class selectors, child selectors or sibling
selectors. Essentially, a base style says that wherever this
element is on the page, it should look like this.
http://smacss.com/book/type-base
Saturday, June 29, 13

13. LAYOUT
Layout rules divide the page into sections. Layouts hold
one or more modules together.
http://smacss.com/book/type-layout
Saturday, June 29, 13

14. MODULE
Modules the reusable, modular parts of our design.They
are the callouts, the sidebar sections, the product lists and
so on.
http://smacss.com/book/type-module
Saturday, June 29, 13

15. Saturday, June 29, 13

16. Saturday, June 29, 13

17. partials
Saturday, June 29, 13

18. partials
global layout
components
Saturday, June 29, 13

19. global
Saturday, June 29, 13

20. { }_normalize.scss
{ }_elements.scss
{ }_helpers.scss
global
Saturday, June 29, 13

21. { }_normalize.scss
{ }_elements.scss
{ }_helpers.scss
@import normalize
@import elements
@import helpers
global
Saturday, June 29, 13

22. { }_normalize.scss
{ }_elements.scss
{ }_helpers.scss
@import normalize
@import elements
@import helpers
global
@import normalize
@import elements
@import helpers
_all.global.scss
Saturday, June 29, 13

23. @import normalize
@import elements
@import helpers
_all.global.scss
Saturday, June 29, 13

24. Saturday, June 29, 13

25. partials
Saturday, June 29, 13

26. partials
global layout
components
Saturday, June 29, 13

27. global
layout
components
Saturday, June 29, 13

28. components
layout
global
Saturday, June 29, 13

29. global
layout
components
{ }
{ } { }
{ }
{ }
{ } { }
{ }
{ } { }
{ }
{ }
{ }
Saturday, June 29, 13

30. global
layout
components
{ }
{ } { }
{ }
{ }
{ } { }
{ }
{ } { }
{ }
{ }
{ } @import
@import
@import
Saturday, June 29, 13

31. global
layout
components
{ }
{ } { }
{ }
{ }
{ } { }
{ }
{ } { }
{ }
{ }
{ } @import
@import
@import
@import
application.scss
Saturday, June 29, 13

32. baseglobal
layout
components
{ }
{ } { }
{ }
{ }
{ } { }
{ }
{ } { }
{ }
{ }
{ } @import
@import
@import
@import
application.scss
Saturday, June 29, 13

33. @import
application.scss
{ }application.css
Saturday, June 29, 13

34. Saturday, June 29, 13

35. Some Example Partial Structures
Saturday, June 29, 13

36. Components
Saturday, June 29, 13

37. Saturday, June 29, 13

38. Saturday, June 29, 13

39. Saturday, June 29, 13

40. Saturday, June 29, 13

41. Saturday, June 29, 13

42. Saturday, June 29, 13

43. Saturday, June 29, 13

44. Saturday, June 29, 13

45. Saturday, June 29, 13

46. .btn
Saturday, June 29, 13

47. .btn .pink
Saturday, June 29, 13

48. .btn .pink
.btn .green
.btn .yellow
Saturday, June 29, 13

49. .btn .pink
.btn .green
.btn .yellow
.view-block .style-1
Saturday, June 29, 13

50. .btn .pink
.btn .green
.btn .yellow
_elements.scss
_elements.scss
.view-block .style-1
Saturday, June 29, 13

51. .btn .pink
.btn .green
.btn .yellow
.btn .pink
_elements.scss
_elements.scss
.view-block .style-1
Saturday, June 29, 13

52. Saturday, June 29, 13

53. Saturday, June 29, 13

54. DRUPAL MARKUP AND CLASSES
• ThemeTemplate Files
• Preprocess Functions
• Theme Functions
• Custom Modules
• Contributed Modules
• And probably some other ways
Saturday, June 29, 13

55. DRUPAL MARKUP AND CLASSES
Menus
• Menu Attributes
Webforms
• Webform Classes
Fields
• Display Suite
• Fences
• Field Formatter Class
• Semantic Fields
• Field Wrappers
Views
• Views
Blocks
• Block Class
Saturday, June 29, 13

56. RESOURCES
• http://sass-lang.com
• http://compass-style.org
• http://smacss.com
• https://drupal.org/project/aurora
• https://drupal.org/project/styleguide
Saturday, June 29, 13

57. THE END
Saturday, June 29, 13