Downloaded 52 times
Uploaded byGarrison Locke
CSS Frameworks
This document discusses CSS frameworks and their benefits. It explains that CSS frameworks provide resets to normalize browser defaults, base stylesheets for typography, and grid systems for layouts. Frameworks help eliminate cross-browser issues, provide reusable and flexible designs, and improve efficiency. Popular frameworks include 960gs, Blueprint, CSScaffold, and YUI, each with their own features like grids builders, source order independence, and browser support. The document advocates using a framework to improve the development process.
![Getting Started with Apache Spark: Big Data Made Simple [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/apachesparkgettingstarted-260203175547-8361bcc3-thumbnail.jpg?width=640&height=640&fit=bounds)
CSS Frameworks
- 1.
- 2. CSS Frameworks Garrison Locke 1.April.2010 - No Foolin’
- 3. What are CSSFrameworks? CSS Resets Base Stylesheets (Typography) Layout / Grid Systems
- 4. Why use aframework? Replace table-based layouts if you’re still using them Eliminate cross-browser rendering issues Generic and Reusable Site agnostic Flexible
- 5.
- 6.
- 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. Browser Support A-Grade Browsers C-Grade Browsers IE < 6 • Safari < 3 • Firefox < 2 • Opera < 9.5 • Netscape < 8
- 9. Graded Browser Support Abroader 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. 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. Hacks are Obnoxious #header{padding: 2em; border: 0.5em; width: 15em; voice- family: ""}""; voice- family:inherit; width: 10em}
- 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. Not General Purpose Willyour 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. Inefficiency Do you minifyor otherwise compress your layouts? How many non-essential or non-layout related declarations are there? Duplicate declarations?
- 15. SEO Optimization The orderof content in the page can matter. Is your current layout system source-order independent?
- 16.
- 17. Parts of aCSS Framework CSS Reset Base Stylesheet (Typography) Layout / Grid System
- 18. Reset: Removing IE’snonsense
- 19. Reset, continued Eliminate discrepanciesacross browsers Your CSS becomes predictable Essentially zeroes out the default browser styles
- 20. Base: all yoursare belong to us
- 21. Base, continued Applies aconsistent 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. Grids: What theinternet sees
- 23. Grids, continued Like printmedia, 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.
- 25.
- 26. 960gs continued Open source Layoutbuilder Source order independent A-Grade Browser Support
- 27.
- 28. Blueprint Open source Reset, grids,form styles, print styles Plugins for buttons, tabs, and sprites A-Grade Browser Support
- 29. csscaffold PHP Constants Mixins Nested Selectors Expressions Caching &gzipping Extendable Grids with layout plugin
- 30. YUI CSS Tools Opensource 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.
- 32.
- 33. In Conclusion... Pick somethingand use it
- 34.
- 35. Thanks! garrison_locke@ncsu.edu @gplocke
Editor's Notes
- #4 we&#x2019;re going to talk more about these later
- #5 CSS encourages the use of HTML that describes what content is about, not what it should look like. The semantic web
- #9 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.
- #10 What Does &#x201C;Support&#x201D; 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)
- #18 a framework can contain all or part of these. the core piece is the grid / layout system.
- #30 Mixins are groups of properties and selectors you can assign to other selectors. Can add parameters, conditionals and nested mixins.
- #31 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)