Embed Size (px)
DESCRIPTION
code your UI from the inside out
Citation preview
MODULE DESIGN & UI DEV PATTERNS
code from the inside out
OR...
THE FAILURE OF THE COMPpictures are for photoshop
DESIGNERS & STAKEHOLDERSwe’ve all had this conversation
We need a comp!
DESIGNERS SEEcolors, type, icons, images, spacing, borders, gradients, etc ...
DEVELOPERS SEEahhh ...
Where do I
begin?
Can’t you
just export
HTML?
That
Never
Works!
OHHH, YOU NEED SPECS?sure, I have a red-line for that
UI DEVELOPERS ...our context is all wrong
Start from the upper left, right?<div id=”home-page”> that works.
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
BETWEEN DESIGNERS & DEVS THE COMP IS
THE ONLY CONSTANTwhat could possibly go wrong?
PICTURE WORTH 1000 WORDS
a comp is worth 10,000 development variations
ONE OF THESE THINGS ...are not like the other!
You: but we aren’t developing the whole comp? we are breaking the design into modules and giving the work to developers.
me:without elemental and modular standards, what happens when the ‘comp’ is the only uniform source of record between 2 individual devs?
<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&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
<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&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
<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&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!
<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&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.
<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&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!
<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
<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 BAhhh ...
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%. 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 BAhhh ...
this is the same
This is NOT!
<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
<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?
<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?
Let’s define a color at the <body>
tag, that’s good.
<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?
Let’s define a color at the <body>
tag, that’s good.
But wait ... we
are overriding by changing a whole widget
block?
<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?
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!
<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?
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!
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 THINKthe ‘page’ is a deprecated concept
FIGHT THE SMALL BATTLESthe element and the module
What are elements?
Visual elements are the basic building blocks of the UI.
Well engineered individual elements reduces duplication
and increases consistency.
What are elements?
Buttons
What are elements?
Buttons
Typography
What are elements?
Buttons
Typography
Color pallet
What are elements?
Buttons
Typography
Color pallet
standard icons
What are elements?
Buttons
Typography
Color pallet
standard icons
borders and line widths
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)
What are modules?
Header module
What are modules?
Header module
Nav module
What are modules?
Header module
Nav module
Hero copy module
What are modules?
Header module
Hero module
Nav module
Hero copy module
What are modules?
Header module
Hero module
Nav module
Hero copy moduleArticle module
What are modules?
Header module
Hero module
Nav module
Hero copy moduleArticle module
List module
OOSCSSpicking 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 CONCEPTbad 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
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
THE OOCSS PROCESSthe 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>
THE OOCSS PROCESSthe 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?
OOCSS FRAMEWORKSattempts 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.
OOCSS FRAMEWORKSattempts 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.
OOCSS FRAMEWORKSattempts 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.
THE CSS DREAMredesign 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.
OBJECT ORIENTATED SCSSthe 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 ....
SASS 3.2re-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;}
OOSCSSa real object oriented solution
ELEMENTS, MODULES AND PATTERNS OH MY!
how do you manage all of this?
THE PATTERN LIBRARYliving 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 the module in an abstract
environment.
Cool. Developed the module in an abstract
environment.
Now we can use this anywhere. All UX/UI cleanly encapsulated.
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.
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.
Reference SCSS
Reference SCSS
Use examples
LET’S TAKE A LOOK AT ANOTHER
maybe a feature block?
Oh yeah, looks like another great module
Module in the abstract again!
You can even build 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 element
Subject header element
Alert element
Subject header element
Widget header element
Alert element
Subject header element
Widget header element
Form select UI Pattern
Alert element
Subject header element
Widget header element
Form select UI PatternForm text
entry UI Pattern
Button element
Button element
Radio button, label and text UI pattern
Button element
Radio button, label and text UI pattern
Checkbox and label elements
Button element
Radio button, label and text UI pattern
Checkbox and label elements
Scroll box UI pattern
Button element
Radio button, label and text UI pattern
Checkbox and label elements
Scroll box UI pattern
Calendar data UI pattern
Button element
Radio button, label and text UI pattern
Checkbox and label elements
Scroll box UI pattern
Calendar data UI pattern
Button element
Code examples!
OMG! This is an error example!
OMG! This is an error example!
Reuse of elements and patterns with added effect
Wow, the markup is the
same?
Wow, the markup is the
same?
Just add some ‘fail’ to the blocks
and you are AWESOME!
WHAT ABOUT THE CODE?how do you build a styleguide?
INTRODUCING TOADSTOOLa modern styleguide framework
(alpha release)
The Sass structure
Complex UI groupings
The Sass structure
UI Elements and core concepts
Complex UI groupings
The Sass structure
The makeup of a Sass module
The view structure
Complex UI groupings
The view structure
UI Elements and core concepts
Complex UI groupings
The view structure
The makeup of a markup module
ELEMENTS, PATTERNS AND MODULESa recipe for success
SUMMARYwhat have we learned?
SUMMARYwhat have we learned?
Comps are a failed communication resource
between designers and devs
SUMMARYwhat have we learned?
Comps are a failed communication resource
between designers and devs
As devs, we need to change our contextual
starting point.
SUMMARYwhat 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.
SUMMARYwhat 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!
SUMMARYwhat 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.
SUMMARYwhat 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
SUMMARYwhat 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.
SUMMARYwhat 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!
QUESTIONS?you, in the front ...
http://speakerrate.com/speakers/15438
You don’t win anything, but
it helps me to get better at this ;)
https://speakerdeck.com/u/anotheruiguy/p/module-design-ui-dev-patterns
