0
HTML AND CSS                            Let’s all make fast sitesPresentation about OOCSS inspired by Nicole Sullivan. Fli...
O Hai! I’m YoniYoni De Beule, http://www.yonidebeule.be, @yoniweb
I work at Netlash                             among others.http://www.netlash.com http://www.minify.be http://www.vlmbuzz....
I love building websites that are beautiful,                               accessible, easy to use and fast.I love buildin...
BeautifulBeautiful sites
AccessibleAccessible sites (http://www.slideshare.net/YoniWeb/anysurfer)
Easy to useEasy to use sites (love your Information Architectsʼs)
FastFast sites
I also love using pictures in my                               presentations...I also love using pictures in my presentati...
It’s a designer thingItʼs a designer thing
I’m here today to make you happy.Iʼm here today to make you happy.
I’ll be making users happyIʼll be making users happy
I’ll be making developers happyIʼll be making developers happy
I’ll be making clients happyIʼll be making clients happy
I’ll even be making myself happyIʼll even be making myself happy
I’m here to make you happy by telling you                             about Object Oriented CSS.Iʼm here to make you happy...
Nicole SullivanThanks to Nicole Sullivan (Yahoo!) I found out about OOCSS © Marien van Os
She’s awesome.Sheʼs awesome.
Pure WIN.Pure WIN.
WHAT?                 Object Oriented CSSWhat is OOCSS?
OOCSS is all about building big websites                               that are fast.OOCSS is all about building big websi...
Two major principlesTwo major principles
Two major principles                              1. Separate structure and skinSeparate structure and skin
Two major principles                            1. Separate structure and skin                            2. Separate cont...
Two major principles1. Separate structure and skin2. Separate container and content
Doesn’t that kind of sounds like ...Doesnʼt that kind of sounds like ...
Fork?
Fork
Yeah, that’s what I thought.Yeah, thatʼs what I thought.
WHY USE IT?                 Object Oriented CSSWhy use OOCSS?
Lego’s.Legoʼs.
That’s right.Thatʼs right.
Lego’s.Legoʼs are modular blocks of html, css, images and javascript that can be used all across a site.
Lego’s                            1. Separate structure and skin                            2. Separate container and cont...
Fast site with less CSS.Fast site with less CSS.
Users happyUsers happy
Developers can use these lego’s virtually                              anywhere without the help of a designer.Developers ...
Developers happyDevelopers happy
Less design time needed and faster new                            features.Less design time needed and faster new features.
Clients happyClients happy
Consistent design = clean code = fast siteAnd last but not least consistent design = clean code = fast site.
Yoni happyYoni and all the other designers Happy
Designers happyHappy times.
HOW?                        Object Oriented CSSHow do you use OOCSS?
Lego’s?How do you use these Legoʼs?
<div class="mod">                                 <div class="inner">                                     <div class="hd">...
<div id="blogRecentArticlesListWidget" class="mod article">                             <div class="inner">               ...
Use it and make it your own                              but make it understandable.Use it, try it, make it your own. Donʼ...
PRO TIPS                              Object Oriented CSSIʼve been using it for a while and want to hand out some very ver...
Names, don’t loose yourself in them.Stop using “general” names like “extraColumn” and “noticeBox”... Tell it like it is!
Respect the design, don’t worship it.Respect the design, donʼt worship it.
Sprites rule, but are a bitch to maintain                              so beware!Sprites help, but are a bitch to maintain...
Progressive enhancement (PNG8).Fireworks! *pew* *pew* {OFF TOPIC}
Questions?Questions?
http://www.yonidebeule.beYoni De Beule, http://www.yonidebeule.be, @yoniweb
OOCSS
Upcoming SlideShare
Loading in...5
×

OOCSS

3,395

Published on

Presentation about using the OOCSS principles in Fork CMS.

Published in: Design, Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,395
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
75
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Transcript of "OOCSS"

  1. 1. HTML AND CSS Let’s all make fast sitesPresentation about OOCSS inspired by Nicole Sullivan. Flickr photo © Legoagogo
  2. 2. O Hai! I’m YoniYoni De Beule, http://www.yonidebeule.be, @yoniweb
  3. 3. I work at Netlash among others.http://www.netlash.com http://www.minify.be http://www.vlmbuzz.be http://www.wrappp.it
  4. 4. I love building websites that are beautiful, accessible, easy to use and fast.I love building websites that are beautiful, accessible, easy to use and fast.
  5. 5. BeautifulBeautiful sites
  6. 6. AccessibleAccessible sites (http://www.slideshare.net/YoniWeb/anysurfer)
  7. 7. Easy to useEasy to use sites (love your Information Architectsʼs)
  8. 8. FastFast sites
  9. 9. I also love using pictures in my presentations...I also love using pictures in my presentations...
  10. 10. It’s a designer thingItʼs a designer thing
  11. 11. I’m here today to make you happy.Iʼm here today to make you happy.
  12. 12. I’ll be making users happyIʼll be making users happy
  13. 13. I’ll be making developers happyIʼll be making developers happy
  14. 14. I’ll be making clients happyIʼll be making clients happy
  15. 15. I’ll even be making myself happyIʼll even be making myself happy
  16. 16. I’m here to make you happy by telling you about Object Oriented CSS.Iʼm here to make you happy by telling you about Object Oriented CSS.
  17. 17. Nicole SullivanThanks to Nicole Sullivan (Yahoo!) I found out about OOCSS © Marien van Os
  18. 18. She’s awesome.Sheʼs awesome.
  19. 19. Pure WIN.Pure WIN.
  20. 20. WHAT? Object Oriented CSSWhat is OOCSS?
  21. 21. OOCSS is all about building big websites that are fast.OOCSS is all about building big websites that are fast. Thereʼs a framework, but Iʼm all for the “concept”, the “idea”, the brilliance.
  22. 22. Two major principlesTwo major principles
  23. 23. Two major principles 1. Separate structure and skinSeparate structure and skin
  24. 24. Two major principles 1. Separate structure and skin 2. Separate container and contentSeparate container and content
  25. 25. Two major principles1. Separate structure and skin2. Separate container and content
  26. 26. Doesn’t that kind of sounds like ...Doesnʼt that kind of sounds like ...
  27. 27. Fork?
  28. 28. Fork
  29. 29. Yeah, that’s what I thought.Yeah, thatʼs what I thought.
  30. 30. WHY USE IT? Object Oriented CSSWhy use OOCSS?
  31. 31. Lego’s.Legoʼs.
  32. 32. That’s right.Thatʼs right.
  33. 33. Lego’s.Legoʼs are modular blocks of html, css, images and javascript that can be used all across a site.
  34. 34. Lego’s 1. Separate structure and skin 2. Separate container and contentThey follow the OOCSS principles.
  35. 35. Fast site with less CSS.Fast site with less CSS.
  36. 36. Users happyUsers happy
  37. 37. Developers can use these lego’s virtually anywhere without the help of a designer.Developers can use these legoʼs virtually anywhere without the help of a designer.
  38. 38. Developers happyDevelopers happy
  39. 39. Less design time needed and faster new features.Less design time needed and faster new features.
  40. 40. Clients happyClients happy
  41. 41. Consistent design = clean code = fast siteAnd last but not least consistent design = clean code = fast site.
  42. 42. Yoni happyYoni and all the other designers Happy
  43. 43. Designers happyHappy times.
  44. 44. HOW? Object Oriented CSSHow do you use OOCSS?
  45. 45. Lego’s?How do you use these Legoʼs?
  46. 46. <div class="mod"> <div class="inner"> <div class="hd"> <h3>Title</h3> </div> <div class="bd content"> <p>Content</p> </div> </div> </div>Notice the content class devs! Use it!
  47. 47. <div id="blogRecentArticlesListWidget" class="mod article"> <div class="inner"> <div class="hd"> <h3>Recent articles</h3> </div> <div class="bd content"> <ul> <li><a href= "#" >Lorem ipsum</a></li> </ul> </div> <div class="ft"> <p><a href= "#" >Blog archive</a></p> </div> </div> </div>Example from the new Fork CMS.
  48. 48. Use it and make it your own but make it understandable.Use it, try it, make it your own. Donʼt let my code or the framework hold you back!
  49. 49. PRO TIPS Object Oriented CSSIʼve been using it for a while and want to hand out some very very specific “pro tips”.
  50. 50. Names, don’t loose yourself in them.Stop using “general” names like “extraColumn” and “noticeBox”... Tell it like it is!
  51. 51. Respect the design, don’t worship it.Respect the design, donʼt worship it.
  52. 52. Sprites rule, but are a bitch to maintain so beware!Sprites help, but are a bitch to maintain. I might do a presentation about this later (like why the new Ruby feature is a bad idea). {OFF TOPIC}
  53. 53. Progressive enhancement (PNG8).Fireworks! *pew* *pew* {OFF TOPIC}
  54. 54. Questions?Questions?
  55. 55. http://www.yonidebeule.beYoni De Beule, http://www.yonidebeule.be, @yoniweb
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×