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.

DrupalSouth 2014: Managing Complex Projects with Design Components

3,000 views

Published on

Introduces Web Components as the future of front-end development and describes how to start using some of the concepts today using Design Components.

Published in: Technology

DrupalSouth 2014: Managing Complex Projects with Design Components

  1. 1. Managing Complex Projects with Design Components! John Albin Wilkins! @JohnAlbin! ! Senior Front-end Developer
 at Lullabot
  2. 2. John Albin Wilkins! @JohnAlbin! ! Senior Front-end Developer
 at Lullabot
  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. What is the WIFI password again? ★ Network: DrupalSouth 2014! ★ Password: anzacDrupal
  5. 5. Where are we headed? “Are you new to front-end web development? !  Here’s a secret:  no one else really knows  what they’re doing either.” — Nicolas Gallagher
  6. 6. Where are we headed? Web Components! www.w3.org/TR/components-intro/! css-tricks.com/modular-future-web-components/
  7. 7. Web Components! “Hey… Web developers really like templating systems. We should implement that natively in HTML.” www.w3.org/TR/components-intro/! css-tricks.com/modular-future-web-components/
  8. 8. Web Components! <carousel> <ohgod-ohgod-why-wont-my-client-listen-to-me-about-carousels> www.w3.org/TR/components-intro/! css-tricks.com/modular-future-web-components/
  9. 9. What can we learn
 from the future? ★ Reusable and repeatable components! ★ Self-contained design
 (included CSS only applies to its component)
  10. 10. CSS Specificity Wars
  11. 11. CSS Specificity Wars .menu .item a:link {}! .sidebar .menu .item a:link {}! .page-37 .sidebar .menu .item a:link {}
  12. 12. CSS Specificity Wars .menu .item a:link {! .sidebar & {! .page-37 & {}! }! }
  13. 13. Overly generic class names .title { } .content { }! .block .title { } .block .content { }! .node .title { } .node .content { }! .views .title { } .views .content { }
  14. 14. Seemed like a good idea at the time.
  15. 15. What are! Design Components? ★ “Component” is the same as…! ★ “Object” in OOCSS! ★ “Module” in SMACSS ! ★ “Block” in BEM’s Block-Element-Modifier! ★ “UI Pattern”
  16. 16. Design Component One class == one consistent style .navbar .watermark .button .more-link .side-nav .bio .tabs
  17. 17. Goals of! Design Components ★ Reduce specificity! ★ Reduce applicability / control the cascade! ★ Improve maintainability
  18. 18. On the meaning of semantics
  19. 19. On the meaning of semantics .omnomnomnom ! is more semantic then! ! .blaaagh
  20. 20. On the meaning of semantics Don’t name your class .blubadu-blubadu-blubadu-pphhffft
  21. 21. On the meaning of semantics ★ Content semantics
 is handled by HTML5 elements ★ Let’s make our class names use Design semantics ★ Make the class names meaningful to the developers and designers
  22. 22. File organization = first 3 SMACSS Categories
  23. 23. Simple Folder Structure
  24. 24. Easy to find your components. ★ Inspect the DOM.! ★ Find the class on the design component.! ★ Look for a file with that name in the components folder.
  25. 25. styles.scss
  26. 26. Deconstructing! a design component ★ The component ★ Sub-parts ★ Variants ★ States
  27. 27. A simple component
  28. 28. A component with sub-parts
  29. 29. A component with sub-parts
  30. 30. Component Variants .menu .item a:link {} .sidebar .menu .item a:link {} .page-37 .sidebar .menu .item a:link {}
  31. 31. Component Variants .menu__link {} .menu--sidebar__link {} .viking-ponycorn__link {}
  32. 32. A simple component and a variant (all in one file)
  33. 33. A SMACSS “state”
  34. 34. A SMACSS “state”
  35. 35. Deconstructing! a design component .the%component+ .the%component%%variant+ .the%component__sub%part+ .the%component.is%state+ + .the%component:hover+ + @media+all+{+.the%component+{}+}
  36. 36. The “fugly” selector hack
  37. 37. The “fugly” selector hack Selector in DOM
 I couldn’t change Class name I wish
 I could use in DOM
  38. 38. Thank you! Follow me on the Twitterz.! @JohnAlbin

×