cssgrids-units-source.mustache revision 8817197b3e98d94ab2ade1f70820496f4d5e88c2
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny<html>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny<head>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <meta http-equiv="content-type" content="text/html; charset=utf-8">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <title>YUI 3.x: CSS Grids Units Example</title>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <link rel="stylesheet" href="{{yuiBuildUrl}}/cssreset/reset.css" type="text/css">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <link rel="stylesheet" href="{{yuiBuildUrl}}/cssfonts/fonts.css" type="text/css">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <link rel="stylesheet" href="{{yuiBuildUrl}}/cssgrids/grids.css" type="text/css">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny<style>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zelenydiv.yui3-g {
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny text-align:center;
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny vertical-align:middle;
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny}
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zelenybody {
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny margin-left: 10px; /* left gutter */
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny}
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny.content {
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny background:#424242;
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny border:dotted #999;
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny border-width:0 2px 2px;
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny color:#fff;
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny margin-right:10px; /* "column" gutters */
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny padding:5px 2px;
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny}
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny</style>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny</head>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny<body>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny<div class="yui3-g">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-1-2">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">1/2</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-1-2">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">1/2</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny<div class="yui3-g">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-1-4">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">1/4</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-1-4">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">1/4</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-1-4">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">1/4</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-1-4">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">1/4</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny<div class="yui3-g">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-3-4">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">3/4</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-1-4">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">1/4</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny<div class="yui3-g">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-1-3">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">1/3</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-1-3">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">1/3</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-1-3">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">1/3</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny<div class="yui3-g">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-1-3">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">1/3</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-2-3">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">2/3</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny<div class="yui3-g">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-1-5">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">1/5</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-2-5">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">2/5</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-2-5">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">2/5</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny<div class="yui3-g">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-3-5">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">3/5</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-2-5">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">2/5</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny<div class="yui3-g">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-1-6">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">1/6</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-1-6">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">1/6</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-1-6">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">1/6</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-1-6">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">1/6</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-1-6">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">1/6</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-1-6">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">1/6</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny<div class="yui3-g">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-1-6">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">1/6</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-5-6">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">5/6</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny<div class="yui3-g">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-1-8">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">1/8</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-3-8">
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="content">3/8</div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny </div>
29be7d76c949b82350c7603cfd362a1fcb47eb1bJan Zeleny <div class="yui3-u-3-8">
<div class="content">3/8</div>
</div>
<div class="yui3-u-1-8">
<div class="content">1/8</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-3-8">
<div class="content">3/8</div>
</div>
<div class="yui3-u-5-8">
<div class="content">5/8</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-7-8">
<div class="content">7/8</div>
</div>
<div class="yui3-u-1-8">
<div class="content">1/8</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-1-4">
<div class="content">1/4</div>
</div>
<div class="yui3-u-1-2">
<div class="content">1/2</div>
</div>
<div class="yui3-u-1-4">
<div class="content">1/4</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-1-8">
<div class="content">1/8</div>
</div>
<div class="yui3-u-1-2">
<div class="content">1/2</div>
</div>
<div class="yui3-u-1-8">
<div class="content">1/8</div>
</div>
<div class="yui3-u-1-4">
<div class="content">1/4</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-1-12">
<div class="content">1/12</div>
</div>
<div class="yui3-u-5-12">
<div class="content">5/12</div>
</div>
<div class="yui3-u-5-12">
<div class="content">5/12</div>
</div>
<div class="yui3-u-1-12">
<div class="content">1/12</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-7-12">
<div class="content">7/12</div>
</div>
<div class="yui3-u-5-12">
<div class="content">5/12</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-11-12">
<div class="content">11/12</div>
</div>
<div class="yui3-u-1-12">
<div class="content">1/12</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-1-24">
<div class="content">1/24</div>
</div>
<div class="yui3-u-5-24">
<div class="content">5/24</div>
</div>
<div class="yui3-u-7-24">
<div class="content">7/24</div>
</div>
<div class="yui3-u-11-24">
<div class="content">11/24</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-17-24">
<div class="content">17/24</div>
</div>
<div class="yui3-u-7-24">
<div class="content">7/24</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-19-24">
<div class="content">19/24</div>
</div>
<div class="yui3-u-5-24">
<div class="content">5/24</div>
</div>
</div>
<div class="yui3-g">
<div class="yui3-u-23-24">
<div class="content">23/24</div>
</div>
<div class="yui3-u-1-24">
<div class="content">1/24</div>
</div>
</div>
</body>
</html>