April 2016 - MiniCamp Atlanta - SMACSS - Preparing Drupal 8 CSS Organization
1 like474 views
The document discusses implementing SMACSS (Scalable and Modular Architecture for CSS) principles in Drupal 8 CSS organization as a best practice, emphasizing a flexible structure rather than a rigid framework. It outlines how to organize base, layout, module, state, and theme styles effectively, and highlights the importance of separating styles into different files for better management. The document also notes the role of CSS preprocessors like Sass in maintaining consistency across styles.
April 2016 - MiniCamp Atlanta - SMACSS - Preparing Drupal 8 CSS Organization
- 1. smacssPREPARING DRUPAL 8 CSS ORGANIZATION.
- 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: https://www.drupal.org/node/1887922
- 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: http://www.webbeh.com
- 4. cssorganizationTHE NEVER-ENDING STRUGGLE FOR SANITY.
- 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: https://www.drupal.org/node/302199
- 6. Our old friend Zen (3.x).
- 7. Or, our newer friend - Zen (5.x).
- 8. (how I feel when navigating all the different CSS structures to find relevant styles)
- 9. there’saneasierwayLET’S BRING SOME BEST-PRACTICES IN FRONT-END INTO DRUPAL.
- 10. smacssAll about the smacks.
- 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) Modular Architecture (for) CSS
- 12. Buy the book: https://smacss.com/
- 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. 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
- 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. layout Layout rules apply directly to the sizes and locations of your major template components (header, footer, sidebar, main area).
- 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. 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. 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.
- 24. drupal8themes?SMACSS + Drupal for themers.
- 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. 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. 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. drupal8modules?SMACSS + Drupal for coders.
- 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. 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. helpwithsmacss?CSS preprocessors to the rescue.
- 32. Sass (and contributed plugins) help to encourage consistency through the usage of mixins, variables, loops, and libraries.
- 33. Mixins
- 34. Variables
- 35. Loops / Logic
- 36. Libraries
- 37. Partial Files
- 38. libsass sass-globbing css3 library (compass, bourbon) plugins as needed cssfiles sassfiles
- 39. libsass sass-globbing css3 library (compass, bourbon) plugins as needed cssfiles sassfiles your css (as sass files) compiled css files
- 40. Sass-globbing?
- 41. base layout component theme
- 42. questions?