Partials and Reusable Components

304
-1

Published on

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.

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

  • Be the first to like this

No Downloads
Views
Total Views
304
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Partials and Reusable Components

  1. 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. 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. 3. •organized •efficient •scalable •maintainable •easier to estimate and measure To make theming more: Saturday, June 29, 13
  4. 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. 5. Saturday, June 29, 13
  6. 6. Saturday, June 29, 13
  7. 7. Saturday, June 29, 13
  8. 8. http://farm8.staticflickr.com/7195/6894210910_1a5d9ba147_c.jpg Saturday, June 29, 13
  9. 9. Saturday, June 29, 13
  10. 10. SMACCS CATEGORIES •Base •Layout •Module •State •Theme Saturday, June 29, 13
  11. 11. SMACCS CATEGORIES •Base •Layout •Module Saturday, June 29, 13
  12. 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. 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. 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. 15. Saturday, June 29, 13
  16. 16. Saturday, June 29, 13
  17. 17. partials Saturday, June 29, 13
  18. 18. partials global layout components Saturday, June 29, 13
  19. 19. global Saturday, June 29, 13
  20. 20. { }_normalize.scss { }_elements.scss { }_helpers.scss global Saturday, June 29, 13
  21. 21. { }_normalize.scss { }_elements.scss { }_helpers.scss @import normalize @import elements @import helpers global Saturday, June 29, 13
  22. 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. 23. @import normalize @import elements @import helpers _all.global.scss Saturday, June 29, 13
  24. 24. Saturday, June 29, 13
  25. 25. partials Saturday, June 29, 13
  26. 26. partials global layout components Saturday, June 29, 13
  27. 27. global layout components Saturday, June 29, 13
  28. 28. components layout global Saturday, June 29, 13
  29. 29. global layout components { } { } { } { } { } { } { } { } { } { } { } { } { } Saturday, June 29, 13
  30. 30. global layout components { } { } { } { } { } { } { } { } { } { } { } { } { } @import @import @import Saturday, June 29, 13
  31. 31. global layout components { } { } { } { } { } { } { } { } { } { } { } { } { } @import @import @import @import application.scss Saturday, June 29, 13
  32. 32. baseglobal layout components { } { } { } { } { } { } { } { } { } { } { } { } { } @import @import @import @import application.scss Saturday, June 29, 13
  33. 33. @import application.scss { }application.css Saturday, June 29, 13
  34. 34. Saturday, June 29, 13
  35. 35. Some Example Partial Structures Saturday, June 29, 13
  36. 36. Components Saturday, June 29, 13
  37. 37. Saturday, June 29, 13
  38. 38. Saturday, June 29, 13
  39. 39. Saturday, June 29, 13
  40. 40. Saturday, June 29, 13
  41. 41. Saturday, June 29, 13
  42. 42. Saturday, June 29, 13
  43. 43. Saturday, June 29, 13
  44. 44. Saturday, June 29, 13
  45. 45. Saturday, June 29, 13
  46. 46. .btn Saturday, June 29, 13
  47. 47. .btn .pink Saturday, June 29, 13
  48. 48. .btn .pink .btn .green .btn .yellow Saturday, June 29, 13
  49. 49. .btn .pink .btn .green .btn .yellow .view-block .style-1 Saturday, June 29, 13
  50. 50. .btn .pink .btn .green .btn .yellow _elements.scss _elements.scss .view-block .style-1 Saturday, June 29, 13
  51. 51. .btn .pink .btn .green .btn .yellow .btn .pink _elements.scss _elements.scss .view-block .style-1 Saturday, June 29, 13
  52. 52. Saturday, June 29, 13
  53. 53. Saturday, June 29, 13
  54. 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. 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. 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. 57. THE END Saturday, June 29, 13

×