CSS Frameworks

5,325 views

Published on

With the proliferation and widespread adoption of JavaScript frameworks, smart developers have wondered if a similar approach to smoothing over the rough spots of CSS might work. Thus, CSS frameworks like Blueprint, YUI Library CSS Tools, Boilerplate, and many others were born. In this session, we will survey the landscape of CSS frameworks and consider how each of them deals with the unique challenge of creating generalised, reusable CSS styles.

There are a number of different approaches, and some are better than others. Choose the right framework and you’ll save yourself a lot of work. Choose the wrong one, and you’ll find your projects weighed down by restrictive assumptions and masses of code that you don’t understand. When it comes to CSS frameworks, making the right choice is everything. By the end of this session, you might just decide that the right framework for you is no framework at all.

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

No Downloads
Views
Total views
5,325
On SlideShare
0
From Embeds
0
Number of Embeds
737
Actions
Shares
0
Downloads
182
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • 50-55 minutes long
  • 50-55 minutes long
  • Show of hands: based on this definition,

    • using a CSS framework?

    • using a “framework” they created themselves?
  • • more than enough list posts out there (maybe one or two on sitepoint.com!)
  • As I take you on this “grand tour of CSS frameworkery”, my aim is to answer three questions for you…
  • As I take you on this “grand tour of CSS frameworkery”, my aim is to answer three questions for you…
  • As I take you on this “grand tour of CSS frameworkery”, my aim is to answer three questions for you…
  • As I take you on this “grand tour of CSS frameworkery”, my aim is to answer three questions for you…
  • As I take you on this “grand tour of CSS frameworkery”, my aim is to answer three questions for you…
  • As I take you on this “grand tour of CSS frameworkery”, my aim is to answer three questions for you…
  • …and by the end, you should have a good feel for whether there are any CSS frameworks that are right for you. (Or if the one you build yourself might be worth putting out there!)
  • • we’ll look at four types of frameworks
  • • we’ll look at four types of frameworks
  • • we’ll look at four types of frameworks
  • • we’ll look at four types of frameworks
  • • we’ll look at four types of frameworks
  • • we’ll look at four types of frameworks
  • • we’ll look at four types of frameworks
  • • we’ll look at four types of frameworks
  • • we’ll look at four types of frameworks
  • • choosing a CSS Reset is fraught with all the complexities and complications of choosing any CSS framework
  • • choosing a CSS Reset is fraught with all the complexities and complications of choosing any CSS framework
  • • choosing a CSS Reset is fraught with all the complexities and complications of choosing any CSS framework
  • • (if you use one) first style sheet you apply to every page
  • • (if you use one) first style sheet you apply to every page
  • • Yahoo! User Interface Library (YUI) Reset CSS

    • all sorts of things you might not think of

    • more robust than the typical do-it-yourself effort

    • doesn’t reset margins and padding that are vital to some form elements
  • • Yahoo! User Interface Library (YUI) Reset CSS

    • all sorts of things you might not think of

    • more robust than the typical do-it-yourself effort

    • doesn’t reset margins and padding that are vital to some form elements
  • • Yahoo! User Interface Library (YUI) Reset CSS

    • all sorts of things you might not think of

    • more robust than the typical do-it-yourself effort

    • doesn’t reset margins and padding that are vital to some form elements
  • • Yahoo! User Interface Library (YUI) Reset CSS

    • all sorts of things you might not think of

    • more robust than the typical do-it-yourself effort

    • doesn’t reset margins and padding that are vital to some form elements
  • • Yahoo! User Interface Library (YUI) Reset CSS

    • all sorts of things you might not think of

    • more robust than the typical do-it-yourself effort

    • doesn’t reset margins and padding that are vital to some form elements
  • • Meyer removes :focus (pseudo-class) outlines and other “critical” styles like the underline on ins elements.

    • Yahoo! breaks font style inheritance by applying initial values (e.g. font-weight: normal) to all elements.

    • Meyer: right thing to do is use inherit, which IE6/7 do not support, so leave these styles alone.
  • • Meyer removes :focus (pseudo-class) outlines and other “critical” styles like the underline on ins elements.

    • Yahoo! breaks font style inheritance by applying initial values (e.g. font-weight: normal) to all elements.

    • Meyer: right thing to do is use inherit, which IE6/7 do not support, so leave these styles alone.
  • • Meyer removes :focus (pseudo-class) outlines and other “critical” styles like the underline on ins elements.

    • Yahoo! breaks font style inheritance by applying initial values (e.g. font-weight: normal) to all elements.

    • Meyer: right thing to do is use inherit, which IE6/7 do not support, so leave these styles alone.
  • • Meyer removes :focus (pseudo-class) outlines and other “critical” styles like the underline on ins elements.

    • Yahoo! breaks font style inheritance by applying initial values (e.g. font-weight: normal) to all elements.

    • Meyer: right thing to do is use inherit, which IE6/7 do not support, so leave these styles alone.
  • • lack of :focus outline huge accessibility issue by default

    • vote

    • YUI is a better choice if you want to ignore the details
  • • apparent differences mostly meaningless

    • last row is the only important one
  • 24 columns
  • 24 columns
  • 24 columns
  • 24 columns
  • 24 columns
  • 24 columns
  • 24 columns
  • 24 columns
  • 24 columns
  • 24 columns
  • 24 columns
  • 24 columns
  • 24 columns
  • 24 columns
  • 24 columns
  • 24 columns
  • 24 columns
  • 24 columns
  • 24 columns
  • • choice of 12 or 16 columns

    • don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!

    • I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
  • • choice of 12 or 16 columns

    • don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!

    • I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
  • • choice of 12 or 16 columns

    • don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!

    • I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
  • • choice of 12 or 16 columns

    • don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!

    • I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
  • • choice of 12 or 16 columns

    • don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!

    • I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
  • • choice of 12 or 16 columns

    • don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!

    • I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
  • • choice of 12 or 16 columns

    • don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!

    • I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
  • • choice of 12 or 16 columns

    • don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!

    • I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
  • • choice of 12 or 16 columns

    • don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!

    • I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
  • • choice of 12 or 16 columns

    • don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!

    • I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
  • • choice of 12 or 16 columns

    • don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!

    • I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
  • • choice of 12 or 16 columns

    • don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!

    • I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
  • • choice of 12 or 16 columns

    • don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!

    • I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
  • • choice of 12 or 16 columns

    • don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!

    • I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
  • • choice of 12 or 16 columns

    • don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!

    • I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
  • • choice of 12 or 16 columns

    • don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!

    • I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
  • • choice of 12 or 16 columns

    • don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!

    • I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
  • • fixed sizes are expressed in ems, even for pixel-width layouts

    • result: very difficult to tweak the grid for exceptions, special effects
  • • fixed sizes are expressed in ems, even for pixel-width layouts

    • result: very difficult to tweak the grid for exceptions, special effects
  • • fixed sizes are expressed in ems, even for pixel-width layouts

    • result: very difficult to tweak the grid for exceptions, special effects
  • • fixed sizes are expressed in ems, even for pixel-width layouts

    • result: very difficult to tweak the grid for exceptions, special effects
  • • fixed sizes are expressed in ems, even for pixel-width layouts

    • result: very difficult to tweak the grid for exceptions, special effects
  • • fixed sizes are expressed in ems, even for pixel-width layouts

    • result: very difficult to tweak the grid for exceptions, special effects
  • …what bugs you about the code I have shown you so far?
  • Use class with semantics in mind (W3C QA Tip)
    http://www.w3.org/QA/Tips/goodclassnames
  • Use class with semantics in mind (W3C QA Tip)
    http://www.w3.org/QA/Tips/goodclassnames
  • Use class with semantics in mind (W3C QA Tip)
    http://www.w3.org/QA/Tips/goodclassnames
  • Use class with semantics in mind (W3C QA Tip)
    http://www.w3.org/QA/Tips/goodclassnames
  • Use class with semantics in mind (W3C QA Tip)
    http://www.w3.org/QA/Tips/goodclassnames
  • Use class with semantics in mind (W3C QA Tip)
    http://www.w3.org/QA/Tips/goodclassnames
  • Demo semantic class name support in Blueprint
  • Is Andy Clarke’s “presentational thinking” while writing markup a real-world problem?
  • • DESKTOP BACKGROUND COMPARISON!!!

    • I choose Blueprint if I am prototyping, or if fixed width OK.

    • For fluid layout, YUI Grids too painful. Do it yourself.

    • YUI: Amazing technical achievement (grid resizes with text), but em-based sizes too inflexible for creating special effects (e.g. overlapping block edges).
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • largely concerned with creating vertical rhythms

    • vertical rhythm improves readability, perceived polish of design

    • here’s how Blueprint does it
  • • a finished layout with typographic grid

    • can anyone suggest how this might be made better?

    • a shared baseline, and that’s exactly what a new typographic grid framework called—creatively enough—Baseline aims to do.

    • even does it for form fields!

    • don’t believe in pixel font sizes? you will not like this framework
  • • a finished layout with typographic grid

    • can anyone suggest how this might be made better?

    • a shared baseline, and that’s exactly what a new typographic grid framework called—creatively enough—Baseline aims to do.

    • even does it for form fields!

    • don’t believe in pixel font sizes? you will not like this framework
  • • a finished layout with typographic grid

    • can anyone suggest how this might be made better?

    • a shared baseline, and that’s exactly what a new typographic grid framework called—creatively enough—Baseline aims to do.

    • even does it for form fields!

    • don’t believe in pixel font sizes? you will not like this framework
  • • a finished layout with typographic grid

    • can anyone suggest how this might be made better?

    • a shared baseline, and that’s exactly what a new typographic grid framework called—creatively enough—Baseline aims to do.

    • even does it for form fields!

    • don’t believe in pixel font sizes? you will not like this framework
  • • a finished layout with typographic grid

    • can anyone suggest how this might be made better?

    • a shared baseline, and that’s exactly what a new typographic grid framework called—creatively enough—Baseline aims to do.

    • even does it for form fields!

    • don’t believe in pixel font sizes? you will not like this framework
  • • a finished layout with typographic grid

    • can anyone suggest how this might be made better?

    • a shared baseline, and that’s exactly what a new typographic grid framework called—creatively enough—Baseline aims to do.

    • even does it for form fields!

    • don’t believe in pixel font sizes? you will not like this framework
  • • a finished layout with typographic grid

    • can anyone suggest how this might be made better?

    • a shared baseline, and that’s exactly what a new typographic grid framework called—creatively enough—Baseline aims to do.

    • even does it for form fields!

    • don’t believe in pixel font sizes? you will not like this framework
  • • a finished layout with typographic grid

    • can anyone suggest how this might be made better?

    • a shared baseline, and that’s exactly what a new typographic grid framework called—creatively enough—Baseline aims to do.

    • even does it for form fields!

    • don’t believe in pixel font sizes? you will not like this framework
  • • a finished layout with typographic grid

    • can anyone suggest how this might be made better?

    • a shared baseline, and that’s exactly what a new typographic grid framework called—creatively enough—Baseline aims to do.

    • even does it for form fields!

    • don’t believe in pixel font sizes? you will not like this framework
  • • Calibri has smaller x-height that Helvetica, framework line-height is too large.

    • Times is a serif font, framework line-height is again too large.

    • Light-on-dark designs call for increased leading or they feel too noisy.

    • typographic grid comes with a lot of assumptions about the fonts, colours, typical line lengths, and other aspects of your design
  • • Calibri has smaller x-height that Helvetica, framework line-height is too large.

    • Times is a serif font, framework line-height is again too large.

    • Light-on-dark designs call for increased leading or they feel too noisy.

    • typographic grid comes with a lot of assumptions about the fonts, colours, typical line lengths, and other aspects of your design
  • aka “libraries”—ready-made solutions for specific tasks
  • • real time-savers, but not tools for original design
  • Andy Clarke’s design for The New Internationalist
  • Andy Clarke’s design for The New Internationalist
  • Andy Clarke’s design for The New Internationalist
  • Andy Clarke’s design for The New Internationalist
  • (Joke about finding a photo to represent abstraction.)
  • (Joke about finding a photo to represent abstraction.)
  • (Joke about finding a photo to represent abstraction.)
  • “CSS is simple. It’s better that way. Needs to work for non-programmers.”
  • • unfortunately no selector inheritance (mixins)

    • give them points for trying to slip a new word into the language—“webdesign”
  • • by Anthony Short (from Sydney)

    • no colour arithmetic, but this is a non-issue in practice

    • installation and development workflow very smooth
  • What do CSS frameworks do?
    • reset styles
    • horizontal grids for layout, vertical grids for text
    • pre-fab styles for particular types of content
    • make CSS more powerful with server-side processing

    How do you choose a CSS framework?
    • don’t adopt for the free code
    • because it contains code you agree with
    • buying into a shared methodology: community, open documentation, ease of training and recruitment.

    Are CSS frameworks pure evil?
    • of course not—shortcuts can be good or bad
    • no need to reinvent the wheel; just make it your business to know as much about the wheels you use as possible. Choose code you would have written on your best day.
  • STOP … question time!
  • • Object Oriented CSS by Nicole Sullivan

    • anecdote: the Core library

    • have considered a CSS book that used a framework in the same way
  • • Object Oriented CSS by Nicole Sullivan

    • anecdote: the Core library

    • have considered a CSS book that used a framework in the same way
  • • Object Oriented CSS by Nicole Sullivan

    • anecdote: the Core library

    • have considered a CSS book that used a framework in the same way
  • CSS Frameworks

    1. 1. CSS FRAMEWORKS make the right choice Kevin Yank, sitepoint.com Web Directions South 2009
    2. 2. CSS FRAMEWORKS make the right choice
    3. 3. CSS FRAMEWORKS “a set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules that can be reused” — Jeff Croft, Frameworks for Designers
    4. 4. SlickMap CSS
    5. 5. THREE QUESTIONS
    6. 6. THREE QUESTIONS What do CSS frameworks do? How do I choose a CSS framework? evil Are CSS frameworks pure evil?
    7. 7. THREE QUESTIONS What do CSS frameworks do? How do I choose a CSS framework? Are CSS frameworks pure evil evil?
    8. 8. THREE QUESTIONS
    9. 9. THREE QUESTIONS
    10. 10. CSS RESET http://www.flickr.com/photos/redux/3219068532/
    11. 11. CSS RESET
    12. 12. CSS RESET
    13. 13. CSS RESET
    14. 14. CSS RESET
    15. 15. CSS RESET body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockq uote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0; }
    16. 16. CSS RESET body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockq uote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } *{ :0; h1,h2,h3,h4,h5,h6 { margin g:0; font-size:100%; paddin font-weight:normal; } } q:before,q:after { content:''; } abbr,acronym { border:0; }
    17. 17. CSS RESET YUI Reset CSS Eric Meyer’s Reset CSS leaves critical styles alone resets critical styles ins left underlined no :focus outline, unstyled ins sets default font styles attempts to inherit font styles strong not bold, em not italic leaves built-in font styles
    18. 18. CSS RESET YUI Reset CSS Eric Meyer’s Reset CSS leaves critical styles alone resets critical styles ins left underlined no :focus outline, unstyled ins sets default font styles attempts to inherit font styles strong not bold, em not italic leaves built-in font styles
    19. 19. CSS RESET YUI Reset CSS Eric Meyer’s Reset CSS leaves critical styles alone resets critical styles ins left underlined no :focus outline, unstyled ins sets default font styles attempts to inherit font styles strong not bold, em not italic leaves built-in font styles
    20. 20. CSS RESET YUI Reset CSS Eric Meyer’s Reset CSS leaves critical styles alone resets critical styles ins left underlined no :focus outline, unstyled ins sets default font styles attempts to inherit font styles strong not bold, em not italic leaves built-in font styles
    21. 21. CSS RESET YUI Reset CSS Eric Meyer’s Reset CSS leaves critical styles alone resets critical styles ins left underlined no :focus outline, unstyled ins sets default font styles attempts to inherit font styles strong not bold, em not italic leaves built-in font styles
    22. 22. CSS RESET
    23. 23. CSS RESET
    24. 24. CONTROVERSY IN MICROCOSM
    25. 25. CONTROVERSY IN MICROCOSM “The problem I’vetake style effectsresets is is that then find me “I“The problem I’ve had with thesefor granted. […] It makes don’t want to had with these resets that I I then find myself think just that littlemore thanever needed to just toof get myself declaring much bit than I Iaboutneeded to just toget declaring much more harder ever the semantics my browsers backWith the reset in place, Iway I want. strong turns browsers back to rendering things thedon’tI pick As ititturns document. to rendering things the way want. As because out,the I’m perfectly for boldfacing. Instead, I pickelements render out, design calls happy with how number ofof the right element— I’m perfectly happy with how a a number elements render by default. I likeit’slike to havehaveor band andor whatever—and then by default. Ilists lists to em bullets h3 strong elements to whether strong or bullets or strong elements to have have boldedneeded.” bolded text.” ” style it as text. — — Jonathan Snook, No CSS Reset Jonathan Meyer, Reset Reasoning — Eric Snook, No CSS Reset
    26. 26. CONTROVERSY IN MICROCOSM “The problemto take style effects for granted. […]then find meme “I don’t want I’vetake style effectsresets is that […]makes “I don’t want to had with these for granted. I It It makes myself thinkjust that little bit harder Iabout needed to justof my my think just that little bit than ever the semantics toof declaring much more harder about the semantics get browsers backWith the reset in place, Iwaypick strongitbecause document. With renderingin place, I don’t I want. strong because document. to the reset things the don’t pick As turns out,thedesign callshappyboldfacing. Instead, I pickelements render the design calls for with how a number of the right element— I’m perfectly for boldfacing. Instead, I pick the right element— by default. I likeit’s strongor em oror band h3 or whatever—and then whether it’s lists to have em b oror strong elements to then whether strong or bullets h3 or whatever—and have style it asas needed.” bolded text.” ” style it needed. — Eric Meyer, Reset Reasoning — Jonathan Meyer, Reset Reasoning — Eric Snook, No CSS Reset
    27. 27. CONTROVERSY IN MICROCOSM
    28. 28. CSS RESET
    29. 29. http://www.flickr.com/photos/evaekeblad/468013086/ GRID FRAMEWORKS
    30. 30. COLUMN GRIDS http://www.flickr.com/photos/tochis/1302364866/
    31. 31. COLUMN GRIDS Blueprint 960 Grid System YUI Grids CSS fluid or 950px fixed 960px fixed 750/950/974px fixed 24 columns 12/16 columns custom or custom or custom good docs, nice code, nice code, fluid and mixed any source order any source order layouts
    32. 32. BLUEPRINT 30px 10px 950px
    33. 33. BLUEPRINT 30px 10px 950px class="container"
    34. 34. BLUEPRINT 30px 10px 950px site header class="span-24" class="container"
    35. 35. BLUEPRINT 30px 10px 950px site header class="span-24" content class="span-18" class="container"
    36. 36. BLUEPRINT 30px 10px 950px site header class="span-24" sidebar content class="span-18" class="span-6 class="container" last"
    37. 37. BLUEPRINT 30px 10px 950px site header class="span-24" feature A class="span-9" sidebar class="span-6 class="container" last" content class="span-18"
    38. 38. BLUEPRINT 30px 10px 950px site header class="span-24" feature A feature B class="span-9" class="span-9 last" sidebar class="span-6 class="container" last" content class="span-18"
    39. 39. BLUEPRINT 30px 10px 950px site header class="span-24" feature A feature B class="span-9" class="span-9 last" sidebar body content class="container" class="span-6 class="span-18 last" last" content class="span-18"
    40. 40. BLUEPRINT 30px 10px 950px site header class="span-24" feature A feature B class="span-9" class="span-9 last" sidebar body content class="container" class="span-6 class="span-18 last" last" content class="span-18" department A department B department C class="span-6" class="span-6" class="span-6 last"
    41. 41. 960 GRID SYSTEM 60px 20px 40px 960px
    42. 42. 960 GRID SYSTEM 60px 20px 40px 960px class="container_16"
    43. 43. 960 GRID SYSTEM 60px 20px 40px 960px site header class="grid_16" class="container_16"
    44. 44. 960 GRID SYSTEM 60px 20px 40px 960px site header class="grid_16" content class="grid_12" class="container_16"
    45. 45. 960 GRID SYSTEM 60px 20px 40px 960px site header class="grid_16" content class="grid_12" sidebar class="container_16" class="grid_4"
    46. 46. 960 GRID SYSTEM 60px 20px 40px 960px site header class="grid_16" feature A feature B class="grid_6 alpha" class="grid_6 omega" body content sidebar class="container_16" class="grid_12 alpha omega" class="grid_4" content class="grid_12" department A department B department C class="grid_4 alpha" class="grid_4" class="grid_4 omega"
    47. 47. YUI GRIDS CSS
    48. 48. YUI GRIDS CSS <div id="doc3" class="yui-t6"> ! <div id="hd"><h1>Header</h1></div> ! <div id="bd"> ! ! <div id="yui-main"> ! ! ! <div class="yui-b"> ! ! ! ! <div class="yui-g"> ! ! ! ! ! <div class="yui-u first"> ! ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! ! </div> ! ! ! ! ! <div class="yui-u"> ! ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! ! </div> ! ! ! ! </div> ! ! ! ! <div class="yui-g"> ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! </div> ! ! ! ! <div class="yui-gb"> ! ! ! ! ! <div class="yui-u first"> ! ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! ! </div> ! ! ! ! ! <div class="yui-u"> ! ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! ! </div> ! ! ! ! ! <div class="yui-u"> ! ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! ! </div> ! ! ! ! </div> ! ! ! </div> ! ! </div> ! ! <div class="yui-b"> ! ! ! <!-- YOUR NAVIGATION GOES HERE --> ! ! </div> ! </div> <div id="ft"><p>Footer</p></div> </div>
    49. 49. YUI GRIDS CSS <div id="doc3" class="yui-t6"> ! <div id="hd"><h1>Header</h1></div> class="yui-t6" 300px right sidebar ! <div id="bd"> ! ! <div id="yui-main"> ! ! ! <div class="yui-b"> id="doc3" 100% width ! ! ! ! ! ! ! ! <div class="yui-g"> ! <div class="yui-u first">class="yui-g" 2-col sub-grid ! ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! ! </div> ! ! ! ! ! <div class="yui-u"> ! ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! ! </div> ! ! ! ! </div> ! ! ! ! <div class="yui-g"> ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! </div> ! ! ! ! ! ! ! ! <div class="yui-gb"> ! <div class="yui-u first"> class="yui-gb" 3-col sub-grid ! ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! ! </div> ! ! ! ! ! <div class="yui-u"> ! ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! ! </div> ! ! ! ! ! ! ! ! ! ! <div class="yui-u"> ! <!-- YOUR DATA GOES HERE class="yui-u" grid unit --> ! ! ! ! ! </div> ! ! ! ! </div> ! ! ! </div> ! ! </div> ! ! <div class="yui-b"> ! ! ! <!-- YOUR NAVIGATION GOES HERE --> ! ! </div> ! </div> <div id="ft"><p>Footer</p></div> </div>
    50. 50. ANNOYED?
    51. 51. NON-SEMANTIC CLASSES
    52. 52. NON-SEMANTIC CLASSES class="span-9 last" class="grid_6 alpha" class="yui-t6"
    53. 53. NON-SEMANTIC CLASSES
    54. 54. NON-SEMANTIC CLASSES HTML4 “The class attribute has several roles in HTML: • As a style sheet selector (when an author wishes to assign style information to a set of elements). • For general purpose processing by user agents.”
    55. 55. NON-SEMANTIC CLASSES HTML4 HTML5 Draft “The class attribute has several roles in “Authors may use any value in the class HTML: attribute, but are encouraged to use the • As a style sheet selector (when an values that describe the nature of the author wishes to assign style content, rather than values that describe information to a set of elements). the desired presentation of the content.” • For general purpose processing by user agents.”
    56. 56. NON-SEMANTIC CLASSES HTML4 HTML5 Draft “The class attribute has several roles in “Authors may use any value in the class HTML: attribute, but are encouraged to use the • As a style sheet selector (when an values that describe the nature of the author wishes to assign style content, rather than values that describe information to a set of elements). the desired presentation of the content.” • For general purpose processing by user agents.” “Good names don’t change “Think about why you want something to look a certain way, and not really about how it should look. Looks can always change, but the reasons for giving something a look stay the same.”
    57. 57. NON-SEMANTIC CLASSES Let’s use our own classes!
    58. 58. PRESENTATIONAL THINKING
    59. 59. COLUMN GRIDS Blueprint 960 Grid System YUI Grids CSS fluid or 950px fixed 960px fixed 750/950/974px fixed 24 columns 12/16 columns custom or custom or custom good docs, nice code, nice code, fluid and mixed any source order, any source order layouts semantic classes
    60. 60. COLUMN GRIDS
    61. 61. TYPOGRAPHIC GRIDS
    62. 62. TYPOGRAPHIC GRIDS h1 { ! font-size:3em; ! line-height:1; ! margin-bottom:0.5em; }
    63. 63. TYPOGRAPHIC GRIDS vertical rhythm h1 { ! font-size:3em; ! line-height:1; ! margin-bottom:0.5em; }
    64. 64. TYPOGRAPHIC GRIDS vertical rhythm Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero default font 12px/18px egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor. Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi. Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue h1 { non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida ! font-size:3em; ultrices. ! line-height:1; ! margin-bottom:0.5em; }
    65. 65. TYPOGRAPHIC GRIDS vertical rhythm Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero default font 12px/18px egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor. Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi. Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue h2 { non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida ! font-size:2em; ultrices. ! line-height:1.5; ! margin-bottom:0.75em; }
    66. 66. TYPOGRAPHIC GRIDS vertical rhythm Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero default font 12px/18px egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor. Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi. Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue h2 { non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida ! font-size:2em; ultrices. ! line-height:1.5; ! margin-bottom:0.75em; } 12px × 3 × 1 = 36px = 2 grids/line
    67. 67. TYPOGRAPHIC GRIDS vertical rhythm Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero default font 12px/18px egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor. Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi. Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue h2 { non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida ! font-size:2em; ultrices. ! line-height:1.5; ! margin-bottom:0.75em; } 12px × 3 × 1 = 36px = 2 grids/line 12px × 3 × 0.5 = 18px = 1 grid margin
    68. 68. TYPOGRAPHIC GRIDS vertical rhythm Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero default font 12px/18px egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor. Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi. Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue h3 { non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida ! font-size:1.5em; ultrices. ! line-height:1; ! margin-bottom:1em; } 12px × 3 × 1 = 36px = 2 grids/line 12px × 3 × 0.5 = 18px = 1 grid margin
    69. 69. TYPOGRAPHIC GRIDS vertical rhythm Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero default font 12px/18px egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor. Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi. Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue h3 { non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida ! font-size:1.5em; ultrices. ! line-height:1; ! margin-bottom:1em; Heading 2 } 12px × 2 × 1.5 = 36px = 2 grids/line 12px × 3 × 1 = 36px = 2 grids/line 12px × 3 × 0.5 = 18px = 1 grid margin
    70. 70. TYPOGRAPHIC GRIDS vertical rhythm Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero default font 12px/18px egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor. Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi. Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue h3 { non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida ! font-size:1.5em; ultrices. ! line-height:1; ! margin-bottom:1em; Heading 2 } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. 12px × 2 × 1.5 = 36px = 2 grids/line 12px × 2 × 0.75 = 36px = 2 grids/line 12px × 3 × 1 = 18px = 1 grid margin 12px × 3 × 0.5 = 18px = 1 grid margin
    71. 71. TYPOGRAPHIC GRIDS vertical rhythm Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero default font 12px/18px egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor. Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi. Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida ultrices. Heading 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. 12px × 23× 1.5= 36px = 22grids/line 12px × × 1 = 36px = grids/line 12px × 2 × 0.75= 18px = 1 grid margin 12px × 3 × 0.5 = 18px = 1 grid margin
    72. 72. TYPOGRAPHIC GRIDS vertical rhythm Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero default font 12px/18px egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor. Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi. Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida ultrices. Heading 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Heading 3 12px × 1.5 × 1 = 18px = 1 grids/line 12px × 23× 1.5= 36px = 22grids/line 12px × × 1 = 36px = grids/line 12px × 2 × 0.75= 18px = 1 grid margin 12px × 3 × 0.5 = 18px = 1 grid margin
    73. 73. TYPOGRAPHIC GRIDS vertical rhythm Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero default font 12px/18px egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor. Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi. Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida ultrices. Heading 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Heading 3 12px × 1.5 × 1 = 18px = 1 grids/line Cras posuere lobortis libero egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam, 12px ×× 23× 1.5= 18px ==22grids/line 12px × × 1 ==36px = 1 grid margin 12px 1.5 × 1 36px grids/line iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor. 12px × 2 × 0.75= 18px = 1 grid margin 12px × 3 × 0.5 = 18px = 1 grid margin
    74. 74. TYPOGRAPHIC GRIDS
    75. 75. TYPOGRAPHIC GRIDS
    76. 76. TYPOGRAPHIC GRIDS
    77. 77. TYPOGRAPHIC GRIDS
    78. 78. TYPOGRAPHIC GRIDS
    79. 79. TYPOGRAPHIC GRIDS h1, h2, h3, h4, h5, h6 { position: relative; } h1, h2 { line-height: 36px; margin-bottom: 18px; } h1, h2, h3, h4 { margin-top: 18px; } h3, h4, h5, h6 { line-height: 18px; } h1 { font-size: 36px; top: 5px; } h2 { font-size: 28px; top: 8px; } h3 { font-size: 22px; top: 1px; } h4 { font-size: 18px; top: 2px; } h5 { font-size: 15px; top: 4px; } h6 { font-size: 13px; top: 5px; }
    80. 80. TYPOGRAPHIC GRIDS h1, h2, h3, h4, h5, h6 { position: relative; } h1, h2 { line-height: 36px; margin-bottom: 18px; } h1, h2, h3, h4 { margin-top: 18px; } h3, h4, h5, h6 { line-height: 18px; } h1 { font-size: 36px; top: 5px; } h2 { font-size: 28px; top: 8px; } h3 { font-size: 22px; top: 1px; } h4 { font-size: 18px; top: 2px; } h5 { font-size: 15px; top: 4px; } h6 { font-size: 13px; top: 5px; }
    81. 81. TYPOGRAPHIC GRIDS ideal leading is font and design dependent Helvetica vs Calibri http://forabeautifulweb.com/blog/about/lead_weight
    82. 82. TYPOGRAPHIC GRIDS ideal leading is font and design dependent Helvetica vs Times http://forabeautifulweb.com/blog/about/lead_weight
    83. 83. TYPOGRAPHIC GRIDS ideal leading is font and design dependent Helvetica vs Helvetica http://forabeautifulweb.com/blog/about/lead_weight
    84. 84. TYPOGRAPHIC GRIDS
    85. 85. http://www.flickr.com/photos/therefore/18542525/ CSS PRE-FAB
    86. 86. CSS PRE-FAB ready-made styles for documents made of prescribed components
    87. 87. CSS PRE-FAB
    88. 88. CSS PRE-FAB <ul class="v6-9-9"> ! <li class="a-magazine span-6"> content </li> ! <li class="a-subscribe span-9"> content </li> ! <li class="a-shop span-9 last"> content </li> </ul> http://forabeautifulweb.com/blog/about/an_appropriate_use_for_css_frameworks/
    89. 89. CSS PRE-FAB <ul class="v9-6-9"> ! <li class="a-magazine span-9"> content </li> ! <li class="a-subscribe span-6"> content </li> ! <li class="a-shop span-9 last"> content </li> </ul> http://forabeautifulweb.com/blog/about/an_appropriate_use_for_css_frameworks/
    90. 90. CSS PRE-FAB <ul class="v9-9-6"> ! <li class="a-magazine span-9"> content </li> ! <li class="a-subscribe span-9"> content </li> ! <li class="a-shop span-6 last"> content </li> </ul> http://forabeautifulweb.com/blog/about/an_appropriate_use_for_css_frameworks/
    91. 91. CSS PRE-FAB
    92. 92. http://www.flickr.com/photos/bobalong/3410454292/ CSS ABSTRACTION
    93. 93. CSS ABSTRACTION “Adding any form of macros or additional scopes and indirections, including symbolic constants, is not just redundant, but changes CSS in ways that make it unsuitable for its intended audience. Given that there is currently no alternative to CSS, these things must not be added.” — Bert Bos, Why “variables” in CSS are harmful
    94. 94. CSS ABSTRACTION
    95. 95. SERVER-SIDE FRAMEWORKS
    96. 96. SERVER-SIDE FRAMEWORKS !sitepoint_bg = #036 !sitepoint_fg = #F60 #header background-color= !sitepoint_bg a:link color= !sitepoint_fg a:visited color= !sitepoint_fg - #830 @import blueprint.css !blueprint_grid_columns = 16 !blueprint_grid_width = 40px !blueprint_grid_margin = 20px +blueprint-grid #container +container #header +column(16)
    97. 97. SERVER-SIDE FRAMEWORKS sitepoint_bg = #036 sitepoint_fg = #F60 #header: background-color: $sitepoint_bg a:link color: $sitepoint_fg a:visited color: $sitepoint_fg - #830
    98. 98. SERVER-SIDE FRAMEWORKS @constants { @grid { sitepoint_bg:#036; column-count:16; sitepoint_fg:#F60; column-width:40; } left-gutter-width:10; right-gutter-width:10; #header { unit:px; background-color:!sitepoint_bg; } a:link, a:visited { #container { color:!sitepoint_fg; +container; } } } #header { +columns(16); }
    99. 99. SERVER-SIDE FRAMEWORKS
    100. 100. THREE QUESTIONS
    101. 101. THREE QUESTIONS
    102. 102. THREE QUESTIONS What do CSS frameworks do? How do I choose a CSS framework? Are CSS frameworks pure evil?
    103. 103. THREE QUESTIONS
    104. 104. FINAL THOUGHTS
    105. 105. FINAL THOUGHTS
    106. 106. FINAL THOUGHTS Combine
    107. 107. FINAL THOUGHTS Combine Strip http://www.sitepoint.com/dustmeselectors/
    108. 108. FINAL THOUGHTS Combine Strip http://www.sitepoint.com/dustmeselectors/
    109. 109. FINAL THOUGHTS Combine Strip http://www.sitepoint.com/dustmeselectors/ Shrink http://floele.flyspray.org/csstidy/
    110. 110. FINAL THOUGHTS Combine Strip http://www.sitepoint.com/dustmeselectors/ Shrink http://floele.flyspray.org/csstidy/ (or don’t serve it yourself)
    111. 111. FINAL THOUGHTS
    112. 112. FINAL THOUGHTS training wheels
    113. 113. FINAL THOUGHTS training wheels learning CSS without that “ugly first page”
    114. 114. FINAL THOUGHTS training wheels learning CSS without that “ugly first page” See: Object Oriented CSS http://north.webdirections.org/news/object-oriented-css-the-video
    115. 115. FINAL THOUGHTS
    116. 116. FINAL THOUGHTS when all you have is a hammer…
    117. 117. FINAL THOUGHTS when all you have is a hammer… think outside the framework
    118. 118. FINAL THOUGHTS
    119. 119. THANKS!

    ×