Module design & UI Dev patterns

Working on medium to large scale web projects, CSS can get away from you really quickly. Without an honest methodology and process for managing your UI assets, failure is almost certain.

This presentation illustrates the failures of many cross team large scale projects. Poor reuse of CSS and HTML and the failure of the design comp process.

Discussed are techniques for using a styleguide framework, templating solutions, elemental and modulare development patterns in the UI and how they will totally save your bacon!

Transcript

1. MODULE DESIGN & UI DEV PATTERNS code from the inside out
2. OR ...
3. THE FAILURE OF THE COMP pictures are for photoshop
4. DESIGNERS & STAKEHOLDERS we’ve all had this conversation
5. We need a comp!
6. DESIGNERS SEE colors, type, icons, images, spacing, borders, gradients, etc ...
9. DEVELOPERS SEE ahhh ...
10. Where do I begin?
11. Can’t you just export HTML?
12. That Never Works!
13. OHHH, YOU NEED SPECS? sure, I have a red-line for that
16. UI DEVELOPERS ... our context is all wrong
17. Start from the upper left, right? <div id=”home- page”> that works.
18. Start from the upper left, right? <div id=”home- page”> that works. Styles are written based on placement in the view CSS too specific. Very fragile with placement Presentation classes in the markup Poor code reuse, if any at all. To much ‘copy pasta’ A major case of the div’itus Using IDs for styling to over-ride the cascade
19. BETWEEN DESIGNERS & DEVS THE COMP IS THE ONLY CONSTANT what could possibly go wrong?
20. PICTURE WORTH 1000 WORDS a comp is worth 10,000 development variations
21. ONE OF THESE THINGS ... are not like the other!
22. <div id="promoBandLeft" class="twoColumnContent leftContainer" style="height: 176px; "> ! <div id="FreeImageOfTheWeekPromo"> ! ! <h5 class="text-important freeImageTitle">Free image of the week</h5> ! ! <div id="FreeImageContainer"> ! ! ! <table width="120" cellpadding="0" cellspacing="0"> ! ! ! ! <tbody> ! ! ! ! ! <tr> ! ! ! ! ! ! <td> ! ! ! ! ! ! ! <a id="ImageLink" class="freeImage" href="/freeimageoftheweek"> ! ! ! ! ! ! ! ! <img src="|STK|60|764&amp;s=1" alt="portrait of a young woman smiling"> ! ! ! ! ! ! ! </a> ! ! ! ! ! ! </td> ! ! ! ! ! </tr> ! ! ! ! </tbody> ! ! ! </table> ! ! </div> ! ! <div id="FreeImageDetails"> ! ! ! <h6>Come back each week and stay inspired.</h6> ! ! ! <p>Stockbyte</p> ! ! ! <p>portrait of a young woman smiling</p> ! ! ! <a class="freeImage" href="/freeimageoftheweek" id="ImageIdLink">View image</a> ! ! ! <a class="button-secondary-medium freeImage" href="/FreeImage?returnUrl= %2Ffreeimageoftheweek" id="GetFreeImageButton">Get free image</a> ! ! </div> ! </div> </div> widget #1 by developer A
23. <div id="promoBandLeft" class="twoColumnContent leftContainer" style="height: 176px; "> ! <div id="FreeImageOfTheWeekPromo"> ! ! <h5 class="text-important freeImageTitle">Free image of the week</h5> ! ! <div id="FreeImageContainer"> ! ! ! <table width="120" cellpadding="0" cellspacing="0"> ! ! ! ! <tbody> ! ! ! ! ! <tr> ! ! ! ! ! ! <td> ! ! ! ! ! ! ! <a id="ImageLink" class="freeImage" href="/freeimageoftheweek"> ! ! ! ! ! ! ! ! <img src="|STK|60|764&amp;s=1" alt="portrait of a young woman smiling"> ! ! ! ! ! ! ! </a> ! ! ! ! ! ! </td> ! ! ! ! ! </tr> ! ! ! ! </tbody> ! ! ! </table> ! ! </div> ! ! <div id="FreeImageDetails"> ! ! ! <h6>Come back each week and stay inspired.</h6> ! ! ! <p>Stockbyte</p> ! ! ! <p>portrait of a young woman smiling</p> ! ! ! <a class="freeImage" href="/freeimageoftheweek" id="ImageIdLink">View image</a> ! ! ! <a class="button-secondary-medium freeImage" href="/FreeImage?returnUrl= %2Ffreeimageoftheweek" id="GetFreeImageButton">Get free image</a> ! ! </div> ! </div> </div> widget #1 by developer A
24. <div id="promoBandLeft" class="twoColumnContent leftContainer" style="height: 176px; "> ! <div id="FreeImageOfTheWeekPromo"> ! ! <h5 class="text-important freeImageTitle">Free image of the week</h5> ! ! <div id="FreeImageContainer"> ! ! ! <table width="120" cellpadding="0" cellspacing="0"> ! ! ! ! <tbody> ! ! ! ! ! <tr> ! ! ! ! ! ! <td> ! ! ! ! ! ! ! <a id="ImageLink" class="freeImage" href="/freeimageoftheweek"> ! ! ! ! ! ! ! ! <img src="|STK|60|764&amp;s=1" alt="portrait of a young woman smiling"> ! ! ! ! ! ! ! </a> ! ! ! ! ! ! </td> ! ! ! ! ! </tr> ! ! ! ! </tbody> ! ! ! </table> ! ! </div> ! ! <div id="FreeImageDetails"> ! ! ! <h6>Come back each week and stay inspired.</h6> ! ! ! <p>Stockbyte</p> ! ! ! <p>portrait of a young woman smiling</p> ! ! ! <a class="freeImage" href="/freeimageoftheweek" id="ImageIdLink">View image</a> ! ! ! <a class="button-secondary-medium freeImage" href="/FreeImage?returnUrl= %2Ffreeimageoftheweek" id="GetFreeImageButton">Get free image</a> ! ! </div> ! </div> </div> widget #1 by developer A Cause I need two classes and an ID to make a header!
25. <div id="promoBandLeft" class="twoColumnContent leftContainer" style="height: 176px; "> ! <div id="FreeImageOfTheWeekPromo"> ! ! <h5 class="text-important freeImageTitle">Free image of the week</h5> ! ! <div id="FreeImageContainer"> ! ! ! <table width="120" cellpadding="0" cellspacing="0"> ! ! ! ! <tbody> ! ! ! ! ! <tr> ! ! ! ! ! ! <td> ! ! ! ! ! ! ! <a id="ImageLink" class="freeImage" href="/freeimageoftheweek"> ! ! ! ! ! ! ! ! <img src="|STK|60|764&amp;s=1" alt="portrait of a young woman smiling"> ! ! ! ! ! ! ! </a> ! ! ! ! ! ! </td> ! ! ! ! ! </tr> ! ! ! ! </tbody> ! ! ! </table> ! ! </div> ! ! <div id="FreeImageDetails"> ! ! ! <h6>Come back each week and stay inspired.</h6> ! ! ! <p>Stockbyte</p> ! ! ! <p>portrait of a young woman smiling</p> ! ! ! <a class="freeImage" href="/freeimageoftheweek" id="ImageIdLink">View image</a> ! ! ! <a class="button-secondary-medium freeImage" href="/FreeImage?returnUrl= %2Ffreeimageoftheweek" id="GetFreeImageButton">Get free image</a> ! ! </div> ! </div> </div> widget #1 by developer A Cause I need two classes and an ID to make a header! HTML tags ... no one uses those.
26. <div id="promoBandLeft" class="twoColumnContent leftContainer" style="height: 176px; "> ! <div id="FreeImageOfTheWeekPromo"> ! ! <h5 class="text-important freeImageTitle">Free image of the week</h5> ! ! <div id="FreeImageContainer"> ! ! ! <table width="120" cellpadding="0" cellspacing="0"> ! ! ! ! <tbody> ! ! ! ! ! <tr> ! ! ! ! ! ! <td> ! ! ! ! ! ! ! <a id="ImageLink" class="freeImage" href="/freeimageoftheweek"> ! ! ! ! ! ! ! ! <img src="|STK|60|764&amp;s=1" alt="portrait of a young woman smiling"> ! ! ! ! ! ! ! </a> ! ! ! ! ! ! </td> ! ! ! ! ! </tr> ! ! ! ! </tbody> ! ! ! </table> ! ! </div> ! ! <div id="FreeImageDetails"> ! ! ! <h6>Come back each week and stay inspired.</h6> ! ! ! <p>Stockbyte</p> ! ! ! <p>portrait of a young woman smiling</p> ! ! ! <a class="freeImage" href="/freeimageoftheweek" id="ImageIdLink">View image</a> ! ! ! <a class="button-secondary-medium freeImage" href="/FreeImage?returnUrl= %2Ffreeimageoftheweek" id="GetFreeImageButton">Get free image</a> ! ! </div> ! </div> </div> widget #1 by developer A Cause I need two classes and an ID to make a header! HTML tags ... no one uses those. Is that a table? Oh no you didn’t!
27. <div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; "> ! <div id="TrialOfferPromo"> ! ! <div id="PromoHeading"> ! ! ! Special offer ! ! </div> ! ! <div> ! ! ! <div id="LeftContainer"> ! ! ! ! <div id="PromoImageContainer"> ! ! ! ! ! <img src="/images/promo/en_badge.gif" alt="10% off"> ! ! ! ! </div> ! ! ! </div> ! ! ! <div id="RightContainer"> ! ! ! ! <p id="PromoDescription"> ! ! ! ! ! Purchase a new 1-Month Subscription by June 30, 2011 and save 10%. Use promo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savings today. ! ! ! ! </p> ! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a> ! ! ! </div> ! ! </div> ! </div> </div> widget #2 by developer B
28. <div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; "> ! <div id="TrialOfferPromo"> ! ! <div id="PromoHeading"> ! ! ! Special offer ! ! </div> ! ! <div> ! ! ! <div id="LeftContainer"> ! ! ! ! <div id="PromoImageContainer"> ! ! ! ! ! <img src="/images/promo/en_badge.gif" alt="10% off"> ! ! ! ! </div> ! ! ! </div> ! ! ! <div id="RightContainer"> ! ! ! ! <p id="PromoDescription"> ! ! ! ! ! Purchase a new 1-Month Subscription by June 30, 2011 and save 10%. Use promo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savings today. ! ! ! ! </p> ! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a> ! ! ! </div> ! ! </div> ! </div> </div> widget #2 by developer B Ahhh ... this is the same
29. <div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; "> ! <div id="TrialOfferPromo"> ! ! <div id="PromoHeading"> ! ! ! Special offer ! ! </div> ! ! <div> ! ! ! <div id="LeftContainer"> ! ! ! ! <div id="PromoImageContainer"> ! ! ! ! ! <img src="/images/promo/en_badge.gif" alt="10% off"> ! ! ! ! </div> ! ! ! </div> ! ! ! <div id="RightContainer"> ! ! ! ! <p id="PromoDescription"> ! ! ! ! ! Purchase a new 1-Month Subscription by June 30, 2011 and save 10%. Use promo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savings today. ! ! ! ! </p> ! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a> ! ! ! </div> ! ! </div> ! </div> </div> widget #2 by developer B Ahhh ... this is the same This is NOT!
30. <div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; "> ! <div id="TrialOfferPromo"> ! ! <div id="PromoHeading"> ! ! ! Special offer ! ! </div> ! ! <div> ! ! ! <div id="LeftContainer"> ! ! ! ! <div id="PromoImageContainer"> ! ! ! ! ! <img src="/images/promo/en_badge.gif" alt="10% off"> ! ! ! ! </div> ! ! ! </div> ! ! ! <div id="RightContainer"> ! ! ! ! <p id="PromoDescription"> ! ! ! ! ! Purchase a new 1-Month Subscription by June 30, 2011 and save 10%. Use promo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savings today. ! ! ! ! </p> ! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a> ! ! ! </div> ! ! </div> ! </div> </div> widget #2 by developer B
31. <div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; "> ! <div id="TrialOfferPromo"> ! ! <div id="PromoHeading"> ! ! ! Special offer ! ! </div> ! ! <div> ! ! ! <div id="LeftContainer"> ! ! ! ! <div id="PromoImageContainer"> ! ! ! ! ! <img src="/images/promo/en_badge.gif" alt="10% off"> ! ! ! ! </div> ! ! ! </div> ! ! ! <div id="RightContainer"> ! ! ! ! <p id="PromoDescription"> ! ! ! ! ! Purchase a new 1-Month Subscription by June 30, 2011 and save 10%. Use promo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savings today. ! ! ! ! </p> ! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a> ! ! ! </div> ! ! </div> ! </div> </div> widget #2 by developer B IDs in two separate stylesheets, that’s better?
32. <div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; "> ! <div id="TrialOfferPromo"> ! ! <div id="PromoHeading"> ! ! ! Special offer ! ! </div> ! ! <div> ! ! ! <div id="LeftContainer"> ! ! ! ! <div id="PromoImageContainer"> ! ! ! ! ! <img src="/images/promo/en_badge.gif" alt="10% off"> ! ! ! ! </div> ! ! ! </div> ! ! ! <div id="RightContainer"> ! ! ! ! <p id="PromoDescription"> ! ! ! ! ! Purchase a new 1-Month Subscription by June 30, 2011 and save 10%. Use promo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savings today. ! ! ! ! </p> ! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a> ! ! ! </div> ! ! </div> ! </div> </div> widget #2 by developer B Let’s define a color at the <body> tag, that’s good.
33. <div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; "> ! <div id="TrialOfferPromo"> ! ! <div id="PromoHeading"> ! ! ! Special offer ! ! </div> ! ! <div> ! ! ! <div id="LeftContainer"> ! ! ! ! <div id="PromoImageContainer"> ! ! ! ! ! <img src="/images/promo/en_badge.gif" alt="10% off"> ! ! ! ! </div> ! ! ! </div> ! ! ! <div id="RightContainer"> ! ! ! ! <p id="PromoDescription"> ! ! ! ! ! Purchase a new 1-Month Subscription by June 30, 2011 and save 10%. Use promo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savings today. ! ! ! ! </p> ! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a> ! ! ! </div> ! ! </div> ! </div> </div> widget #2 by developer B Let’s define a color at the <body> tag, that’s good. But wait ... we are overriding by changing a whole widget block?
34. <div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; "> ! <div id="TrialOfferPromo"> ! ! <div id="PromoHeading"> ! ! ! Special offer ! ! </div> ! ! <div> ! ! ! <div id="LeftContainer"> ! ! ! ! <div id="PromoImageContainer"> ! ! ! ! ! <img src="/images/promo/en_badge.gif" alt="10% off"> ! ! ! ! </div> ! ! ! </div> ! ! ! <div id="RightContainer"> ! ! ! ! <p id="PromoDescription"> ! ! ! ! ! Purchase a new 1-Month Subscription by June 30, 2011 and save 10%. Use promo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savings today. ! ! ! ! </p> ! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a> ! ! ! </div> ! ! </div> ! </div> </div> widget #2 by developer B Let’s define a color at the <body> tag, that’s good. But wait ... we are overriding by changing a whole widget block? Yup ... let’s reapply that color again. USE THE POWER OF THE ID!
35. <div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; "> ! <div id="TrialOfferPromo"> ! ! <div id="PromoHeading"> ! ! ! Special offer ! ! </div> ! ! <div> ! ! ! <div id="LeftContainer"> ! ! ! ! <div id="PromoImageContainer"> ! ! ! ! ! <img src="/images/promo/en_badge.gif" alt="10% off"> ! ! ! ! </div> ! ! ! </div> ! ! ! <div id="RightContainer"> ! ! ! ! <p id="PromoDescription"> ! ! ! ! ! Purchase a new 1-Month Subscription by June 30, 2011 and save 10%. Use promo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savings today. ! ! ! ! </p> ! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a> ! ! ! </div> ! ! </div> ! </div> </div> widget #2 by developer B Let’s define a color at the <body> tag, that’s good. But wait ... we are overriding by changing a whole widget block? Yup ... let’s reapply that color again. USE THE POWER OF THE ID!
36. CAN WE DO IT BETTER?
37. CAN WE DO IT BETTER?
38. THE BEST PART IS ... you already know how to do this
39. TAKE A STEP BACK AND THINK the ‘page’ is a deprecated concept
40. FIGHT THE SMALL BATTLES the element and the module
41. What are elements? Visual elements are the basic building blocks of the UI. Well engineered individual elements reduces duplication and increases consistency.
42. What are elements? Buttons
43. What are elements? Buttons Typography
44. What are elements? Buttons Typography Color pallet
45. What are elements? Buttons Typography Color pallet standard icons
46. What are elements? Buttons Typography Color pallet standard icons borders and line widths
47. What are modules? Using the engineered visual elements, construct modules. Caveat ... modules can also be assembled of other smaller modules and UI patterns (mind blown)
48. What are modules? Header module
49. What are modules? Header module Nav module
50. What are modules? Header module Nav module Hero copy module
51. What are modules? Header module Hero module Nav module Hero copy module
52. What are modules? Header module Hero module Nav module Hero copy module Article module
53. What are modules? Header module Hero module Nav module Hero copy module Article module List module
54. OOSCSS picking up where CSS left off & where OOCSS can never go
55. These are books on Object Oriented Programming. CSS is not on one of them!
56. GREAT CONCEPT bad name • Identify reusable objects • Be semantic w/HTML • Minimize selectors • Extend your classes • ‘Style’ separate from content • ‘Content’ separate from container This is GREAT stuff
57. OBJECT ORIENTATED CSS ... shortcomings • CSS Selectors are not objects • Relies heavily on ‘presentation classes’ • Requires maintenance of DOM elements for design updates • Promotes extending in the DOM, not the CSS • Uses vanilla CSS
58. THE OOCSS PROCESS the classing of the DOM OOCSS, in short, is a process of defining standardized presentational selectors which are in turn applied to the DOM. Extensions of such selectors are then extended in the DOM for added effect. It is likely that you will see examples like what you see here. <button class="btn btn- primary btn-large"> ! <i class="icon-white icon- envelope"></i> ! Button Generator </button>
59. THE OOCSS PROCESS the classing of the DOM OOCSS, in short, is a process of defining standardized presentational selectors which are in turn applied to the DOM. Extensions of such selectors are then extended in the DOM for added effect. It is likely that you will see examples like what you see here. <button class="btn btn- primary btn-large"> ! <i class="icon-white icon- envelope"></i> ! Button Generator </button> What’s with using the <i> tag for ‘icon’ now?
60. OOCSS FRAMEWORKS attempts to automate OOCSS CSS frameworks have been using OOCSS methods since inception. Where these fail is the insane amount of CSS selectors that by default are added to the site’s CSS. From grid systems to UI elements, CSS bloat is a real issue. Ironically this bloat is what OOCSS is supposed to address.
61. OOCSS FRAMEWORKS attempts to automate OOCSS CSS frameworks have been using OOCSS methods since inception. Where these fail is the insane amount of CSS selectors that by default are added to the site’s CSS. From grid systems to UI elements, CSS bloat is a real issue. Ironically this bloat is what OOCSS is supposed to address. Twitter’s bootstrap default includes 4914 lines of CSS.
62. OOCSS FRAMEWORKS attempts to automate OOCSS CSS frameworks have been using OOCSS methods since inception. Where these fail is the insane amount of CSS selectors that by default are added to the site’s CSS. From grid systems to UI elements, CSS bloat is a real issue. Ironically this bloat is what OOCSS is supposed to address. Twitter’s bootstrap default includes 4914 lines of CSS.
63. THE CSS DREAM redesign without DOM editing Imagine a world where new design requirements are only addressed by updating CSS? Functional modules and view templates are not edited. I don’t feel OOCSS will get us there, but OOSCSS will.
64. OBJECT ORIENTATED SCSS the future of silent selectors What if we lived in a world where the ‘object’ selectors from OOCSS can be created, but never manifest themselves as CSS until they are used in semantic application? What if we could seamlessly extend selectors in our CSS and not have to touch the DOM? What if ....
65. SASS 3.2 re-writing what we can do with CSS Extending elements in vanilla CSS is hard to track. Between nested selectors and the sheer volume alone make this an arduous task. Sass gives us clarity. The ability to really define objects in our SCSS and apply them to semantic selectors within our CSS. The dream realized. // silent classes %kung { background: green; color: yellow; } %foo { background: orange; color: red; font-size: 12px; } // selectors extending silent classes .foo_one { @extend %foo; } .foo_two { @extend %foo; } // output CSS .foo_one, .foo_two { background: orange; color: red; font-size: 12px; }
66. OOSCSS a real object oriented solution
67. ELEMENTS, MODULES AND PATTERNS OH MY! how do you manage all of this?
68. THE PATTERN LIBRARY living visual document
69. ELEMENTS AND SIMPLE UI PATTERNS text, colors and buttons for example
73. ASSEMBLE THE MODULE a view is an assembly of elements and patterns
76. That looks like a module
77. Cool. Developed the module in an abstract environment.
78. Cool. Developed the module in an abstract environment. Now we can use this anywhere. All UX/UI cleanly encapsulated.
79. Cool. Developed the module in an abstract environment. Now we can use this anywhere. All UX/UI cleanly encapsulated. When developing, no elements were created. Typography and color are all inherited.
80. Cool. Developed the module in an abstract environment. Now we can use this anywhere. All UX/UI cleanly encapsulated. Follow the example HTML and you are rockin! When developing, no elements were created. Typography and color are all inherited.
81. Reference SCSS
82. Reference SCSS Use examples
83. LET’S TAKE A LOOK AT ANOTHER maybe a feature block?
84. Oh yeah, looks like another great module
85. Module in the abstract again!
86. You can even build variations on a module
87. Example module HTML
88. Example module HTML Reference SCSS
89. WHAT ABOUT COMPLEX MODULES? let’s turn this up to 11 - enter UI patterns
90. Alert element
91. Alert element Subject header element
92. Alert element Subject header element Widget header element
93. Alert element Subject header element Widget header element Form select UI Pattern
94. Alert element Subject header element Widget header element Form select UI Pattern Form text entry UI Pattern
95. Button element
96. Button element Radio button, label and text UI pattern
97. Button element Radio button, label and text UI pattern Checkbox and label elements
98. Button element Radio button, label and text UI pattern Checkbox and label elements Scroll box UI pattern
99. Button element Radio button, label and text UI pattern Checkbox and label elements Scroll box UI pattern Calendar data UI pattern
100. Button element Radio button, label and text UI pattern Checkbox and label elements Scroll box UI pattern Calendar data UI pattern Button element
101. Code examples!
102. OMG! This is an error example!
103. OMG! This is an error example! Reuse of elements and patterns with added effect
104. Wow, the markup is the same?
105. Wow, the markup is the same? Just add some ‘fail’ to the blocks and you are AWESOME!
106. WHAT ABOUT THE CODE? how do you build a styleguide?
107. INTRODUCING TOADSTOOL a modern styleguide framework (alpha release)
108. The Sass structure
109. Complex UI groupings The Sass structure
110. UI Elements and core concepts Complex UI groupings The Sass structure
111. The makeup of a Sass module
112. The view structure
113. Complex UI groupings The view structure
114. UI Elements and core concepts Complex UI groupings The view structure
115. The makeup of a markup module
116. ELEMENTS, PATTERNS AND MODULES a recipe for success
117. SUMMARY what have we learned?
118. SUMMARY what have we learned? Comps are a failed communication resource between designers and devs
119. SUMMARY what have we learned? Comps are a failed communication resource between designers and devs As devs, we need to change our contextual starting point.
120. SUMMARY what have we learned? Comps are a failed communication resource between designers and devs As devs, we need to change our contextual starting point. Without common standards; duplicated effort, wild deviations in code and inconsistencies run ramped.
121. SUMMARY what have we learned? Comps are a failed communication resource between designers and devs As devs, we need to change our contextual starting point. Without common standards; duplicated effort, wild deviations in code and inconsistencies run ramped. We can do it better!
122. SUMMARY what have we learned? Comps are a failed communication resource between designers and devs As devs, we need to change our contextual starting point. Without common standards; duplicated effort, wild deviations in code and inconsistencies run ramped. We can do it better! Embracing elements, patterns and modules makes our UI code manageable, maintainable and sustainable.
123. SUMMARY what have we learned? Comps are a failed communication resource between designers and devs As devs, we need to change our contextual starting point. Without common standards; duplicated effort, wild deviations in code and inconsistencies run ramped. We can do it better! Embracing elements, patterns and modules makes our UI code manageable, maintainable and sustainable. Vanilla CSS frameworks will cause you much pain
124. SUMMARY what have we learned? Comps are a failed communication resource between designers and devs As devs, we need to change our contextual starting point. Without common standards; duplicated effort, wild deviations in code and inconsistencies run ramped. We can do it better! Embracing elements, patterns and modules makes our UI code manageable, maintainable and sustainable. Vanilla CSS frameworks will cause you much pain Sass is re-writing the future of CSS.
125. SUMMARY what have we learned? Comps are a failed communication resource between designers and devs As devs, we need to change our contextual starting point. Without common standards; duplicated effort, wild deviations in code and inconsistencies run ramped. We can do it better! Embracing elements, patterns and modules makes our UI code manageable, maintainable and sustainable. Vanilla CSS frameworks will cause you much pain Sass is re-writing the future of CSS. OOCSS is ok, but OOSCSS is amazing!
126. QUESTIONS? you, in the front ...
127. http://speakerrate.com/speakers/15438 You don’t win anything, but it helps me to get better at this ;)
128. https://speakerdeck.com/u/anotheruiguy/p/module-design-ui-dev-patterns