Modular Web Design, OOCSS & Pattern Libraries Tuesday, 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
Where developers and UI engineers are doing it wrong Coding the screen, the widget and then the element CSS is fragile Poor code reuse ‘divitus’ Overuse IDs and classes Tuesday, May 17 2011
How can we do better? UI Pattern Library Deliver the ‘widget’ Object Orientated CSS Learn HTML SASS or .LESS Tuesday, May 17 2011
What is a UI Pattern Library? Designs the elements Uses semantic HTML Defines app environment Living documentation Design separate from content and container Tuesday, May 17 2011
Think modular Use basic elements of the design, construct the widget Widget is independent of screen A widget shouldn’t require additional CSS in the screen Tuesday, May 17 2011
Object Orientated CSS ID reusable objects Be semantic w/HTML Minimize selectors Extend your classes ‘Style’ separate from content ‘Content’ separate from container Tuesday, May 17 2011
SASS or .LESS => WIN! Metalanguages will increase code reuse with 100% accuracy Use variables Meta tools that allow you to create semantic objects AND reuse code! 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 STRUCTURE take me ther e Tuesday, May 17 2011
Bring the picture into focus Markup widget Modular and OOCSS principals applied Semantic markup Classes for UI IDs for functionality r a l u d o M OOCSS Elemental desig n Tuesday, May 17 2011
Bring the picture into focus Apply reset.css r a l u d o M OOCSS Elemental desig n Tuesday, May 17 2011
Bring the picture into focus Apply text.css Apply design.css r a l u d o M OOCSS Elemental desig n Tuesday, May 17 2011
Bring the picture into focus 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 r a l u d o M OOCSS Elemental desig n Tuesday, May 17 2011
Bring the picture into focus Apply widget css Overall widget begins to take shape r a l u d o M OOCSS Elemental desig n Tuesday, May 17 2011
Bring the picture into focus Apply screen css Widget placement in the screen is now set r a l u d o M OOCSS Elemental desig n Tuesday, May 17 2011
SASS? LESS? WHAT? PICTURES PLEASE! Tuesday, May 17 2011
PERPLEXED BY VENDOR PREFIXES metalanguages to the rescu e Tuesday, May 17 2011
LEARN MORE ABOUT SASS AND COMPASS 40% OFF BOOK O/C ‘ SASS40 ’ OFFER EXPIRES 1 WEEK - ACT FAST! HTTP://WWW.MANNING.COM/NETHERLAND/ Tuesday, May 17 2011
~ QUESTIONS? ~ Tuesday, May 17 2011
~ RATE ME ~ SPEAKERRATE.COM/ DALE.SANDE ~ CONTACT ME ~ Tuesday, May 17 2011
Recommend
More recommend
