CSS Frameworks


Published on

The slides from my talk on an overview of CSS Frameworks.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

  • we’re going to talk more about these later
  • CSS encourages the use of HTML that describes what content is about, not what it should look like. The semantic web

  • C-grade - just means that these are browsers from which CSS and Javascript should be withheld.

    Yahoo recommends testing your C-Grade experience in one of the above browsers or in a modern browser with JavaScript and CSS disabled.

    Graded browser support is a QA philosophy, not a report card on the quality of popular browsers.
  • What Does “Support” Mean? We have to provide support for all *most* browsers

    Support does not mean that everybody gets the same thing. Expecting two users using different browser software to have an identical experience fails to embrace or acknowledge the heterogeneous essence of the Web.

    In fact, requiring the same experience for all users creates an artificial barrier to participation.

    Graceful degradation prioritizes the presentation. Progressive enhancement puts content at the center.
    -An accessible bare-bones core and then add functionality based on browser capability ensures everyone can
    have a valuable experience. (data table -> awesome graph with javascript)

  • a framework can contain all or part of these. the core piece is the grid / layout system.

  • Mixins are groups of properties and selectors you can assign to other selectors. Can add parameters, conditionals and nested mixins.
  • reset-fonts-grids file is 8KBARIA roles - enhance the accessibility of screen readers to better communicate the intended purpose of a section.7 of them - application, banner, complementary, contentinfo, main, navigation, searchHTML 5 tags can help with this also (nav, section, article, header, aside, footer, figure, dialog, time, progress, mark, output)

  • CSS Frameworks

    1. 1. Go Vote!! http://ncsuwebdev.ning.com/page/meetups-1
    2. 2. CSS Frameworks Garrison Locke 1.April.2010 - No Foolin’
    3. 3. What are CSS Frameworks? CSS Resets Base Stylesheets (Typography) Layout / Grid Systems
    4. 4. Why use a framework? Replace table-based layouts if you’re still using them Eliminate cross-browser rendering issues Generic and Reusable Site agnostic Flexible
    5. 5. From This
    6. 6. To This
    7. 7. The Problems Cross-browser rendering (there are a lot of browsers) Hacks Regressive Copy + Paste Issues Not General Purpose Inefficiency SEO Optimization & Source-Order Dependence
    8. 8. Browser Support A-Grade Browsers C-Grade Browsers IE < 6 • Safari < 3 • Firefox < 2 • Opera < 9.5 • Netscape < 8
    9. 9. Graded Browser Support A broader and more reasonable definition of “support.” The notion of “grades” of support. Availability and accessibility of content should be the key priority. Progressive Enhancement vs. Graceful Degradation
    10. 10. Cross-Browser Rendering Browsers have differing defaults Not accounting for these can cause varying degrees of problems No definitive declaration of your styling intentions Do your layouts accommodate all A-Grade browsers?
    11. 11. Hacks are Obnoxious #header {padding: 2em; border: 0.5em; width: 15em; voice- family: ""}""; voice- family:inherit; width: 10em}
    12. 12. Regressive Copy + Paste Issues Copying a layout for a new site from an old one Which old layout did you choose? Have you made improvements to that layout in some other site? Does that stylesheet contain only layout related declarations?
    13. 13. Not General Purpose Will your old layout work for any new site? Does it need some tweaking? What if you only need two columns instead of three? Create a new layout, hack the old one, or go find another old site?
    14. 14. Inefficiency Do you minify or otherwise compress your layouts? How many non-essential or non-layout related declarations are there? Duplicate declarations?
    15. 15. SEO Optimization The order of content in the page can matter. Is your current layout system source-order independent?
    16. 16. The Solution: Frameworks
    17. 17. Parts of a CSS Framework CSS Reset Base Stylesheet (Typography) Layout / Grid System
    18. 18. Reset: Removing IE’s nonsense
    19. 19. Reset, continued Eliminate discrepancies across browsers Your CSS becomes predictable Essentially zeroes out the default browser styles
    20. 20. Base: all yours are belong to us
    21. 21. Base, continued Applies a consistent set of defaults So you don’t have to specify a style for every single tag yourself Helps reduce the size of the rest of your stylesheets
    22. 22. Grids: What the internet sees
    23. 23. Grids, continued Like print media, web pages are usually laid out in boxes. Create really complex layouts with very little effort Very easily specify the various sections of your layout
    24. 24. Many Options 960gs Blueprint csscaffold YUI 2.0
    25. 25. 960gs
    26. 26. 960gs continued Open source Layout builder Source order independent A-Grade Browser Support
    27. 27. 960gs Layout Builder
    28. 28. Blueprint Open source Reset, grids, form styles, print styles Plugins for buttons, tabs, and sprites A-Grade Browser Support
    29. 29. csscaffold PHP Constants Mixins Nested Selectors Expressions Caching & gzipping Extendable Grids with layout plugin
    30. 30. YUI CSS Tools Open source A-Grade browser support Reset, base stylesheet, grids, grids builder Source-order independent at block level Really small footprint Grids builder has support for ARIA landmarks Backed by Yahoo!
    31. 31. Grids Builder
    32. 32. Grids Builder, continued
    33. 33. In Conclusion... Pick something and use it
    34. 34. Links http://developer.yahoo.com/yui/grids/ http://developer.yahoo.com/yui/grids/builder/ http://960.gs/ http://www.blueprintcss.org/ http://wiki.github.com/anthonyshort/csscaffold/
    35. 35. Thanks! garrison_locke@ncsu.edu @gplocke