Futureproof styling in Drupal (8) by Tams Hajas more than 200 - - PowerPoint PPT Presentation

▶
futureproof styling in drupal 8
SMART_READER_LITE
LIVE PREVIEW

Futureproof styling in Drupal (8) by Tams Hajas more than 200 - - PowerPoint PPT Presentation

Aug 14, 2022 136 likes •742 views

Futureproof styling in Drupal (8) by Tams Hajas more than 200 .css files in Drupal 8 (currently) There is NO One Right Way! There is NO One Right Way! Tams Hajas Drupal Consultant Integral Vision Kft You always work in

slide-1
SLIDE 1

Futureproof styling 
 in Drupal (8)

by Tamás Hajas

slide-2
SLIDE 2

more than 


200


.css files in Drupal 8 (currently)

slide-3
SLIDE 3

There is NO One Right Way!

slide-4
SLIDE 4

There is NO One Right Way!

slide-5
SLIDE 5

Tamás Hajas

Drupal Consultant

Integral Vision Kft

slide-6
SLIDE 6
slide-7
SLIDE 7

Team

You always work 
 in a

slide-8
SLIDE 8

Team » Communication

slide-9
SLIDE 9

Coding Standards

slide-10
SLIDE 10

Drupal CSS Coding Standards

https://www.drupal.org/ node/1886770

slide-11
SLIDE 11

Harry Roberts

CSS Guidelines

http://cssguidelin.es

slide-12
SLIDE 12

Hugo Giraudel

Sass Guidelines

http://sass-guidelin.es

slide-13
SLIDE 13

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

slide-14
SLIDE 14

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

slide-15
SLIDE 15

Comment 
 your code!

https://www.flickr.com/photos/rushen/16071372313

slide-16
SLIDE 16

Team » Communication

slide-17
SLIDE 17

“code should be 
 self-documenting”

slide-18
SLIDE 18

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

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

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

slide-21
SLIDE 21

Source: Sevens’s button.css

slide-22
SLIDE 22

“Don’t make
 me think!”

https://www.flickr.com/photos/mugley/2594318333

slide-23
SLIDE 23

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

slide-24
SLIDE 24

Keep specificity low!

https://www.flickr.com/photos/freetheimage/14741164059

slide-25
SLIDE 25

Component

slide-26
SLIDE 26

Component

Atom, Molecule…

Atomic Design

Module

SMACSS

Object

OOCSS

Block

BEM

slide-27
SLIDE 27

BEM

slide-28
SLIDE 28

Block Element Modifier

slide-29
SLIDE 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

slide-30
SLIDE 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

slide-31
SLIDE 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

slide-32
SLIDE 32

„Class names should communicate useful information to developers.” 


– Nicolas Gallagher

About HTML Semantics and Front-End Architecture

slide-33
SLIDE 33

Proposal: A Style Guide for Seven

Progress bar component

slide-34
SLIDE 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>

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

slide-36
SLIDE 36

Source: Bartik theme

Pager in Bartik

slide-37
SLIDE 37

Source: Bartik’s pager.css

Pager in Bartik

slide-38
SLIDE 38

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

slide-39
SLIDE 39

SMACSS

See purecss.io for kind of an implementation

slide-40
SLIDE 40

SMACSS structure

  • Base

ul { list-style-type: none; padding: 0; margin: 0; }

slide-41
SLIDE 41

SMACSS structure

  • Base
  • Layout

.layout-content {} .col-md-6 {}

slide-42
SLIDE 42

SMACSS structure

  • Base
  • Layout
  • Module
slide-43
SLIDE 43

SMACSS structure

  • Base
  • Layout
  • Module
  • State
slide-44
SLIDE 44

<div class="flower is-pollinating">

John Albin: Managing complex projects with design components

State

slide-45
SLIDE 45

John Albin: Managing complex projects with design components

.flover:hover {} State

slide-46
SLIDE 46

@media "print" { .flover {} }

John Albin: Managing complex projects with design components

State

slide-47
SLIDE 47

SMACSS structure

  • Base
  • Layout
  • Module
  • State
  • Theme

.install-page { background-color: #1275b2; … }

slide-48
SLIDE 48

SMACSS-like structure

  • Base
  • Layout
  • Module
  • State
  • Theme
slide-49
SLIDE 49

SMACSS-like structure

  • Base
  • Layout
  • Component Module
  • State
  • Theme
slide-50
SLIDE 50
  • Base
  • Layout
  • Component = Block
  • Element
  • Modifier
  • State
  • Theme

John Albin: Managing complex projects with design components

slide-51
SLIDE 51

CSS files for Drupal 8 themes

slide-52
SLIDE 52
  • base.css
  • layout.css
  • components.css


(components, -state, -theme)

CSS files for Drupal 8 themes

slide-53
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

slide-54
SLIDE 54

CSS files for Drupal 8 modules

slide-55
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

slide-56
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

slide-57
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

slide-58
SLIDE 58

There is NO One Right Way!

slide-59
SLIDE 59

Tamás Hajas

Drupal consultant

Integral Vision Ltd integralvision.hu about.me/tamashajas