MODULE DESIGN &UI DEV PATTERNS  code from the inside out
OR...
THE FAILURE OF THE COMP     pictures are for photoshop
DESIGNERS & STAKEHOLDERS      we’ve all had this conversation
Weneed acomp!
DESIGNERS SEEcolors, type, icons, images, spacing, borders, gradients, etc ...
DEVELOPERS SEE     ahhh ...
Where do Ibegin?
youC an’t ort    expjust ML?   HT
T hat    verNe s!W  ork
OHHH, YOU NEED SPECS?    sure, I have a red-line for that
UI DEVELOPERS ...   our context is all wrong
Start fr          om theupper l        eft, righ<div id=          t?         ”h o m e - page”>           that    works.
Using IDs for styling to                                                over-ride the cascadePoor code reuse, if any atall...
BETWEEN DESIGNERS &  DEVS THE COMP IS THE ONLY CONSTANT   what could possibly go wrong?
PICTURE WORTH      1000 WORDSa comp is worth 10,000 development variations
ONE OF THESE THINGS ...      are not like the other!
widget #1 by developer A<div id="promoBandLeft" class="twoColumnContent leftContainer" style="height: 176px; ">! <div id="...
widget #1 by developer A<div id="promoBandLeft" class="twoColumnContent leftContainer" style="height: 176px; ">! <div id="...
widget #1 by developer A<div id="promoBandLeft" class="twoColumnContent leftContainer" style="height: 176px; ">! <div id="...
widget #1 by developer A<div id="promoBandLeft" class="twoColumnContent leftContainer" style="height: 176px; ">! <div id="...
widget #1 by developer A   Is that a <div id="promoBandLeft" class="twoColumnContent leftContainer" style="height: 176px; ...
widget #2 by developer B<div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; ">! <div id...
widget #2 by developer B                                                                                   Ahhh ...       ...
widget #2 by developer B                                                                                   Ahhh ...       ...
widget #2 by developer B<div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; ">! <div id...
widget #2 by developer B<div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; ">! <div id...
widget #2 by developer B<div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; ">! <div id...
widget #2 by developer B<div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; ">! <div id...
widget #2 by developer B                                         Yup ... let’s                                            ...
widget #2 by developer B                                         Yup ... let’s                                            ...
CAN WE DO IT BETTER?
CAN WE DO IT BETTER?
THE BEST PART IS ...  you already know how to do this
TAKE A STEP BACK AND THINK      the ‘page’ is a deprecated concept
FIGHT THE SMALL BATTLES     the element and the module
Visual elements are the basic  building blocks of the UI. Well engineered individualelements reduces duplication  and incr...
Buttons                           ents?           hat   ar e elem          W
Buttons                              Typography                           ents?           hat   ar e elem          W
Buttons                                     TypographyColor pallet                                  ents?                 ...
Buttonsstandard   icons                                        Typography           Color pallet                          ...
Buttons           borders and           line widthsstandard   icons                                                      T...
Using the engineered visualelements, construct modules.Caveat ... modules can also be assembled of other smaller  modules ...
Headermodule                 e mo dules?         What ar
Headermodule                               Nav module                 e mo dules?         What ar
Headermodule                               Nav module                               Hero copy                             ...
Header              module                                             Nav moduleHero module                              ...
Header                  module                                                     Nav moduleHero module                  ...
Header                  module                                                     Nav moduleHero module                  ...
OOSCSS picking up where CSS left off& where OOCSS can never go
These are books on Object Oriented Programming.CSS is not on one of them!
GREAT CONCEPT                                bad name• Identify   reusable objects     This is• Be   semantic w/HTML      ...
OBJECT ORIENTATED CSS                          ... shortcomings• CSS    Selectors are not objects• Reliesheavily on ‘prese...
THE OOCSS PROCESS                  the classing of the DOMOOCSS, in short, is a process of                                ...
THE OOCSS PROCESS                  the classing of the DOMOOCSS, in short, is a process of                                ...
OOCSS FRAMEWORKS                attempts to automate OOCSSCSS frameworks have been usingOOCSS methods since inception.Wher...
OOCSS FRAMEWORKS                attempts to automate OOCSSCSS frameworks have been usingOOCSS methods since inception.Wher...
OOCSS FRAMEWORKS                attempts to automate OOCSSCSS frameworks have been usingOOCSS methods since inception.Wher...
THE CSS DREAM               redesign without DOM editingImagine a world where new designrequirements are only addressedby ...
OBJECT ORIENTATED SCSS                the future of silent selectorsWhat if we lived in a world wherethe ‘object’ selector...
SASS 3.2              re-writing what we can do with CSSExtending elements in vanilla CSS       // silent classesis hard t...
OOSCSSa real object oriented solution
ELEMENTS, MODULES AND   PATTERNS OH MY!    how do you manage all of this?
THE PATTERN LIBRARY     living visual document
ELEMENTS AND SIMPLE UI      PATTERNS   text, colors and buttons for example
ASSEMBLE THE MODULEa view is an assembly of elements and patterns
That looks like a    module
Cool. Developed themodule in an abstract   environment.
Cool. Developed themodule in an abstract   environment.          Now we can use this          anywhere. All UX/UI         ...
Cool. Developed the      module in an abstract         environment.                Now we can use this                anyw...
Cool. Developed the      module in an abstract         environment.                Now we can use this                anyw...
Reference SCSS
Reference SCSSUse examples
LET’S TAKE A LOOK AT      ANOTHER     maybe a feature block?
Oh yeah, looks likeanother great module
Module in theabstract again!
You can evenbuild variations on     a module
Example module HTML
Example module HTML   Reference SCSS
WHAT ABOUT COMPLEX    MODULES? let’s turn this up to 11 - enter UI patterns
Alert element
Alert elementSubject header   element
Alert element                Subject header                   elementWidget header  element
Alert element                Subject header                   elementWidget header  element                               ...
Alert element                  Subject header                     elementWidget header  element                           ...
Button element
Radio button, labeland text UI pattern                      Button element
Radio button, labeland text UI pattern              Checkbox and label                  elements                          ...
Radio button, labeland text UI pattern                      Scroll box UI pattern              Checkbox and label         ...
Radio button, labeland text UI pattern                       Scroll box UI pattern              Checkbox and label        ...
Radio button, labeland text UI pattern                       Scroll box UI pattern              Checkbox and label        ...
Code examples!
OMG! This is anerror example!
OMG! This is an                error example!   Reuse ofelements andpatterns withadded effect
Wow, themarkup is the   same?
Wow, the                       markup is the                          same?  Just add some‘fail’ to the blocks    and you ...
WHAT ABOUT THE CODE?    how do you build a styleguide?
INTRODUCING TOADSTOOL    a modern styleguide framework           (alpha release)
The Sassstructure
The Sassstructure            Complex UI             groupings
The Sassstructure            Complex UI             groupings             UI Elements and              core concepts
The makeup of a  Sass module
The viewstructure
The viewstructure            Complex UI             groupings
The viewstructure            Complex UI             groupings             UI Elements and              core concepts
The makeup of amarkup module
ELEMENTS, PATTERNS AND       MODULES       a recipe for success
SUMMARYwhat have we learned?
Comps are a failed communication resourcebetween designers and devs                      SUMMARY                      what...
Comps are a failed communication resourcebetween designers and devs                                  As devs, we need to  ...
Comps are a failed communication resourcebetween designers and devs                                        As devs, we nee...
We can do it    Comps are a failed communication resource             better!between designers and devs                   ...
We can do it    Comps are a failed communication resource             better!between designers and devs                   ...
We can do it    Comps are a failed communication resource              better!between designers and devs                  ...
We can do it    Comps are a failed communication resource              better!between designers and devs                  ...
We can do it    Comps are a failed communication resource              better!between designers and devs                  ...
QUESTIONS? you, in the front ...
http://speakerrate.com/speakers/15438                          anythi  ng, but        You do   n’t win              this ;...
https://speakerdeck.com/u/anotheruiguy/p/module-design-ui-dev-patterns
Module design & UI Dev patterns
Module design & UI Dev patterns
Module design & UI Dev patterns
Module design & UI Dev patterns
Module design & UI Dev patterns
Module design & UI Dev patterns
Module design & UI Dev patterns
Module design & UI Dev patterns
Module design & UI Dev patterns
Module design & UI Dev patterns
Upcoming SlideShare
Loading in …5
×

Module design & UI Dev patterns

1,350 views

Published on

code your UI from the inside out

Published in: Design, Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,350
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Module design & UI Dev patterns

  1. 1. MODULE DESIGN &UI DEV PATTERNS code from the inside out
  2. 2. OR...
  3. 3. THE FAILURE OF THE COMP pictures are for photoshop
  4. 4. DESIGNERS & STAKEHOLDERS we’ve all had this conversation
  5. 5. Weneed acomp!
  6. 6. DESIGNERS SEEcolors, type, icons, images, spacing, borders, gradients, etc ...
  7. 7. DEVELOPERS SEE ahhh ...
  8. 8. Where do Ibegin?
  9. 9. youC an’t ort expjust ML? HT
  10. 10. T hat verNe s!W ork
  11. 11. OHHH, YOU NEED SPECS? sure, I have a red-line for that
  12. 12. UI DEVELOPERS ... our context is all wrong
  13. 13. Start fr om theupper l eft, righ<div id= t? ”h o m e - page”> that works.
  14. 14. Using IDs for styling to over-ride the cascadePoor code reuse, if any atall. To much ‘copy pasta’ Styles are written based on placement Start fr in the view om the upper l eft, righ A major case of <div id= t? the div’itus ”h o m e - page”> classesthat Presentation in the CSS too specific. Very works. markup fragile with placement
  15. 15. BETWEEN DESIGNERS & DEVS THE COMP IS THE ONLY CONSTANT what could possibly go wrong?
  16. 16. PICTURE WORTH 1000 WORDSa comp is worth 10,000 development variations
  17. 17. ONE OF THESE THINGS ... are not like the other!
  18. 18. widget #1 by developer A<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>
  19. 19. widget #1 by developer A<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>
  20. 20. widget #1 by developer A<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> Cause I! ! </div>! ! <div id="FreeImageDetails">two need! ! ! classes and an <h6>Come back each week and stay inspired.</h6>! ! ! ID to make a <p>Stockbyte</p>! ! ! header! <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>
  21. 21. widget #1 by developer A<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> HTML tags ...! ! ! ! </tbody> no one uses! ! ! </table> Cause I those.! ! </div>! ! <div id="FreeImageDetails">two need! ! ! classes and an <h6>Come back each week and stay inspired.</h6>! ! ! ID to make a <p>Stockbyte</p>! ! ! header! <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>
  22. 22. widget #1 by developer A Is that a <div id="promoBandLeft" class="twoColumnContent leftContainer" style="height: 176px; ">table? Oh no ! <div id="FreeImageOfTheWeekPromo"> you didn’t! ! ! <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> HTML tags ... ! ! ! ! </tbody> no one uses ! ! ! </table> Cause I those. ! ! </div> ! ! <div id="FreeImageDetails">two need ! ! ! classes and an <h6>Come back each week and stay inspired.</h6> ! ! ! ID to make a <p>Stockbyte</p> ! ! ! header! <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>
  23. 23. widget #2 by developer B<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%. Usepromo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savingstoday.! ! ! ! </p>! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a>! ! ! </div>! ! </div>! </div></div>
  24. 24. widget #2 by developer B Ahhh ... this is the same<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%. Usepromo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savingstoday.! ! ! ! </p>! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a>! ! ! </div>! ! </div>! </div></div>
  25. 25. widget #2 by developer B Ahhh ... this is the same<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">! ! !! ! !! ! ! ! ! ! </div> </div> This is <img src="/images/promo/en_badge.gif" alt="10% off">! ! !! ! ! ! NOT! <div id="RightContainer"> <p id="PromoDescription">! ! ! ! ! Purchase a new 1-Month Subscription by June 30, 2011 and save 10%. Usepromo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savingstoday.! ! ! ! </p>! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a>! ! ! </div>! ! </div>! </div></div>
  26. 26. widget #2 by developer B<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%. Usepromo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savingstoday.! ! ! ! </p>! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a>! ! ! </div>! ! </div>! </div></div>
  27. 27. widget #2 by developer B<div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; ">! <div id="TrialOfferPromo">! ! <div id="PromoHeading">! ! ! Special offer! ! </div>! ! <div>! ! ! <div id="LeftContainer"> IDs in two! ! ! ! <div id="PromoImageContainer">! ! ! ! ! separate <img src="/images/promo/en_badge.gif" alt="10% off">! ! ! ! </div> stylesheets,! ! ! </div> that’s better?! ! ! <div id="RightContainer">! ! ! ! <p id="PromoDescription">! ! ! ! ! Purchase a new 1-Month Subscription by June 30, 2011 and save 10%. Usepromo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savingstoday.! ! ! ! </p>! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a>! ! ! </div>! ! </div>! </div></div>
  28. 28. widget #2 by developer B<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%. Usepromo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savingstoday.! ! ! ! </p>! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a> Let’s! ! ! </div> define a color! ! </div>! </div> at the <body></div> tag, that’s good.
  29. 29. widget #2 by developer B<div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; ">! <div id="TrialOfferPromo">! ! <div id="PromoHeading">! ! ! Special offer But! ! </div> wait ... we! ! <div>! ! ! <div id="LeftContainer"> are overriding! ! ! ! <div id="PromoImageContainer"> changing a by! ! ! ! ! whole widget <img src="/images/promo/en_badge.gif" alt="10% off">! ! ! ! </div> block?! ! ! </div>! ! ! <div id="RightContainer">! ! ! ! <p id="PromoDescription">! ! ! ! ! Purchase a new 1-Month Subscription by June 30, 2011 and save 10%. Usepromo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savingstoday.! ! ! ! </p>! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a> Let’s! ! ! </div> define a color! ! </div>! </div> at the <body></div> tag, that’s good.
  30. 30. widget #2 by developer B Yup ... let’s reapply that color again. USE THE POWER<div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; ">! <div id="TrialOfferPromo"> OF THE ID!! ! <div id="PromoHeading">! ! ! Special offer But! ! </div> wait ... we! ! <div>! ! ! <div id="LeftContainer"> are overriding! ! ! ! <div id="PromoImageContainer"> changing a by! ! ! ! ! whole widget <img src="/images/promo/en_badge.gif" alt="10% off">! ! ! ! </div> block?! ! ! </div>! ! ! <div id="RightContainer">! ! ! ! <p id="PromoDescription">! ! ! ! ! Purchase a new 1-Month Subscription by June 30, 2011 and save 10%. Usepromo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savingstoday.! ! ! ! </p>! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a> Let’s! ! ! </div> define a color! ! </div>! </div> at the <body></div> tag, that’s good.
  31. 31. widget #2 by developer B Yup ... let’s reapply that color again. USE THE POWER<div id="promoBandRight" class="twoColumnContent rightContainer" style="height: 176px; ">! <div id="TrialOfferPromo"> OF THE ID!! ! <div id="PromoHeading">! ! ! Special offer But! ! </div> wait ... we! ! <div>! ! ! <div id="LeftContainer"> are overriding! ! ! ! <div id="PromoImageContainer"> changing a by! ! ! ! ! whole widget <img src="/images/promo/en_badge.gif" alt="10% off">! ! ! ! </div> block?! ! ! </div>! ! ! <div id="RightContainer">! ! ! ! <p id="PromoDescription">! ! ! ! ! Purchase a new 1-Month Subscription by June 30, 2011 and save 10%. Usepromo code <span class="important">ZP3PC46N</span> during checkout to enjoy your savingstoday.! ! ! ! </p>! ! ! ! <a href="/promo2/usa" class="promoLink"> Get the details</a> Let’s! ! ! </div> define a color! ! </div>! </div> at the <body></div> tag, that’s good.
  32. 32. CAN WE DO IT BETTER?
  33. 33. CAN WE DO IT BETTER?
  34. 34. THE BEST PART IS ... you already know how to do this
  35. 35. TAKE A STEP BACK AND THINK the ‘page’ is a deprecated concept
  36. 36. FIGHT THE SMALL BATTLES the element and the module
  37. 37. Visual elements are the basic building blocks of the UI. Well engineered individualelements reduces duplication and increases consistency. ents? hat ar e elem W
  38. 38. Buttons ents? hat ar e elem W
  39. 39. Buttons Typography ents? hat ar e elem W
  40. 40. Buttons TypographyColor pallet ents? hat ar e elem W
  41. 41. Buttonsstandard icons Typography Color pallet ents? hat ar e elem W
  42. 42. Buttons borders and line widthsstandard icons Typography Color pallet ents? hat ar e elem W
  43. 43. Using the engineered visualelements, construct modules.Caveat ... modules can also be assembled of other smaller modules and UI patterns (mind blown) e mo dules? What ar
  44. 44. Headermodule e mo dules? What ar
  45. 45. Headermodule Nav module e mo dules? What ar
  46. 46. Headermodule Nav module Hero copy module e mo dules? What ar
  47. 47. Header module Nav moduleHero module Hero copy module e mo dules? What ar
  48. 48. Header module Nav moduleHero module Hero copy Article module module e mo dules? What ar
  49. 49. Header module Nav moduleHero module Hero copy Article module module List module e mo dules? What ar
  50. 50. OOSCSS picking up where CSS left off& where OOCSS can never go
  51. 51. These are books on Object Oriented Programming.CSS is not on one of them!
  52. 52. GREAT CONCEPT bad name• Identify reusable objects This is• Be semantic w/HTML GREAT• Minimize selectors stuff• Extend your classes• ‘Style’ separate from content• ‘Content’ separate from container
  53. 53. OBJECT ORIENTATED CSS ... shortcomings• CSS Selectors are not objects• Reliesheavily on ‘presentation classes’• Requiresmaintenance of DOM elements for design updates• Promotes extending in the DOM, not the CSS• Uses vanilla CSS
  54. 54. THE OOCSS PROCESS the classing of the DOMOOCSS, in short, is a process of <button class="btn btn-defining standardized primary btn-large">presentational selectors which are ! <i class="icon-white icon-in turn applied to the DOM. envelope"></i> ! Button Generator </button>Extensions of such selectors arethen extended in the DOM foradded effect.It is likely that you will seeexamples like what you see here.
  55. 55. THE OOCSS PROCESS the classing of the DOMOOCSS, in short, is a process of <button class="btn btn-defining standardized primary btn-large">presentational selectors which are ! <i class="icon-white icon-in turn applied to the DOM. envelope"></i> ! Button Generator </button>Extensions of such selectors arethen extended in the DOM for What’s withadded effect. using the <i> tag for ‘icon’It is likely that you will see now?examples like what you see here.
  56. 56. OOCSS FRAMEWORKS attempts to automate OOCSSCSS frameworks have been usingOOCSS methods since inception.Where these fail is the insaneamount of CSS selectors that bydefault are added to the site’s CSS.From grid systems to UI elements,CSS bloat is a real issue. Ironicallythis bloat is what OOCSS issupposed to address.
  57. 57. OOCSS FRAMEWORKS attempts to automate OOCSSCSS frameworks have been usingOOCSS methods since inception.Where these fail is the insaneamount of CSS selectors that bydefault are added to the site’s CSS. Twitter’sFrom grid bootstrapUI elements, systems to defaultCSS bloat is a real issue. Ironically includes 4914this bloat is what OOCSS is lines of CSS.supposed to address.
  58. 58. OOCSS FRAMEWORKS attempts to automate OOCSSCSS frameworks have been usingOOCSS methods since inception.Where these fail is the insaneamount of CSS selectors that bydefault are added to the site’s CSS. Twitter’sFrom grid bootstrapUI elements, systems to defaultCSS bloat is a real issue. Ironically includes 4914this bloat is what OOCSS is lines of CSS.supposed to address.
  59. 59. THE CSS DREAM redesign without DOM editingImagine a world where new designrequirements are only addressedby updating CSS? Functionalmodules and view templates arenot edited.I don’t feel OOCSS will get usthere, but OOSCSS will.
  60. 60. OBJECT ORIENTATED SCSS the future of silent selectorsWhat if we lived in a world wherethe ‘object’ selectors from OOCSScan be created, but never manifestthemselves as CSS until they areused in semantic application?What if we could seamlesslyextend selectors in our CSS andnot have to touch the DOM?What if ....
  61. 61. SASS 3.2 re-writing what we can do with CSSExtending elements in vanilla CSS // silent classesis hard to track. Between nested %kung { background: green; color: yellow;selectors and the sheer volume }alone make this an arduous task. %foo { background: orange; color: red; font-size: 12px;Sass gives us clarity. The ability to } // selectors extending silent classesreally define objects in our SCSS .foo_one { @extend %foo;and apply them to semantic } .foo_two {selectors within our CSS. } @extend %foo; // output CSSThe dream realized. .foo_one, .foo_two { background: orange; color: red; font-size: 12px; }
  62. 62. OOSCSSa real object oriented solution
  63. 63. ELEMENTS, MODULES AND PATTERNS OH MY! how do you manage all of this?
  64. 64. THE PATTERN LIBRARY living visual document
  65. 65. ELEMENTS AND SIMPLE UI PATTERNS text, colors and buttons for example
  66. 66. ASSEMBLE THE MODULEa view is an assembly of elements and patterns
  67. 67. That looks like a module
  68. 68. Cool. Developed themodule in an abstract environment.
  69. 69. Cool. Developed themodule in an abstract environment. Now we can use this anywhere. All UX/UI cleanly encapsulated.
  70. 70. Cool. Developed the module in an abstract environment. Now we can use this anywhere. All UX/UI cleanly encapsulated. When developing, noelements were created. Typography and color are all inherited.
  71. 71. Cool. Developed the module in an abstract environment. Now we can use this anywhere. All UX/UI cleanly encapsulated. When developing, noelements were created. Typography and color are all inherited. Follow the example HTML and you are rockin!
  72. 72. Reference SCSS
  73. 73. Reference SCSSUse examples
  74. 74. LET’S TAKE A LOOK AT ANOTHER maybe a feature block?
  75. 75. Oh yeah, looks likeanother great module
  76. 76. Module in theabstract again!
  77. 77. You can evenbuild variations on a module
  78. 78. Example module HTML
  79. 79. Example module HTML Reference SCSS
  80. 80. WHAT ABOUT COMPLEX MODULES? let’s turn this up to 11 - enter UI patterns
  81. 81. Alert element
  82. 82. Alert elementSubject header element
  83. 83. Alert element Subject header elementWidget header element
  84. 84. Alert element Subject header elementWidget header element Form select UI Pattern
  85. 85. Alert element Subject header elementWidget header element Form select UI Form text Pattern entry UI Pattern
  86. 86. Button element
  87. 87. Radio button, labeland text UI pattern Button element
  88. 88. Radio button, labeland text UI pattern Checkbox and label elements Button element
  89. 89. Radio button, labeland text UI pattern Scroll box UI pattern Checkbox and label elements Button element
  90. 90. Radio button, labeland text UI pattern Scroll box UI pattern Checkbox and label elements Button element Calendar data UI pattern
  91. 91. Radio button, labeland text UI pattern Scroll box UI pattern Checkbox and label elements Button element Calendar data UI pattern Button element
  92. 92. Code examples!
  93. 93. OMG! This is anerror example!
  94. 94. OMG! This is an error example! Reuse ofelements andpatterns withadded effect
  95. 95. Wow, themarkup is the same?
  96. 96. Wow, the markup is the same? Just add some‘fail’ to the blocks and you are AWESOME!
  97. 97. WHAT ABOUT THE CODE? how do you build a styleguide?
  98. 98. INTRODUCING TOADSTOOL a modern styleguide framework (alpha release)
  99. 99. The Sassstructure
  100. 100. The Sassstructure Complex UI groupings
  101. 101. The Sassstructure Complex UI groupings UI Elements and core concepts
  102. 102. The makeup of a Sass module
  103. 103. The viewstructure
  104. 104. The viewstructure Complex UI groupings
  105. 105. The viewstructure Complex UI groupings UI Elements and core concepts
  106. 106. The makeup of amarkup module
  107. 107. ELEMENTS, PATTERNS AND MODULES a recipe for success
  108. 108. SUMMARYwhat have we learned?
  109. 109. Comps are a failed communication resourcebetween designers and devs SUMMARY what have we learned?
  110. 110. Comps are a failed communication resourcebetween designers and devs As devs, we need to SUMMARY change our contextual starting point. what have we learned?
  111. 111. Comps are a failed communication resourcebetween designers and devs As devs, we need to SUMMARY change our contextual Without common standards; starting point. duplicated effort, wild what have we learned? deviations in code and inconsistencies run ramped.
  112. 112. We can do it Comps are a failed communication resource better!between designers and devs As devs, we need to SUMMARY change our contextual Without common standards; starting point. duplicated effort, wild what have we learned? deviations in code and inconsistencies run ramped.
  113. 113. We can do it Comps are a failed communication resource better!between designers and devs As devs, we need to SUMMARY change our contextual Without common standards; starting point. duplicated effort, wild what have we learned? deviations in code and inconsistencies run ramped. Embracing elements, patterns and modules makes our UI code manageable, maintainable and sustainable.
  114. 114. We can do it Comps are a failed communication resource better!between designers and devs Vanilla CSS frameworks will causeAs devs, we need to you SUMMARY much pain our contextual Without common standards; duplicated effort, wild change starting point. what have we learned? deviations in code and inconsistencies run ramped. Embracing elements, patterns and modules makes our UI code manageable, maintainable and sustainable.
  115. 115. We can do it Comps are a failed communication resource better!between designers and devs Vanilla CSS frameworks will causeAs devs, we need to you SUMMARY much pain our contextual Without common standards; duplicated effort, wild change starting point. what have we learned? deviations in code and inconsistencies run ramped. Sass is re-writing the future of Embracing elements, CSS. patterns and modules makes our UI code manageable, maintainable and sustainable.
  116. 116. We can do it Comps are a failed communication resource better!between designers and devs Vanilla CSS frameworks will causeAs devs, we need to you SUMMARY much pain our contextual change Without common standards; starting point. duplicated effort,OOCSS is ok, but wild what have we learned? deviations in code and OOSCSS is inconsistencies run ramped. amazing! Sass is re-writing the future of Embracing elements, CSS. patterns and modules makes our UI code manageable, maintainable and sustainable.
  117. 117. QUESTIONS? you, in the front ...
  118. 118. http://speakerrate.com/speakers/15438 anythi ng, but You do n’t win this ;) to get better at it h elps me
  119. 119. https://speakerdeck.com/u/anotheruiguy/p/module-design-ui-dev-patterns

×