Modular Web Design, OOCSS & Pattern Libraries Tuesday, May 17 - - PowerPoint PPT Presentation

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&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>

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&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>

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 STRUCTURE

take me there

Tuesday, May 17 2011

M

• d

u l a r 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

M

• d

u l a r Apply reset.css

Bring the picture into focus

Elemental design OOCSS

Tuesday, May 17 2011

M

• d

u l a r Apply text.css Apply design.css

Bring the picture into focus

Elemental design OOCSS

Tuesday, May 17 2011

M

• d

u l a r 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

M

• d

u l a r Apply widget css Overall widget begins to take shape

Bring the picture into focus

Elemental design OOCSS

Tuesday, May 17 2011

M

• d

u l a r 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 PREFIXES

metalanguages to the rescue

Tuesday, May 17 2011

LEARN MORE ABOUT SASS AND COMPASS 40% OFF BOOK

O/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