Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Styleguide-Driven Development: The New Web Development

2,837 views

Published on

The session was originally titled "Managing Complex Projects with Design Components”, but the training I took to become a certified ScrumMaster blew my mind.

Integrating agile development with web development is actually very simple. It's called Styleguide-Driven Development.

In this session, we will discuss the two requirements for Style Guide Driven Development: component-based design and automated style guides.

Published in: Software, Technology
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1url.pw/Yj1oQ ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I would never forgive myself it i didn't give you one last opportunity to try the incredible Halki Diabetes Remedy for yourself! ♥♥♥ https://tinyurl.com/y2956vb5
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I've just forwarded you an email I received from Bet365 moments ago saying they're limiting my♥♥♥ https://tinyurl.com/awesomebet
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Could you use an extra $1750 a week? I'm guessing you could right? If you would like to see how you could make this type of money, right from the comfort of your own home, you absolutely need to check out this short free video. ▲▲▲ http://t.cn/AisJWUCf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Positions Available Now! We currently have several openings for social media workers.  http://t.cn/AieXiXbg
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Styleguide-Driven Development: The New Web Development

  1. 1. MANAGING COMPLEX PROJECTS WITH DESIGN COMPONENTS J O H N A L B I N W I L K I N S F R O N T - E N D T R A C K — O C T O B E R 1 , 2 0 1 4
  2. 2. @JOHNALBIN Senior Front-end Developer
  3. 3. FREE GIFTS FROM ME Zen Grids zengrids.com ! Normalize.css for Sass/Compass github.com/JohnAlbin/normalize-scss Succinct theme for Colloquy (IRC for Mac) github.com/JohnAlbin/succinct-for-colloquy git-svn-migrate john.albin.net/git/git-svn-migrate Zen theme for Drupal drupal.org/project/zen
  4. 4. TRIGGER ALERT This session will mention the word: AGILE
  5. 5. WHERE ARE WE HEADED?
  6. 6. “ARE YOU NEW TO FRONT-END WEB DEVELOPMENT? HERE’S A SECRET: NO ONE ELSE REALLY KNOWS WHAT THEY’RE DOING EITHER.” – N I C O L A S G A L L AG H E R January, 2013
  7. 7. WHAT THE HELL IS GOING ON? Process Technology
  8. 8. IS THERE A BIGGER PICTURE? Vagrant Twig / Handlerbars 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 Sass / Less
  9. 9. IS THERE A BIGGER PICTURE? Vagrant Twig / Handlerbars Grunt/Gulp task runner Component Jenkins / CI build tools npm shrinkwrap / Bundler Travis Web Components CSS frameworks Bootstrap / Foundation CSS/JS linting Yeoman / Bower! scaffolding tools Behat / Selenium regression testing Sass / Less YSlow PageSpeed Cucumber KSS Wraith Web Starter Kit CSSLoad Node.js
  10. 10. IS THERE A BIGGER PICTURE? Continuous Integration Component Library
  11. 11. IS THERE A BIGGER PICTURE? Continuous Integration Component Library are documented by! style guides Agile Development! requires
  12. 12. WATERFALL PROJECT Plan Design Develop Theme Start Deadline
  13. 13. WATERFALL PROJECT Plan : Design : Develop : Theme Today : Start Deadline
  14. 14. Agile development
  15. 15. Reduce your risk by controlling/minimizing your risk
  16. 16. AGILE PROJECT 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
  17. 17. AGILE PROJECT Each 2-week sprint: • Prioritizes project goals • Completes a set of features • Creates a releasable product 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
  18. 18. AGILE + WEB = ? Component-based design + Automated style guides
  19. 19. STYLEGUIDE-DRIVEN DEVELOPMENT: THE NEW WEB DEVELOPMENT J O H N A L B I N W I L K I N S F R O N T - E N D T R A C K — O C T O B E R 1 , 2 0 1 4
  20. 20. STYLE GUIDE DRIVEN DEVELOPMENT Only requirements are: Component-based design and Automated style guides
  21. 21. What are we doing wrong?
  22. 22. CSS SPECIFICITY WARS
  23. 23. CSS SPECIFICITY WARS .menu .item a:link {}! .sidebar .menu .item a:link {}! .page-37 .sidebar .menu .item a:link {}
  24. 24. CSS SPECIFICITY WARS .menu .item a:link {! .sidebar & {! .page-37 & {}! }! }
  25. 25. OVERLY GENERIC CLASS NAMES .title&{&} .block&.title&{&} .node&.title&{&} .views&.title&{&} .content&{&} .block&.content&{&} .node&.content&{&} .views&.content&{&}
  26. 26. SEEMED LIKE A GOOD IDEA AT THE TIME
  27. 27. WHAT IS A DESIGN COMPONENT? “Component” is the same as… ⨯ “Object” in OOCSS ⨯ “Module” in SMACSS ⨯ “Block” in BEM’s Block-Element-Modifier ⨯ “UI Pattern”
  28. 28. CSS DESI GN 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
  29. 29. SMACSS 1.BASE 2.LAYOUT 3.MODULE 4.STATE 5.THEME
  30. 30. SMACSS 1.BASE 2.LAYOUT 3.COMPONENTS 4.STATE 5.SKIN 1.BASE 2.LAYOUT 3.MODULE 4.STATE 5.THEME
  31. 31. SMACSS 1.BASE 2.LAYOUT 3.COMPONENTS 4.STATE 5.SKIN
  32. 32. SMACSS 1.BASE 2.LAYOUT 3.COMPONENTS 3.1.STATE 3.2.SKIN
  33. 33. SMACSS BEM } 1.BASE 2.LAYOUT 3.COMPONENTS 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN
  34. 34. “You see, radio is a kind of a very, very long . cat.
  35. 35. You pull his tail in New York and his head is meowing in Los Angeles.
  36. 36. Do you understand this? You send signals here, they receive them there. The only difference is that…
  37. 37. …there is no cat.” — Albert Einstein
  38. 38. .flower ! 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFI ER 3.4.STATE 3.5.SKIN
  39. 39. .flower_ _ petals ! 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFI ER 3.4.STATE 3.5.SKIN
  40. 40. .flower_ _face .flower_ _stem .flower_ _leaves
  41. 41. .flower_ _ bed ! 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFI ER 3.4.STATE 3.5.SKIN
  42. 42. .flower--tulip ! 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFI ER 3.4.STATE 3.5.SKIN
  43. 43. Don’t make it complicated .channel-tab_ _guide_ _upcoming-
  44. 44. Don’t make it complicated guide_ _upcoming-video_ _info_ _time
  45. 45. On semantic naming ⨯ Content semantics are handled by HTML5 elements ⨯ Let’s make our class names use Design semantics ⨯ Class names should be meaningful to developers and designers
  46. 46. .flower:hover ! 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN
  47. 47. .flower.is-pollinating ! 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN
  48. 48. @media (min-width: 48em) { .flower } ! 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN
  49. 49. @media print { .flower } ! 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN
  50. 50. .is-night .flower ! 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN ( global modfier )
  51. 51. .flower An automated style guide of .flower is available: ! johnalbin.github.io/flower-power
  52. 52. All the selectors .the3component& .the3component33modifier& .the3component__an3element& .the3component33modifier__an3element& .the3component.is3state& & .the3component:hover& & @media&all&{&.the3component&{}&}& .the3skin&.the3component
  53. 53. CSS DESI GN 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
  54. 54. SMACSS BEM } 1.BASE 2.LAYOUT 3.COMPONENTS 3.1.COMPONENT 3.2.ELEMENT 3.3.MODIFIER 3.4.STATE 3.5.SKIN
  55. 55. Drupal 8 CSS coding standards www.drupal.org/node/1886770
  56. 56. FILE ORGANIZATION = 3 SMACSS CATEGORIES
  57. 57. SIMPLE SASS SETUP
  58. 58. STYLES.SCSS
  59. 59. SIMPLE FOLDER STRUCTURE
  60. 60. 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.
  61. 61. THE “Fugly” SELECTOR HACK
  62. 62. THE “Fugly” SELECTOR HACK Selector in DOM I couldn’t change Class name I wish I could use in DOM
  63. 63. AUTOMATED STYLE GUIDE kss-node github.com/kss-node/kss-node
  64. 64. AUTOMATED STYLE GUIDE
  65. 65. WHAT DID YOU THINK? E V A U L A T E T H I S S E S S I O N - A M S T E R D A M 2 0 1 4 . D R U P A L . O R G / S C H E D U L E THANK YO U!

×