File Manager
<!doctype html>
<html>
<head>
<title>Grid Demo</title>
<link href="../css/style.css" media="screen" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
margin: 0;
padding: 0;
font-size: 12px;
font-family: sans-serif
}
p {
margin: 5px 0
}
.container div p {
background: #eee
}
.container div p {
border: 1px dotted #ccc;
padding: 10px;
}
h2 {
color: #222;
margin: 0;
padding: 0
}
ul, ul li {
margin: 0;
padding: 0;
list-style: none
}
ul {
background: #eee;
border: 1px dotted #ccc
}
ul li {
padding-left: 15px
}
</style>
</head>
<body>
<div class="container c_full cf">
<h2 class="grid_12 p_top_30 p_bottom_30">Demo 12 Column Fluid Grid usage</h2>
<p class="grid_12">This demo page helps you to visually see behaviour of each class for the Grid System.<br />
It is intended to Help Module Developers having easier life aligning different columns in their Module interface. Additionaly to classes used in this demo there are also different margins and paddings available (for example m_top_5 = margin top 5 pixel).
</p>
<div class="grid_3 m_top_10 m_bottom_10 cf">
<ul class="p_top_10 p_bottom_10">
<li>m_top_5</li>
<li>m_top_10</li>
<li>m_top_15</li>
<li>m_top_25</li>
<li>m_top_30</li>
<li>m_top_35</li>
<li>m_top_45</li>
<li>m_top_60</li>
<li>m_top_90</li>
<li>m_top_120</li>
</ul>
</div>
<div class="grid_3 m_top_10 m_bottom_10 cf">
<ul class="p_top_10 p_bottom_10">
<li>m_bottom_5</li>
<li>m_bottom_10</li>
<li>m_bottom_15</li>
<li>m_bottom_25</li>
<li>m_bottom_30</li>
<li>m_bottom_35</li>
<li>m_bottom_45</li>
<li>m_bottom_60</li>
<li>m_bottom_90</li>
<li>m_bottom_120</li>
</ul>
</div>
<div class="grid_3 m_top_10 m_bottom_10 cf">
<ul class="p_top_10 p_bottom_10">
<li>p_top_5</li>
<li>p_top_10</li>
<li>p_top_15</li>
<li>p_top_25</li>
<li>p_top_30</li>
<li>p_top_35</li>
<li>p_top_45</li>
<li>p_top_60</li>
<li>p_top_90</li>
<li>p_top_120</li>
<li>p_top_130</li>
</ul>
</div>
<div class="grid_3 m_top_10 m_bottom_10 cf">
<ul class="p_top_10 p_bottom_10 omega">
<li>p_bottom_5</li>
<li>p_bottom_10</li>
<li>p_bottom_15</li>
<li>p_bottom_25</li>
<li>p_bottom_30</li>
<li>p_bottom_35</li>
<li>p_bottom_45</li>
<li>p_bottom_60</li>
<li>p_bottom_90</li>
<li>p_bottom_120</li>
<li>p_bottom_130</li>
</ul>
</div>
<div class="grid_12">
<p>12 grid</p>
</div>
<div class="grid_1">
<p>1 grid</p>
</div>
<div class="grid_11">
<p>11 grid</p>
</div>
<div class="grid_2">
<p>2 grid</p>
</div>
<div class="grid_10">
<p>10 grid</p>
</div>
<div class="grid_3">
<p>3 grid</p>
</div>
<div class="grid_9">
<p>9 grid</p>
</div>
<div class="grid_4">
<p>4 grid</p>
</div>
<div class="grid_8">
<p>8 grid</p>
</div>
<div class="grid_5">
<p>5 grid</p>
</div>
<div class="grid_7">
<p>7 grid</p>
</div>
<div class="grid_6">
<p>6 grid</p>
</div>
<div class="grid_6">
<p>6 grid</p>
</div>
<div class="grid_1 suffix_11">
<p>1 grid</p>
</div>
<div class="grid_1 prefix_1 suffix_10">
<p>1 grid</p>
</div>
<div class="grid_1 prefix_2 suffix_9">
<p>1 grid</p>
</div>
<div class="grid_1 prefix_3 suffix_8">
<p>1 grid</p>
</div>
<div class="grid_1 prefix_4 suffix_7">
<p>1 grid</p>
</div>
<div class="grid_1 prefix_5 suffix_6">
<p>1 grid</p>
</div>
<div class="grid_1 prefix_6 suffix_5">
<p>1 grid</p>
</div>
<div class="grid_1 prefix_7 suffix_4">
<p>1 grid</p>
</div>
<div class="grid_1 prefix_8 suffix_3">
<p>1 grid</p>
</div>
<div class="grid_1 prefix_9 suffix_2">
<p>1 grid</p>
</div>
<div class="grid_1 prefix_10 suffix_1">
<p>1 grid</p>
</div>
<div class="grid_1 prefix_11">
<p>1 grid</p>
</div>
</div>
</body>
</html>
File Manager Version 1.0, Coded By Lucas
Email: hehe@yahoo.com