Module design & UI Dev patterns

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