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
   

   View Slide

2. more than
   

   200

   .css files in Drupal 8 (currently)
   

   View Slide

3. There is NO
   One Right Way!
   

   View Slide

4. There is NO
   One Right Way!
   

   View Slide

5. Tamás Hajas
   Drupal Consultant
   Integral Vision Kft
   

   View Slide

6. View Slide

7. Team
   You always work 

   in a
   

   View Slide

8. Team » Communication
   

   View Slide

9. Coding Standards
   

   View Slide

10. Drupal CSS
    Coding Standards
    https://www.drupal.org/
    node/1886770
    

    View Slide

11. Harry Roberts
    CSS Guidelines
    http://cssguidelin.es
    

    View Slide

12. Hugo Giraudel
    Sass Guidelines
    http://sass-guidelin.es
    

    View Slide

13. CSS formatting guidelines
    CSS architecture (for Drupal 8)
    CSS file organization (for Drupal 8)
    

    View Slide

14. CSS formatting guidelines
    CSS architecture (for Drupal 8)
    CSS file organization (for Drupal 8)
    

    View Slide

15. Comment 

    your code!
    https://www.flickr.com/photos/rushen/16071372313
    

    View Slide

16. Team » Communication
    

    View Slide

17. “code should be 

    self-documenting”
    

    View Slide

18. /**
    * Grid container
    * Must only contain '.cell' children.
    */
    .grid {
    height: 100%;
    font-size: 0;
    white-space: nowrap;
    }
    

    View Slide

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;
    }
    

    View Slide

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 */
    }
    

    View Slide

21. Source: Sevens’s button.css
    

    View Slide

22. “Don’t make

    me think!”
    https://www.flickr.com/photos/mugley/2594318333
    

    View Slide

23. CSS formatting guidelines
    CSS architecture (for Drupal 8)
    CSS file organization (for Drupal 8)
    

    View Slide

24. Keep specificity low!
    https://www.flickr.com/photos/freetheimage/14741164059
    

    View Slide

25. Component
    

    View Slide

26. Component
    Atom, Molecule…
    Atomic Design
    Module
    SMACSS
    Object
    OOCSS
    Block
    BEM
    

    View Slide

27. BEM
    

    View Slide

28. Block
    Element
    Modifier
    

    View Slide

29. 
    
    
    
    
    
    
    
    
    
    John Albin: Managing complex projects with design components
    Block
    

    View Slide

30. 
    
    
    
    
    
    
    
    
    
    John Albin: Managing complex projects with design components
    Element
    

    View Slide

31. 
    
    
    
    
    
    
    
    
    
    John Albin: Managing complex projects with design components
    Modifier
    

    View Slide

32. „Class names should communicate
    useful information to developers.” 

    – Nicolas Gallagher
    About HTML Semantics and Front-End Architecture
    

    View Slide

33. Proposal: A Style Guide for Seven
    Progress bar component
    

    View Slide

34. CSS architecture (for Drupal 8)
    Progress bar component
    
    Uploading sunset.jpg
    
    style="width: 29%">
    
    
    Uploaded 221 of 762KB
    29%
    
    
    cancel
    
    
    

    View Slide

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 {}
    

    View Slide

36. Source: Bartik theme
    Pager in Bartik
    

    View Slide

37. Source: Bartik’s pager.css
    Pager in Bartik
    

    View Slide

38. CSS formatting guidelines
    CSS architecture (for Drupal 8)
    CSS file organization (for Drupal 8)
    

    View Slide

39. SMACSS
    See purecss.io for kind of an implementation
    

    View Slide

40. SMACSS structure
    • Base ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    }
    

    View Slide

41. SMACSS structure
    • Base
    • Layout .layout-content {}
    .col-md-6 {}
    

    View Slide

42. SMACSS structure
    • Base
    • Layout
    • Module
    

    View Slide

43. SMACSS structure
    • Base
    • Layout
    • Module
    • State
    

    View Slide

44. 
    John Albin: Managing complex projects with design components
    State
    

    View Slide

45. John Albin: Managing complex projects with design components
    .flover:hover {}
    State
    

    View Slide

46. @media "print" {
    .flover {}
    }
    John Albin: Managing complex projects with design components
    State
    

    View Slide

47. SMACSS structure
    • Base
    • Layout
    • Module
    • State
    • Theme
    .install-page {
    background-color: #1275b2;
    …
    }
    

    View Slide

48. SMACSS-like structure
    • Base
    • Layout
    • Module
    • State
    • Theme
    

    View Slide

49. SMACSS-like structure
    • Base
    • Layout
    • Component Module
    • State
    • Theme
    

    View Slide

50. • Base
    • Layout
    • Component = Block
    • Element
    
    • Modifier
    
    • State
    
    • Theme
    John Albin: Managing complex projects with design components
    

    View Slide

51. CSS files for Drupal 8
    themes
    

    View Slide

52. • base.css
    • layout.css
    • components.css

    (components, -state, -theme)
    CSS files for Drupal 8 themes
    

    View Slide

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
    

    View Slide

54. CSS files for Drupal 8
    modules
    

    View Slide

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
    

    View Slide

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
    

    View Slide

57. CSS formatting guidelines
    CSS file organization (for Drupal 8)
    CSS architecture (for Drupal 8)
    [META] Architect our CSS – http://drupal.org/node/1921610
    

    View Slide

58. There is NO
    One Right Way!
    

    View Slide

59. Tamás Hajas
    Drupal consultant
    Integral Vision Ltd
    integralvision.hu
    about.me/tamashajas
    

    View Slide