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 ďŹle 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://ďŹickr.com/photos/nickwheeleroz/2474196275/in/photostream/
â˘
âred legoâ by http://ďŹickr.com/photos/niznoz/5753993/
â˘
âPabloâs cubism period began at threeâ by http://ďŹickr.com/photos/wwworks/2475349116/in/
â˘
set-72157608035966422/
âKuwait water towerâ by http://ďŹickr.com/photos/asam/327911794/
â˘
idigit_teddy: http://www.ďŹickr.com/photos/design_inspiration/238542495/
â˘
lucianvenutian: http://www.ďŹickr.com/photos/lucianvenutian/1142630637/
â˘
Gimli_36: http://www.ďŹickr.com/photos/navillot/1878124531/
â˘
NathanFromDeVryEET: http://www.ďŹickr.com/photos/thatguyfromcchs08/2300190277/
â˘
Stabilo Boss: http://ďŹickr.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