Using a CSS Framework
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Using a CSS Framework

on

  • 10,787 views

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 ...

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.

Statistics

Views

Total Views
10,787
Views on SlideShare
4,855
Embed Views
5,932

Actions

Likes
5
Downloads
96
Comments
0

12 Embeds 5,932

http://vufind.org 5742
http://www.vufind.org 78
http://code4lib.org 32
http://translate.googleusercontent.com 30
https://vufind.org 15
http://www.slideshare.net 10
http://www.code4lib.org 9
http://153.104.171.44 9
http://vufind-org.github.io 4
http://209.85.195.132 1
http://webcache.googleusercontent.com 1
http://vufind.org. 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Using a CSS Framework Presentation Transcript

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