DrupalSouth 2014: Managing Complex Projects with Design Components

  • View

  • Download

Embed Size (px)


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

Text of DrupalSouth 2014: Managing Complex Projects with Design Components

  • 1. Managing Complex Projects with Design Components! John Albin Wilkins! @JohnAlbin! !Senior Front-end Developer at Lullabot

2. John Albin Wilkins! @JohnAlbin! !Senior Front-end Developer at Lullabot 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. What is the WIFI password again? Network: DrupalSouth 2014! Password: anzacDrupal 5. Where are we headed? Are you new to front-endweb development? !Heres a secret: no one else really knows what theyre doing either. Nicolas Gallagher 6. Where are we headed? Web Components! www.w3.org/TR/components-intro/! css-tricks.com/modular-future-web-components/ 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. Web Components! www.w3.org/TR/components-intro/! css-tricks.com/modular-future-web-components/ 9. What can we learn from the future? Reusable and repeatable components! Self-contained design (included CSS only applies to its component) 10. CSS Specicity Wars 11. CSS Specicity Wars .menu .item a:link {}! .sidebar .menu .item a:link {}! .page-37 .sidebar .menu .item a:link {} 12. CSS Specicity Wars .menu .item a:link {! .sidebar & {! .page-37 & {}! }! } 13. Overly generic class names .title { }.content { }!.block .title { }.block .content { }!.node .title { }.node .content { }!.views .title { }.views .content { } 14. Seemed like a good idea at the time. 15. What are! Design Components? Component is the same as! Object in OOCSS! Module in SMACSS ! Block in BEMs Block-Element-Modier! UI Pattern 16. Design Component One class == one consistent style.navbar.watermark .button .more-link.side-nav .bio.tabs 17. Goals of! Design Components Reduce specicity! Reduce applicability / control the cascade! Improve maintainability 18. On the meaning of semantics 19. On the meaning of semantics .omnomnomnom !is more semantic then! !.blaaagh 20. On the meaning of semantics Dont name your class .blubadu-blubadu-blubadu-pphhffft 21. On the meaning of semantics Content semantics is handled by HTML5 elements Lets make our class names use Design semantics Make the class names meaningful to the developers and designers 22. File organization = rst 3 SMACSS Categories 23. Simple Folder Structure 24. Easy to nd your components. Inspect the DOM.! Find the class on the design component.! Look for a le with that name in the components folder. 25. styles.scss 26. Deconstructing! a design component The component Sub-parts Variants States 27. A simple component 28. A component with sub-parts 29. A component with sub-parts 30. Component Variants .menu .item a:link {} .sidebar .menu .item a:link {} .page-37 .sidebar .menu .item a:link {} 31. Component Variants .menu__link {} .menu--sidebar__link {} .viking-ponycorn__link {} 32. A simple component and a variant (all in one le) 33. A SMACSS state 34. A SMACSS state 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. The fugly selector hack 37. The fugly selector hack Selector in DOM I couldnt change Class name I wish I could use in DOM 38. Thank you! Follow me on the Twitterz.! @JohnAlbin