Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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 ROB...
@JOHNALBIN
Senior Front-end Developer
Zen Theme Menu Block
Menu Position Fences
Conditional Stylesheets
404 Navigation
Simple aggregation
Zen Grids
Chroma
Norma...
QUESTIONS?
WHERE ARE WE HEADED?
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...
FRONT-END BLOG POSTS:
Grunt/Gulp

task runner
Jenkins / CI
build tools
npm shrinkwrap / Bundler
Web Components
CSS framewo...
“Everyone is describing the one little piece
they’ve created, but don’t explain (or even
reference!) the larger concepts o...
TECHNOLOGY
PROCESS
MAKING SENSE OF FRONT-END TECH
1. Front-end
performance
2. Components
3. Continuous
Integration
( make shit faster )
( mak...
WATERFALL PROJECT
Start Deadline
Plan
Design
Develop
Theme
Start Deadline
Plan
Design
Develop
Theme
Today
WATERFALL PROJECT
REDUCE YOUR RISK
by controlling/minimizing your risk
AGILE DEVELOPMENT
• Prioritizes project goals
• Completes a set of features
• Creates a releasable
product
Each 2-week sprint:
Feature
backl...
AGILE + WEB = ?
STYLE-GUIDE-DRIVEN
DEVELOPMENT
Only requirements are:
Component-based design
and
Automated style guides
“Component” is the same as…
“Object” in OOCSS
“Module” in SMACSS
“Block” in BEM’s Block-Element-Modifier
“Web component” i...
CSS DESIGN COMPONENTS ARE:
• Applied to a loose collection of
HTML elements
• Repeatable

(even if never repeated)
• Speci...
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
3.1.COMPONENT
3.2.ELEMENT
3.3.MODIFIER
3.4.STATE
3.5.SKIN
.flower
3.1.COMPONENT
3.2.ELEMENT
3.3.MODIFIER
3.4.STATE
3.5.SKIN
.flower__petals
.flower__face .flower__stem
.flower__leaves
3.1.COMPONENT
3.2.ELEMENT
3.3.MODIFIER
3.4.STATE
3.5.SKIN
.flower__bed
3.1.COMPONENT
3.2.ELEMENT
3.3.MODIFIER
3.4.STATE
3.5.SKIN
.flower--tulip
.flower:hover
3.1.COMPONENT
3.2.ELEMENT
3.3.MODIFIER
3.4.STATE
3.5.SKIN
.flower.is-pollinating
3.1.COMPONENT
3.2.ELEMENT
3.3.MODIFIER
3.4.STATE
3.5.SKIN
@media (min-width: 48em) { .flower }
3.1.COMPONENT
3.2.ELEMENT
3.3.MODIFIER
3.4.STATE
3.5.SKIN
3.1.COMPONENT
3.2.ELEMENT
3.3.MODIFIER
3.4.STATE
3.5.SKIN
@media print { .flower }
.is-night .flower
3.1.COMPONEN
T
3.2.ELEMENT
3.3.MODIFIER
3.4.STATE
3.5.SKIN
( global modifier )
An automated
style guide of
.flower is available:
johnalbin.github.io/flower-power
.flower
DON’T MAKE IT COMPLICATED
.channel-tab__guide__upcoming-video
the names are user-facing
Naming things is hard
if
HOW TO NAME THINGS:
• Spend 30 seconds to name it
• Develop
• Spend 5 minutes reflecting (Maybe add a TODO)
• Commit
• Aft...
DRUPAL 8

CSS CODING STANDARDS
www.drupal.org/node/1886770
NAMING CONVENTION > NAMES
All the selectors
.the%component+
.the%component%%modifier+
.the%component__an%element+
.the%component%%modifier__an%eleme...
EASY TO FIND YOUR
COMPONENTS.
• Inspect the DOM.
• Find the CSS class on the
component.
• Look for a file with that
name i...
Selector in DOM

I couldn’t change
Class name I wish

I could use in DOM
THE “FUGLY” SELECTOR HACK
Style guides are:
documentation

for design systems
Style guides are AMAZING!
Out-of-date style guides are
USELESS!
kss-node

github.com/kss-node/kss-node
AUTOMATED STYLE GUIDE
KSS: super-simple documentation
AUTOMATED STYLE GUIDE
• Build CSS from Sass/LESS/etc.
• Linting for CSS/Sass/JavaScript
• Build Style Guide
• Visual Regression testing
• Live r...
LIVE DEMO !!!!
STYLE-GUIDE-DRIVEN
DEVELOPMENT
Only requirements are:
Component-based design
and
Automated style guides
PROCESS
PROCESS TRIFECTA!
• Designers
• Back-end developers
• Front-end developers
DECOUPLED DEVELOPMENT
“i love the style guide stuff.
Means I can make things pretty!!!”
Actual back-end developer quote:
SO MUCH WIN!
• Designers
• Back-end developers
• Front-end developers
• Clients
• Lawyers
• Project Managers
• even more!
WHAT DID YOU THINK?
EVAULATE THIS SESSION - LOSANGELES2015.DRUPAL.ORG/SCHEDULE
THANK YOU!
Style Guide Driven Development: All Hail the Robot Overlords!
Style Guide Driven Development: All Hail the Robot Overlords!
Style Guide Driven Development: All Hail the Robot Overlords!
Style Guide Driven Development: All Hail the Robot Overlords!
Nächste SlideShare
Wird geladen in …5
×

Style Guide Driven Development: All Hail the Robot Overlords!

758 Aufrufe

Veröffentlicht am

Slides from my Drupalcon 2015 presentation in Los Angeles.

Veröffentlicht in: Technologie
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1url.pw/M3qBI ◀ ◀ ◀ ◀
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Style Guide Driven Development: All Hail the Robot Overlords!

  1. 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
  2. 2. @JOHNALBIN Senior Front-end Developer
  3. 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
  4. 4. QUESTIONS?
  5. 5. WHERE ARE WE HEADED?
  6. 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
  7. 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 WraithKSS Web Starter Kit Component CSSLoad Node.js
  8. 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
  9. 9. TECHNOLOGY
  10. 10. PROCESS
  11. 11. MAKING SENSE OF FRONT-END TECH 1. Front-end performance 2. Components 3. Continuous Integration ( make shit faster ) ( make shit modular ) ( automate shit )
  12. 12. WATERFALL PROJECT Start Deadline Plan Design Develop Theme
  13. 13. Start Deadline Plan Design Develop Theme Today WATERFALL PROJECT
  14. 14. REDUCE YOUR RISK by controlling/minimizing your risk AGILE DEVELOPMENT
  15. 15. • Prioritizes project goals • Completes a set of features • Creates a releasable product Each 2-week sprint: Feature backlogFeature #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
  16. 16. AGILE + WEB = ?
  17. 17. STYLE-GUIDE-DRIVEN DEVELOPMENT Only requirements are: Component-based design and Automated style guides
  18. 18. “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?
  19. 19. 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
  20. 20. 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
  21. 21. 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN .flower
  22. 22. 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN .flower__petals
  23. 23. .flower__face .flower__stem .flower__leaves
  24. 24. 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN .flower__bed
  25. 25. 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN .flower--tulip
  26. 26. .flower:hover 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN
  27. 27. .flower.is-pollinating 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN
  28. 28. @media (min-width: 48em) { .flower } 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN
  29. 29. 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN @media print { .flower }
  30. 30. .is-night .flower 3.1.COMPONEN T 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN ( global modifier )
  31. 31. An automated style guide of .flower is available: johnalbin.github.io/flower-power .flower
  32. 32. DON’T MAKE IT COMPLICATED .channel-tab__guide__upcoming-video
  33. 33. the names are user-facing Naming things is hard if
  34. 34. HOW TO NAME THINGS: • Spend 30 seconds to name it • Develop • Spend 5 minutes reflecting (Maybe add a TODO) • Commit • After some time, refactor
  35. 35. DRUPAL 8
 CSS CODING STANDARDS www.drupal.org/node/1886770 NAMING CONVENTION > NAMES
  36. 36. 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
  37. 37. 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.
  38. 38. Selector in DOM
 I couldn’t change Class name I wish
 I could use in DOM THE “FUGLY” SELECTOR HACK
  39. 39. Style guides are: documentation
 for design systems
  40. 40. Style guides are AMAZING! Out-of-date style guides are USELESS!
  41. 41. kss-node
 github.com/kss-node/kss-node AUTOMATED STYLE GUIDE
  42. 42. KSS: super-simple documentation
  43. 43. AUTOMATED STYLE GUIDE
  44. 44. • Build CSS from Sass/LESS/etc. • Linting for CSS/Sass/JavaScript • Build Style Guide • Visual Regression testing • Live reload TASK RUNNER?
  45. 45. LIVE DEMO !!!!
  46. 46. STYLE-GUIDE-DRIVEN DEVELOPMENT Only requirements are: Component-based design and Automated style guides
  47. 47. PROCESS
  48. 48. PROCESS TRIFECTA! • Designers • Back-end developers • Front-end developers
  49. 49. DECOUPLED DEVELOPMENT “i love the style guide stuff. Means I can make things pretty!!!” Actual back-end developer quote:
  50. 50. SO MUCH WIN! • Designers • Back-end developers • Front-end developers • Clients • Lawyers • Project Managers • even more!
  51. 51. WHAT DID YOU THINK? EVAULATE THIS SESSION - LOSANGELES2015.DRUPAL.ORG/SCHEDULE THANK YOU!

×