Futureproof styling in Drupal

Slides of my Drupal Dev Days Montpellier 2015 session.
http://montpellier2015.drupaldays.org/sessions/futureproof-styling-drupal

Transcript

1. Futureproof styling 
 in Drupal (8) by Tamás Hajas
2. more than 
 200
 .css files in Drupal 8 (currently)
3. There is NO One Right Way!
4. There is NO One Right Way!
5. Tamás Hajas Drupal Consultant Integral Vision Kft
7. Team You always work 
 in a
8. Team » Communication
9. Coding Standards
10. Drupal CSS Coding Standards https://www.drupal.org/ node/1886770
11. Harry Roberts CSS Guidelines http://cssguidelin.es
12. Hugo Giraudel Sass Guidelines http://sass-guidelin.es
13. CSS formatting guidelines CSS architecture (for Drupal 8) CSS file organization (for Drupal 8)
14. CSS formatting guidelines CSS architecture (for Drupal 8) CSS file organization (for Drupal 8)
15. Comment 
 your code! https://www.flickr.com/photos/rushen/16071372313
16. Team » Communication
17. “code should be 
 self-documenting”
18. /** * Grid container * Must only contain '.cell' children. */ .grid { height: 100%; font-size: 0; white-space: nowrap; }
19. /** * Grid container * Must only contain '.cell' children. */ .grid { height: 100%; /* Remove inter-cell whitespace */ font-size: 0; /* Prevent inline-block cells wrapping */ white-space: nowrap; }
20. /** * Grid container * Must only contain '.cell' children. * 1. Remove inter cell whitespace. * 2. Prevent inline-block cells wrapping */ .grid { height: 100%; font-size: 0; /* 1 */ white-space: nowrap; /* 2 */ }
21. Source: Sevens’s button.css
22. “Don’t make
 me think!” https://www.flickr.com/photos/mugley/2594318333
23. CSS formatting guidelines CSS architecture (for Drupal 8) CSS file organization (for Drupal 8)
24. Keep specificity low! https://www.flickr.com/photos/freetheimage/14741164059
25. Component
26. Component Atom, Molecule… Atomic Design Module SMACSS Object OOCSS Block BEM
27. BEM
28. Block Element Modifier
29. <div class="flower__bed"> <div class="flower"> <div class="flower__petals"> <div class="flower__face"></div> </div> <div class="flower__stem"> <div class="flower__leaves"></div> </div> </div> </div> John Albin: Managing complex projects with design components Block
30. <div class="flower__bed"> <div class="flower"> <div class="flower__petals"> <div class="flower__face"></div> </div> <div class="flower__stem"> <div class="flower__leaves"></div> </div> </div> </div> John Albin: Managing complex projects with design components Element
31. <div class="flower__bed"> <div class="flower flower--tulip"> <div class="flower__petals"> <div class="flower__face"></div> </div> <div class="flower__stem"> <div class="flower__leaves"></div> </div> </div> </div> John Albin: Managing complex projects with design components Modifier
32. „Class names should communicate useful information to developers.” 
 – Nicolas Gallagher About HTML Semantics and Front-End Architecture
33. Proposal: A Style Guide for Seven Progress bar component
34. CSS architecture (for Drupal 8) Progress bar component <div class="progress progress--small"> <label class="label label--small">Uploading sunset.jpg</label> <div class="progress__track"> <div class=“progress__bar js-progress-percent“ 
 style="width: 29%"></div> </div> <div class="progress__description"> <div class="layout-pull">Uploaded 221 of 762KB</div> <strong class="layout-push">29%</strong> </div> <a class="progress__cancel" href="#" title="cancel"> <span class="visually-hidden">cancel</span> </a> </div>
35. CSS architecture (for Drupal 8) Progress bar component /** * Progress Bar component */ .progress {} .progress__track {} .progress__bar {} .progress__description {} .progress__cancel {} .progress__cancel:focus, .progress__cancel:hover {} /** * Progress Bar small variant */ .progress--small .progress__track {} .progress--small .progress__bar {} .progress--small .progress__cancel {}
36. Source: Bartik theme Pager in Bartik
37. Source: Bartik’s pager.css Pager in Bartik
38. CSS formatting guidelines CSS architecture (for Drupal 8) CSS file organization (for Drupal 8)
39. SMACSS See purecss.io for kind of an implementation
40. SMACSS structure • Base ul { list-style-type: none; padding: 0; margin: 0; }
41. SMACSS structure • Base • Layout .layout-content {} .col-md-6 {}
42. SMACSS structure • Base • Layout • Module
43. SMACSS structure • Base • Layout • Module • State
44. <div class="flower is-pollinating"> John Albin: Managing complex projects with design components State
45. John Albin: Managing complex projects with design components .flover:hover {} State
46. @media "print" { .flover {} } John Albin: Managing complex projects with design components State
47. SMACSS structure • Base • Layout • Module • State • Theme .install-page { background-color: #1275b2; … }
48. SMACSS-like structure • Base • Layout • Module • State • Theme
49. SMACSS-like structure • Base • Layout • Component Module • State • Theme
50. • Base • Layout • Component = Block • Element • Modifier • State • Theme John Albin: Managing complex projects with design components
51. CSS files for Drupal 8 themes
52. • base.css • layout.css • components.css
 (components, -state, -theme) CSS files for Drupal 8 themes
53. base • elements.css • print.css • typography.css layout • layout.css • node-add.css components • buttons.css • tabs.css • … theme • install-page.css • maintenance
 -page.css CSS files for Drupal 8 themes Source: Drupal 8 Seven theme Bartik refactor meta issue: https://www.drupal.org/node/1342054
54. CSS files for Drupal 8 modules
55. • module_name.module.css 
 (layout, component, state) • module_name.theme.css • module_name.admin.css 
 (layout, component, state) • module_name.admin.theme.css • module_name.base.css CSS files for Drupal 8 modules Modules refactor issue: https://www.drupal.org/node/1995272
56. # Stylesheets override # Remove not used stylesheets Change record: https://drupal.org/node/1876600 stylesheets-override: - system.theme.css stylesheets-remove: - node.module.css mysubtheme.info.yml
57. CSS formatting guidelines CSS file organization (for Drupal 8) CSS architecture (for Drupal 8) [META] Architect our CSS – http://drupal.org/node/1921610
58. There is NO One Right Way!
59. Tamás Hajas Drupal consultant Integral Vision Ltd integralvision.hu about.me/tamashajas