Tuesday, May 17 2011 Talk.pdf · SASS or .LESS => WIN! Tuesday, May 17 2011. WE CAN BETTER...
31
Modular Web Design, OOCSS & Pattern Libraries Tuesday, May 17 2011
Transcript of Tuesday, May 17 2011 Talk.pdf · SASS or .LESS => WIN! Tuesday, May 17 2011. WE CAN BETTER...
Modular Web Design, OOCSS & Pattern LibrariesTuesday, May 17 2011
WHERE DO WE START?
Tuesday, May 17 2011
Tuesday, May 17 2011
Tuesday, May 17 2011
WE HAVE ALL SEE THIS
Tuesday, May 17 2011
ONE OF THESE THINGS ...is not like the other!
Tuesday, May 17 2011
<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>
Tuesday, May 17 2011
<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>
Tuesday, May 17 2011
<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>
Tuesday, May 17 2011
<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>
Tuesday, May 17 2011
BUT I DIGRESS ...
Tuesday, May 17 2011
Coding the screen, the widget and then the element
CSS is fragile
Poor code reuse
‘divitus’
Overuse IDs and classes
Where developers and UI engineers are doing it wrong
Tuesday, May 17 2011
UI Pattern Library
Deliver the ‘widget’
Object Orientated CSS
Learn HTML
SASS or .LESS
How can we do better?
Tuesday, May 17 2011
Designs the elements
Uses semantic HTML
Defines app environment
Living documentation
Design separate from content and container
What is a UI Pattern Library?
Tuesday, May 17 2011
Use basic elements of the design, construct the widget
Widget is independent of screen
A widget shouldn’t require additional CSS in the screen
Think modular
Tuesday, May 17 2011
ID reusable objects
Be semantic w/HTML
Minimize selectors
Extend your classes
‘Style’ separate from content
‘Content’ separate from container
Object Orientated CSS
Tuesday, May 17 2011
Metalanguages will increase code reuse with 100% accuracy
Use variables
Meta tools that allow you to create semantic objects AND reuse code!
SASS or .LESS => WIN!
Tuesday, May 17 2011
WE CAN BETTER
HTTP://BIT.LY/G0KVJX
Tuesday, May 17 2011
UI DEVELOPS IN LAYERS
Tuesday, May 17 2011
STANDARD FILE STRUCTUREtake me there
Tuesday, May 17 2011
Modular
Markup widget
Modular and OOCSS principals applied
Semantic markup
Classes for UI
IDs for functionality
Bring the picture into focus
Elemental design
OOCSS
Tuesday, May 17 2011
Modular
Apply reset.css
Bring the picture into focus
Elemental design
OOCSS
Tuesday, May 17 2011
Modular
Apply text.css
Apply design.css
Bring the picture into focus
Elemental design
OOCSS
Tuesday, May 17 2011
Modular
Apply form.css
Form UI is applied
Alerts, labels, fields and buttons are included
All widths are set to 100% and height is managed by content
Bring the picture into focus
Elemental design
OOCSS
Tuesday, May 17 2011
Modular
Apply widget css
Overall widget begins to take shape
Bring the picture into focus
Elemental design
OOCSS
Tuesday, May 17 2011
Modular
Apply screen css
Widget placement in the screen is now set
Bring the picture into focus
Elemental design
OOCSS
Tuesday, May 17 2011
SASS? LESS? WHAT?PICTURES PLEASE!
Tuesday, May 17 2011
PERPLEXED BY VENDOR PREFIXESmetalanguages to the rescue
Tuesday, May 17 2011
LEARN MORE ABOUT SASS
AND COMPASS
40% OFF BOOKO/C ‘SASS40’
HTTP://WWW.MANNING.COM/NETHERLAND/
OFFER EXPIRES 1 WEEK - ACT FAST!
Tuesday, May 17 2011
~ QUESTIONS? ~
Tuesday, May 17 2011
~ RATE ME ~SPEAKERRATE.COM/
DALE.SANDE
~ CONTACT ME ~
Tuesday, May 17 2011
