Using a CSS Framework

8,907 views

Published on

Using a CSS framework can allow you to speed up your development time, normalize your code base, and avoid some common browser bugs. In this talk I will discuss when it is appropriate to use a framework, potential pitfalls of common frameworks, how the Yahoo User Interface (YUI) Grids system has been implemented in the default installation of the VuFind software, and demonstrate the creation of a 3 column CSS layout from scratch in under 5 minutes.

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

No Downloads
Views
Total views
8,907
On SlideShare
0
From Embeds
0
Number of Embeds
5,974
Actions
Shares
0
Downloads
97
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Using a CSS Framework

  1. 1. Using a CSS Framework or How to spend less time making CSS layouts and more time at the Tugboat Brewpub Chris Barr, Villanova University
  2. 2. Play along at home. http://vufind.org/demo/css/layout.css
  3. 3. Framework <ul><li>“a set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules that can be reused.” </li></ul>
  4. 4. Why we use a CSS Framework? <ul><li>Normalize code base </li></ul><ul><li>Well documented </li></ul><ul><li>Browser compliance (with some hacks baked in) </li></ul><ul><li>Easily create multiple layouts </li></ul><ul><li>We’ve got better things to do than finding novel ways of creating columns </li></ul>
  5. 5. Yahoo User Interface Library
  6. 6. Microsoft? User Interface Library
  7. 7. What we like about YUI <ul><li>4 standard size layouts out of the box </li></ul><ul><li>Ems based (nice zoom layouts) </li></ul><ul><li>Source order independence </li></ul><ul><li>A-grade browser compliance </li></ul><ul><li>BSD License </li></ul>
  8. 8. The YUI CSS Files <ul><li>Reset.css </li></ul><ul><li>Fonts.css </li></ul><ul><li>Grids.css </li></ul><ul><li>And a helper… base.css </li></ul>
  9. 16. Let’s play!

×