STYLE GUIDE DRIVEN DEVELOPMENT: ALL HAIL THE ROBOT OVERLORDS! J O - - PowerPoint PPT Presentation

▶
style guide driven development
SMART_READER_LITE
LIVE PREVIEW

STYLE GUIDE DRIVEN DEVELOPMENT: ALL HAIL THE ROBOT OVERLORDS! J O - - PowerPoint PPT Presentation

Nov 10, 2022 364 likes •933 views

STYLE GUIDE DRIVEN DEVELOPMENT: ALL HAIL THE ROBOT OVERLORDS! J O H N A L B I N W I L K I N S S E N I O R F R O N T- E N D D E V E L O P E R P R E V I O U S N E X T @JOHNALBIN Senior Front-end Developer github.com drupal.org

slide-1
SLIDE 1

S E N I O R F R O N T- E N D D E V E L O P E R 
 P R E V I O U S N E X T

STYLE GUIDE DRIVEN DEVELOPMENT:


ALL HAIL THE ROBOT OVERLORDS!

J O H N A L B I N W I L K I N S

slide-2
SLIDE 2

@JOHNALBIN

Senior Front-end Developer

slide-3
SLIDE 3

Zen Theme Menu Block Menu Position Fences Conditional Stylesheets 404 Navigation Simple aggregation Zen Grids Chroma Normalize-scss KSS-node

github.com

/JohnAlbin

drupal.org

/u/johnalbin

slide-4
SLIDE 4

QUESTIONS?

slide-5
SLIDE 5

WHERE ARE WE HEADED?

slide-6
SLIDE 6

HERE’S A SECRET: NO ONE ELSE REALLY KNOWS WHAT THEY’RE DOING EITHER.”

“ARE YOU NEW TO FRONT-END WEB DEVELOPMENT?

– N I C O L A S G A L L A G H E R January, 2013

slide-7
SLIDE 7

FRONT-END BLOG POSTS:

Grunt/Gulp
 task runner Jenkins / CI build tools npm shrinkwrap / Bundler Web Components CSS frameworks

Bootstrap / Foundation

CSS/JS linting Yeoman / Bower scaffolding tools Behat / Selenium regression testing Vagrant Twig / Handlerbars Sass / Less Travis YSlow PageSpeed Cucumber Wraith KSS Web Starter Kit Component CSSLoad Node.js

slide-8
SLIDE 8

“Everyone is describing the one little piece they’ve created, but don’t explain (or even reference!) the larger concepts of how all of these elements link together.” — Frank Chimero,


July 2014 Designer News AMA

slide-9
SLIDE 9

TECHNOLOGY

slide-10
SLIDE 10

PROCESS

slide-11
SLIDE 11

MAKING SENSE OF FRONT-END TECH

  • 1. Front-end

performance

  • 2. Components
  • 3. Continuous

Integration

( make shit faster ) ( make shit modular ) ( automate shit )

slide-12
SLIDE 12

WATERFALL PROJECT

Start Deadline Plan Design Develop Theme

slide-13
SLIDE 13

Start Deadline Plan Design Develop Theme Today

  • WATERFALL PROJECT
slide-14
SLIDE 14

REDUCE YOUR RISK

by controlling/minimizing your risk

AGILE DEVELOPMENT

slide-15
SLIDE 15
  • Prioritizes project goals
  • Completes a set of features
  • Creates a releasable

product

Each 2-week sprint:

Feature backlog Feature #1 Feature #2 Feature #3 Feature #4 Feature #5 Feature #6 Feature #7 Feature #8 Feature #9 Feature #10

Start Deadline

Sprint Sprint Sprint Sprint Sprint Sprint Sprint

AGILE PROJECT

slide-16
SLIDE 16

AGILE + WEB = ?

slide-17
SLIDE 17
slide-18
SLIDE 18

STYLE-GUIDE-DRIVEN DEVELOPMENT

Only requirements are: Component-based design and Automated style guides

slide-19
SLIDE 19

“Component” is the same as… “Object” in OOCSS “Module” in SMACSS “Block” in BEM’s Block-Element-Modifier “Web component” in HTML

WHAT IS A DESIGN COMPONENT?

slide-20
SLIDE 20

CSS DESIGN COMPONENTS ARE:

  • Applied to a loose collection of

HTML elements

  • Repeatable


(even if never repeated)

  • Specific


Replace CSS specificity with specific names

  • Self contained


Styles do not bleed onto anything else

  • Nest-able
slide-21
SLIDE 21
slide-22
SLIDE 22
slide-23
SLIDE 23

SMACSS BEM

}

1.BASE COMPONENTS 2.LAYOUT COMPONENTS 3.COMPONENTS 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN

slide-24
SLIDE 24

3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN

.flower

slide-25
SLIDE 25

3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN

.flower_ _ petals

slide-26
SLIDE 26

.flower_ _face .flower_ _stem .flower_ _leaves

slide-27
SLIDE 27

3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN

.flower_ _ bed

slide-28
SLIDE 28

3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN

.flower--tulip

slide-29
SLIDE 29

.flower:hover

3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN

slide-30
SLIDE 30

.flower.is-pollinating

3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN

slide-31
SLIDE 31

@media (min-width: 48em) { .flower }

3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN

slide-32
SLIDE 32

3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN

@media print { .flower }

slide-33
SLIDE 33

.is-night .flower

3.1.COMPONEN T 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN

( global modifier )

slide-34
SLIDE 34

An automated style guide of .flower is available:

johnalbin.github.io/flower-power

.flower

slide-35
SLIDE 35

DON’T MAKE IT COMPLICATED

.channel-tab_ _guide_ _upcoming-video_

slide-36
SLIDE 36
slide-37
SLIDE 37

the names are user-facing Naming things is hard

if

slide-38
SLIDE 38

HOW TO NAME THINGS:

  • Spend 30 seconds to name it
  • Develop
  • Spend 5 minutes reflecting (Maybe add a TODO)
  • Commit
  • After some time, refactor
slide-39
SLIDE 39

DRUPAL 8
 CSS CODING STANDARDS

www.drupal.org/node/1886770

NAMING CONVENTION > NAMES

slide-40
SLIDE 40

All the selectors

.the%component+ .the%component%%modifier+ .the%component__an%element+ .the%component%%modifier__an%element+ .the%component.is%state+ + .the%component:hover+ + @media+all+{+.the%component+{}+}+ .the%skin+.the%component

slide-41
SLIDE 41

EASY TO FIND YOUR COMPONENTS.

  • Inspect the DOM.
  • Find the CSS class on the

component.

  • Look for a file with that

name in the components folder.

slide-42
SLIDE 42

Selector in DOM
 I couldn’t change Class name I wish
 I could use in DOM

THE “FUGLY” SELECTOR HACK

slide-43
SLIDE 43

Style guides are: documentation
 for design systems

slide-44
SLIDE 44

Style guides are AMAZING! Out-of-date style guides are USELESS!

slide-45
SLIDE 45

kss-node
 github.com/kss-node/kss-node

AUTOMATED STYLE GUIDE

slide-46
SLIDE 46

KSS: super-simple documentation

slide-47
SLIDE 47

AUTOMATED STYLE GUIDE

slide-48
SLIDE 48
  • Build CSS from Sass/LESS/etc.
  • Linting for CSS/Sass/JavaScript
  • Build Style Guide
  • Visual Regression testing
  • Live reload

TASK RUNNER?

slide-49
SLIDE 49

LIVE DEMO !!!!

slide-50
SLIDE 50

STYLE-GUIDE-DRIVEN DEVELOPMENT

Only requirements are: Component-based design and Automated style guides

slide-51
SLIDE 51

PROCESS

slide-52
SLIDE 52

PROCESS TRIFECTA!

  • Designers
  • Back-end developers
  • Front-end developers
slide-53
SLIDE 53

DECOUPLED DEVELOPMENT

“i love the style guide stuff. Means I can make things pretty!!!”

Actual back-end developer quote:

slide-54
SLIDE 54

SO MUCH WIN!

  • Designers
  • Back-end developers
  • Front-end developers
  • Clients
  • Lawyers
  • Project Managers
  • even more!
slide-55
SLIDE 55

WHAT DID YOU THINK?

EVAULATE THIS SESSION - LOSANGELES2015.DRUPAL.ORG/SCHEDULE

THANK YOU!