DrupalSouth 2014: Managing Complex Projects with Design Components

2,674 views
2,542 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
1 Comment
9 Likes
Statistics
Notes
No Downloads
Views
Total views
2,674
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
17
Comments
1
Likes
9
Embeds 0
No embeds

No notes for slide

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

×