32. Contour blocks Background blocks Content Objects -
headings, paragraphs, lists, headers,
footers, buttons, etc.
Capital of the Canterbury region and the largest city
on the South Island (population just over 300,000)
exudes a palpable air of gentility and a connectedness
with the mother country.
Read more...
X X
1:n
Wednesday, April 29, 2009
34. MEDIA
Extending objects, a simple
example.
Wednesday, April 29, 2009
35. <!-- media -->
<div class=quot;media mediaExtquot;>
<img class=quot;fixedMediaquot; src=quot;myImg.pngquot; />
<div class=quot;bodyquot;>
...
</div>
</div>
Wednesday, April 29, 2009
36. SEPARATE STRUCTURE
FROM SKIN
two separate classes
Wednesday, April 29, 2009
37. block
inner
hd
STRUCTURE
Solves browser bugs, positions bd
presentational elems, and
generally does the heavy lifting
of CSS.
ft
Wednesday, April 29, 2009
38. SKIN
Makes it pretty.
The goal is very predictable
skins, complexity is absorbed
by the structure object and
shared across the site.
Wednesday, April 29, 2009
40. AVOID LOCATION
DEPENDENT STYLES
to keep CSS file size in check
Wednesday, April 29, 2009
41. Heading should not become a
A Heading
in another part of the page.
Wednesday, April 29, 2009
42. CONSISTENCY
Writing more rules to
overwrite the crazy rules from
before.
e.g. Heading should behave
predictably in any module.
Wednesday, April 29, 2009
43. #weatherModule h2{...}
#weatherModule h3{...}
#weatherModule p{...}
#tabs h2{...}
#tabs h3{...}
#tabs p{...}
+1 FOR MODULARITY,
BUT STILL BROKEN
Wednesday, April 29, 2009
45. PHOTO CREDITS
• “South Carolina” by Army.Mil
• “So Happy Together” by kalandrakas
• “sometimes, a hug is all what we need” by kalandrakas
Wednesday, April 29, 2009
46. PHOTO CREDITS
“You Crack Me Up” by http://flickr.com/photos/nickwheeleroz/2474196275/in/photostream/
•
“red lego” by http://flickr.com/photos/niznoz/5753993/
•
“Pablo’s cubism period began at three” by http://flickr.com/photos/wwworks/2475349116/in/
•
set-72157608035966422/
“Kuwait water tower” by http://flickr.com/photos/asam/327911794/
•
idigit_teddy: http://www.flickr.com/photos/design_inspiration/238542495/
•
lucianvenutian: http://www.flickr.com/photos/lucianvenutian/1142630637/
•
Gimli_36: http://www.flickr.com/photos/navillot/1878124531/
•
NathanFromDeVryEET: http://www.flickr.com/photos/thatguyfromcchs08/2300190277/
•
Stabilo Boss: http://flickr.com/photos/stabilo-boss/101793494/in/set-72057594060779001/
•
Wednesday, April 29, 2009
47. LET’S KEEP TALKING...
http://stubbornella.org
http://github.com/stubbornella/oocss/
nicole@stubbornella.org
“stubbornella” on the web...
twitter, dopplr, slideshare, everywhere...
Wednesday, April 29, 2009