Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Module design & UI Dev patterns

992bbe0cad45fc9f941a4717f9f01642?s=47 Dale Sande
June 14, 2012

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!

992bbe0cad45fc9f941a4717f9f01642?s=128

Dale Sande

June 14, 2012
Tweet

More Decks by Dale Sande

Other Decks in Design

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

    ...
  7. None
  8. None
  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
  14. None
  15. None
  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
  70. None
  71. None
  72. None
  73. ASSEMBLE THE MODULE a view is an assembly of elements

    and patterns
  74. None
  75. None
  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

  129. None