posted on
Sunday, January 04, 2009 8:00 AM
A list apart and Smashing magazine talked about CSS framework, but an article is just words but using it is different.
So, I needed quickly (strange thing.... never happen!) to start working on a grid of a web application: this is the real great help of a framework, it helps a fast start.
In this situation I used the framework inside Dreamweaver CS3 and I chose a grid, I put the bases of my skin and during the development of whole interface I changed step by step the original template. At the end Nothing of the original grid survived.
Why? Because it's not simple to work on a code not written by you. You have your own way to organized things and named them.
In my opinion the biggest problem in using a framework, is that are if you are used to code it's easy and fast to customize it, otherwise it's a loss of time to understand how it works. It' s very important to understand which is best for us and the one that we are most confident in.
I don't like to work with "alien" code, I think it is common for the most webdesigner.
In my opinion the best way to work is to create a personal framework, witch reflects our experience, but not many people can do it or have the time to do it. Furthermore framework developed by people that put all their effort in it are more flexible and extensible than the ones build based only on our needs.
But sometimes I used framework to begin a project.
For a little project with my husband I used the YUI grid (http://developer.yahoo.com/yui/ - http://developer.yahoo.com/yui/grids/).
It's a very useful because has a lot of possibilities of grids and it also has a online grid generator to help fast start, but I think it's better clean the code from the classes that will not use...
Here an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Base Page</title>
<link rel="stylesheet" href="..../reset-fonts-grids/reset-fonts-grids.css" type="text/css">
</head>
<body>
<div id="doc" class="yui-t3">
<div id="hd"><h1>YUI: CSS Grid Builder</h1></div>
<div id="bd">
<div id="yui-main">
<div class="yui-b"><div class="yui-g">
<!-- YOUR DATA GOES HERE -->
</div>
</div>
</div>
<div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div>
</div>
<div id="ft">Footer is here.</div>
</div>
</body>
</html>
CSS:
#doc,.yui-t3{margin:auto;
text-align:left;width:57.69em;
*width:56.25em;min-width:750px;}
#yui-main .yui-b{position:static;}
#yui-main .yui-b{position:static;}
.yui-gb .yui-u,.yui-g{float:right;}
There is an interesting feature called Standard Nesting Grid that makes it possible to nest grids one inside another thus making possible to have an infinite number of grids.
I think that I'll test it :)
Technorati tags: CSS, XHTML, frameworks, YUI, Dreamweaver