CSS Frameworks
•Als KEY, PDF herunterladen•
2 gefällt mir•484 views
The slides from my talk on an overview of CSS Frameworks.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Andere mochten auch
Ähnlich wie CSS Frameworks
Ähnlich wie CSS Frameworks (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
CSS Frameworks
- 2. CSS Frameworks Garrison Locke 1.April.2010 - No Foolin’
- 3. What are CSS Frameworks? CSS Resets Base Stylesheets (Typography) Layout / Grid Systems
- 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. From This
- 6. To This
- 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 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. 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 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. Inefficiency Do you minify or otherwise compress your layouts? How many non-essential or non-layout related declarations are there? Duplicate declarations?
- 15. SEO Optimization The order of content in the page can matter. Is your current layout system source-order independent?
- 17. Parts of a CSS Framework CSS Reset Base Stylesheet (Typography) Layout / Grid System
- 18. Reset: Removing IE’s nonsense
- 19. Reset, continued Eliminate discrepancies across browsers Your CSS becomes predictable Essentially zeroes out the default browser styles
- 20. Base: all yours are belong to us
- 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. Grids: What the internet sees
- 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
- 25. 960gs
- 26. 960gs continued Open source Layout builder Source order independent A-Grade Browser Support
- 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 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. Grids Builder
- 33. In Conclusion... Pick something and use it
- 35. Thanks! garrison_locke@ncsu.edu @gplocke
Hinweis der Redaktion
- we&#x2019;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 &#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)
- 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)