1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
Working with Cascading Style Sheets is no easy feat. Between browser differences, varying site design requirements and client whims, writing reusable CSS can quickly become a frustrating process. CSS frameworks are one attempt to solve these and other common problems, but they are not without their own controversies.
Purists and those hyper-concerned about semantically valid markup often decry the class names and arbitrary div tags that frameworks seem to encourage.
But for many working in the web design trenches the ability to go from Photoshop comp to working demo site much faster far outweighs the semantic arguments.
There's no question that frameworks can be very helpful, and even if you just use them for prototyping and quick, early drafts they can dramatically speed up your development process.
Sound good? Well here's a quick overview of some of the more popular and helpful frameworks, along with any potential drawbacks.
== General guidelines ==
When using a framework the easiest method is to include the files using and import statement in your HTML headtags. To ensure that your framework remains easy to maintain, update and change, make sure you don't change any of the framework files directly.
Instead, just import a second stylesheet and make you changes there. For instance this code will import a local copy of the BluePrint framework and then a second CSS file which contains all the site-specific rules and overrides:
<pre>
<link rel="stylesheet"
href="http://media.mysite.com/css/blueprint/screen.css"
type="text/css"
media="screen"
charset="utf-8">
<link rel="stylesheet"
href="http://media.mysite.com/css/base.css"
type="text/css"
media="screen"
charset="utf-8">
</pre>
== BluePrintCSS ==
One of the first major frameworks to emerge from the CSS soup, [http://www.blueprintcss.org/ BluePrint] is perhaps best known for its amazing grid layout tools. BluePrint uses class names like <code>span-12</code> to make creating a grid layout much easier. So what would that <code>span-12</code> class do? Consider this HTML:
<pre>
<div class="container">
<div id="header" class="span-24">
Header
</div>
<div class="span-18">
Main content
</div>
<div class="span-6 last">
Sidebar
</div>
</div>
</pre>
By default, BluePrint uses a grid layout that's 950px wide, with 24 columns spanning 30px, and a 10px margin between columns. So we define that overall space with the <code>container</code> class. Everything inside container will now be 950px wide. Now the header gets a <code>span-24</code> class to make sure that it goes all the way across all 24 columns.
Then below that we want to have two columns, our content on the left and our sidebar on the right. So we add the appropriate <code>span-n</code> class names. If you wanted a wider sidebar and narrower main content, you'd just change those class names. Remember, the number in the class name translates to the number of 30px columns that that div will occupy (plus the 10px margins).
The only thing that might be non-obvious is the <code>last</code> class, which simply stops BluePrint from adding the 10px margin to the last column in our layout (since that's the edge of the container anyway, we don't need the margin.
Now what if your layout isn't 950px wide? That's fine, you can adjust the layout width in the file lib/compress.rb. You'll also notice a few other options in that file -- read through the comments to see what else it can do.
Another popular way to change the container size, or adjust the number of columns is to use the [http://kematzy.com/blueprint-generator/ BluePrint CSS Grid Generator], which can output all the necessary changed files you need.
If the class names bother you (they are arguably an example of mixing content and design together, which is not necessarily a good thing), check out the [http://dblogit.com/examples/bpa/ BluePrint CSS Architect] which will parse your XHMTL and generate a BluePrint-like grid using your existing IDs instead of class names.
There's a good bit more to BluePrint including some very nice typography tools, as well as a number of[http://github.com/joshuaclayton/blueprint-css/wikis/plugins plugins] to extend the framework and tailor it to your site.
== Tripoli ==
[http://devkick.com/lab/tripoli/ Tripoli] is not technically, as the main page adamantly points out, a CSS framework. However, while Tripoli may eschew certain aspects of other CSS frameworks, for our purposes we'll just refer to as a framework.
Tripoli started off primarily concerned with fonts and typography. While it has since added some layout tools, we still like it primarily for the gorgeous typography it produces. It also happens to offer full support for just about every browser known to man, including the ancient, seldom seen Internet Explorer 5. If you're looking for a quick and easy way to get great cross-browser font rendering, Tripoli delivers.
The easiest way to get started with Tripoli is to just use the two simple ready-to-go CSS files [http://devkick.com/lab/tripoli/tripoli.simple.css tripoli.simple.css] and [http://devkick.com/lab/tripoli/tripoli.simple.ie.css tripoli.simple.ie.css]. Both are compressed to save on bandwidth and can be included in your HTML just like you would any other stylesheet:
<pre>
<link href="tripoli.simple.css" type="text/css" rel="stylesheet">
<!--[if IE]><link rel="stylesheet" type="text/css" href="tripoli.simple.ie.css"><![endif]-->
</pre>
Now you can build your site using your own markup and layout in a third file, but let Tripoli handle the font rendering and some other default tasks like the ever-popular stylesheet reset.
If you'd like more control when you're developing, download the entire suite and import the raw CSS files into a master style sheet. That way, you can always look into the components and localize conflicts quickly, if necessary.
The main drawback to Tripoli's font handling is that overriding it requires some pretty specific CSS rules. For instance, you may be used to simply declaring a class on a list (call it <code>list</code>) and then styling it with declaration like this: <code>.list {}</code>.
That won't work to override Tripoli's defaults. Instead you need to be more specific to avoid conflicts. In this case you'd want to use: <code>ul.list {}</code>
Using a layout plugin, Tripoli also offers some basic grid options. You won't find anything as flexible as BluePrint, but it does offer a few different basic layouts. The Tripoli [http://devkick.com/lab/tripoli/layout.php layout demo] allows you to play with the possibilities and you can check the source code on that page to see how it works.
== BlueTrip ==
If you're thinking that it would be pretty cool to combine the grid system of BluePrint with the typography of Tripoli, you're not alone. In fact that's exactly what [http://bluetrip.org/ BlueTrip] does (hence the name).
Since BlueTrip is just a modified version of both frameworks discussed above, using it is pretty much exactly the same. Just include the package and the typography elements of Tripoli will be applied and all the grid tools of BluePrint are available.
While BlueTrip is a nice framework in its own right, one of the things we really like about it is that it exemplifies the best way to use CSS frameworks -- take the elements that prove helpful and ditch the rest.
In this case BlueTrip takes the grid layout tools of BluePrint and the typography tools of Tripoli and ignores the rest.
== YUI ==
By far the most complex of the CSS frameworks, Yahoo's system encompasses three main elements, a reset stylesheet, a grid layout tool, similar to BluePrint and a font definitions stylesheet.
Getting started with YUI works much the same as with the others; include the framework base and (optionally) your override stylesheet:
<pre>
<!-- Combo-handled YUI CSS files: -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/reset-fonts-grids/reset-fonts-grids.css">
</pre>
Note that if you're using other YUI tools, like the various JavaScript widgets, there a very handy [http://developer.yahoo.com/yui/articles/hosting/?grids#configure YUI Dependency Configurator] for figuring out the optimum way to load files and which files you need.
Okay, so now we have the framework loaded it's time to pick a layout scheme. Yahoo's system of layouts isn't quite as flexible as BluePrint's, there are no <code>span-n</code> tags (if you're worried about bulking up your HTML, that's a good thing).
Instead Yahoo has some predetermined layouts you can choose from using the [http://developer.yahoo.com/yui/grids/builder/ YUI Grid Builder]. Select from standard widths like 750px, 950px, 974px or the more flexible 100%, which would necessitate some wrapper tags.
You can then add left or right sidebars in standard layouts like 160px or 300px and customize a number of other elements.
Once you have the demo page looking the way you'd like, Just hit the Show Code button and Yahoo will spit out some nicely formatted HTML that can serve as the basis of your page. For more information on YUI's grids, be sure to check out the [http://developer.yahoo.com/yui/grids/#start Grids Overview].
Once the grid elements are set, you can move on to fonts. The [http://developer.yahoo.com/yui/fonts/ YUI Fonts CSS] offers some standardized fonts that work well with all of what Yahoo calls A grade browsers. The A grade ranking applies to all modern, standards-aware browsers, though if you need to support older, less capable browsers there is also a C grade, but unfortunately the font styles don't work with all of those browsers.
Arial is the default font-family for all text (except pre and code) when you use Fonts CSS. All font declarations are in percentages, so if you need to override something, keep that in mind. Yahoo has a [http://developer.yahoo.com/yui/fonts/#using handy chart] showing the percentage equivalent for common pixel sizes.
In some way YUI is bit hard to work with, but once you wrap your head around it, it's every bit as useful and flexible as the others.
== Conclusion ==
As we've seen CSS frameworks can offer a solid foundation on which to build your sites. Even if you just use them to create faster prototypes for clients, there's generally something in frameworks that proves useful to just about everyone.
But don't get the idea that you need to use every element of a framework. It may ruin some of the reuse and upgrading advantages, but feel free to rip out elements of these tools and just take what you need.
In the end you might end up creating your own framework. If you do, and you release into the wild, be sure to add it to this page.
|
