YUI Grid CSS framework for your web layouts
Have you ever used a CSS Framework to create layouts for your website, if not then you need to take a look at Yahoo Grids. Read on to find what it is.
Designing a web layout can sometimes be a real pain. How many times have you stared at your computer screen trying to decipher as to how to continue coding a PSD to a valid XHTML code ? Either ways, if you are decoding a PSD or just creating a simple 2 coloumn or 3 coloumn layout, you need to take a look at Yahoo Grids CSS Framework.
What is Yahoo User Interface Grids CSS Framework ?
Well for starters it is a good CSS framework to create a nice layout (liquid or fixed) with a variety of options. You should check their dev site. WordPress Codex itself is an example of Yahoo Grids CSS Framework.
Examples of what all is possible using YUI Grids CSS can be seen here.
Also don`t forget to check their neat Website Layout Builder.
If you want the developer version of the CSS, yui-grids.css (25)
If you want the minimized version of the CSS, yui-grid-min.css (19)
How can I use it ?
Simple, a CSS Framework is basically a set of classes that can be used in your HTML with ease. The different types of layouts are given in the following code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Doc Sizes</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/grids/grids-min.css">
<style>
div { border:2px solid #ccc; margin:0.5em 0; height:100px;}
</style>
</head>
<body>
<!-- #doc = 750px width, centered-->
<div id="doc"></div>
<!-- #doc2 = 950px width, centered -->
<div id="doc2"></div>
<!-- #doc3 = 100% width -->
<div id="doc3"></div>
<!-- #doc4 = 974px width, centered -->
<div id="doc4"></div>
</body>
</html>
For more information, YUI has got an amazing set of documentation on how it can be used. Do check it out https://developer.yahoo.com/yui/grids/.
Enjoyed the Article ?
0 Responses to “YUI Grid CSS framework for your web layouts”