CSS is easy, one can learn its syntax, properties and selectors in a day but, can you master it in weeks? I have not been able to do so yet and that is why most of the time rely on frameworks like blueprint and 960, but when I don’t use a framework to build my site I have problems with IE. Luckily for me I found a nice little CSS builder from the YUI library.
This CSS grid builder has a user interface with which you can make a CSS layout in minutes. I still like the frameworks better though, but the only problem I see in the frameworks I mentioned above is that you cannot make liquid layouts unlike with this builder.
This is what the builder looks like.
…I guess I still need the talent to design, there is nothing that can help me with that. Here is the code for those who like this layout and did I mention you do not have to download anything since the stylesheet is linked to the source? and of course it also works with IE (crossed fingers).
<!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="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
</head>
<body>
<div id="doc2" class="yui-t1">
<div id="hd"><h1>YUI: CSS Grid Builder</h1></div>
<div id="bd">
<div id="yui-main">
<div class="yui-b"><div class="yui-gc">
<div class="yui-u first">
<!-- YOUR DATA GOES HERE -->
</div>
<div class="yui-u">
<!-- YOUR DATA GOES HERE -->
</div>
</div>
<div class="yui-gc">
<div class="yui-u first">
<!-- YOUR DATA GOES HERE -->
</div>
<div class="yui-u">
<!-- YOUR DATA GOES HERE -->
</div>
</div>
<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>