May 17, 2011 - Modular. Apply text.css. Apply design.css. Bring the picture into focus. Elemental design. OOCSS. Tuesday
Mo du lar W eb De s i g n, O O CSS & Patte r n Li b r ar i es 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
Free image of the week
Come back each week and stay inspired.
Stockbyte
portrait of a young woman smiling
View image Get free image
Tuesday, May 17 2011
Free image of the week
Come back each week and stay inspired.
Stockbyte
portrait of a young woman smiling
View image Get free image
Tuesday, May 17 2011
Special offer
Purchase a new 1-Month Subscription by June 30, 2011 and save 10%. Use promo code ZP3PC46N during checkout to enjoy your savings today.
Get the details
Tuesday, May 17 2011
Special offer
Purchase a new 1-Month Subscription by June 30, 2011 and save 10%. Use promo code ZP3PC46N during checkout to enjoy your savings today.
Get the details
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 there 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 Mod
OOCSS
n g i s e d l a t n e m Ele
Tuesday, May 17 2011
Bring the picture into focus Apply reset.css
r a l u Mod
OOCSS
n g i s e d l a t n e m Ele
Tuesday, May 17 2011
Bring the picture into focus Apply text.css Apply design.css
r a l u Mod
OOCSS
n g i s e d l a t n e m Ele
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 Mod
OOCSS
n g i s e d l a t n e m Ele
Tuesday, May 17 2011
Bring the picture into focus Apply widget css Overall widget begins to take shape
r a l u Mod
OOCSS
n g i s e d l a t n e m Ele
Tuesday, May 17 2011
Bring the picture into focus Apply screen css Widget placement in the screen is now set
r a l u Mod
OOCSS
n g i s e d l a t n e m Ele
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’ 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
