Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Futureproof styling in Drupal

Tamás Hajas
September 05, 2015

Futureproof styling in Drupal

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

Tamás Hajas

September 05, 2015
Tweet

More Decks by Tamás Hajas

Other Decks in Technology

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

  6. None
  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