Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

April 2016 - MiniCamp Atlanta - SMACSS - Preparing Drupal 8 CSS Organization


Published on

A primer on SMACSS standards, the direction of CSS organization in Drupal 8, and best practices for CSS preprocessors like Sass.

Published in: Education
  • Be the first to comment

April 2016 - MiniCamp Atlanta - SMACSS - Preparing Drupal 8 CSS Organization

  2. 2. SMACSS in Drupal 8 is not required or a standard. However, it is a best-practice. Implementing SMACSS in Drupal 8 is a work-in-progress. A NOTE TO THE READER. hey,listen Follow along:
  3. 3. A LITTLE ABOUT MYSELF. ericsembrat Web Manager at the College of Engineering at Georgia Tech. President of the Atlanta Drupal User’s Group. Doctoral student at Georgia State University. Learn more:
  5. 5. CONTROL-F ALL DAY. disorganized CSS best-practices in Drupal 7 didn’t exist beyond basic CSS practices. So, many of your theme frameworks have lots of different confusing CSS organization. Go back in time:
  6. 6. Our old friend Zen (3.x).
  7. 7. Or, our newer friend - Zen (5.x).
  8. 8. (how I feel when navigating all the different CSS structures to find relevant styles)
  10. 10. smacssAll about the smacks.
  11. 11. SMACSS (pronounced “smacks”) is more style guide than rigid framework. There is no library within here for you to download or install. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS. Scalable (and) 
 Architecture (for) CSS
  12. 12. Buy the book:
  13. 13. SMACSS follows object-oriented programming (OO) in that its goals are to: Increase the semantic value of a section of html and content Decrease the expectation of a specific html structure More generally, SMACSS’ focus is on locating and organizing patterns throughout your CSS so that it is reusable and easier to segment and adjust.
  14. 14. SMACSS’ design is intended to be a starting point (not an end-all) to building a style guide and CSS standard. Organization is not rigidly defined. A NOTE TO THE READER. hey,listen
  15. 15. base layout module state theme
  16. 16. base Base rules are applied directly to elements through element selectors, descendent selectors, child selectors, pseudo-classes, however not specific class or ID selectors. (remember reset.css? this is where that goes)
  17. 17. layout Layout rules apply directly to the sizes and locations of your major template components (header, footer, sidebar, main area).
  18. 18. module Minor page components include navigation bars and widgets. They tend to be inside layout components and even within other modules. Modules should be designed so they can exist on their own, which gives them greater flexibility in being combined and moved around to different parts of the design without breaking the layout. With modules we do want to avoid IDs and element selectors. More reuse means classes.
  19. 19. state A state is something that augments and overrides all other styles. States are generally applied to the same element as a layout rule or applied to the same element as a base module class.
  20. 20. theme A theme defines colors and images that give your application or site its look and feel. Themes can affect any of the primary types. It could override base styles like default link colors. It could change module elements such as chrome colors and borders. It could affect layout with different arrangements. It could also alter how states look.
  21. 21. base layout module state theme
  22. 22. base layout module state theme
  23. 23. base layout component state theme
  24. 24. drupal8themes?SMACSS + Drupal for themers.
  25. 25. css/ base/ {base file name}.css layout/ {layout file name}.css component/ {component file name}.css theme/ {theme file name}.css File structure for Drupal 8 theme CSS:
  26. 26. Always separate Base, Layout, and Component styles into their own files. Drupal will aggregate these separate files into one file, so there is no performance problem with this practice.)
  27. 27. For complex themes, consider placing each component or component family in its own file. State rules, including media queries, should be included with the component to which they apply.
  28. 28. drupal8modules?SMACSS + Drupal for coders.
  29. 29. module_name.module.css: This file should hold the minimal styles needed to get the module's functionality working. (layout, component state styles). module_name.theme.css: This file should hold extra styles to make the module's functionality aesthetically pleasing. (theme styles). module_name.admin.css: This file should hold the minimal styles needed to get the module's admin screens working. (layout, component state styles). On admin screens, the module may choose to load the *.module.css in addition to the *.admin.css file. module_name.admin.theme.css: This file should hold extra styles to make the module's admin screens aesthetically pleasing. (theme styles). File structure for Drupal 8 theme CSS:
  30. 30. Note: Modules should never have any base styles. Drupal core's modules do not have any base styles. Instead Drupal core uses the Normalize.css library augmented with a drupal.base.css library.
  31. 31. helpwithsmacss?CSS preprocessors to the rescue.
  32. 32. Sass (and contributed plugins) help to encourage consistency through the usage of mixins, variables, loops, and libraries.
  33. 33. Mixins
  34. 34. Variables
  35. 35. Loops / Logic
  36. 36. Libraries
  37. 37. Partial Files
  38. 38. libsass sass-globbing css3 library (compass, bourbon) plugins as needed cssfiles sassfiles
  39. 39. libsass sass-globbing css3 library (compass, bourbon) plugins as needed cssfiles sassfiles your css (as sass files) compiled css files
  40. 40. Sass-globbing?
  41. 41. base layout component theme
  42. 42. questions?