Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
executable file 397 lines (358 sloc) 20.5 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="stylesheets/fluid.gs.css" type="text/css" media="screen" title="no title" charset="utf-8">
<!--[if lt IE 8]><link rel="stylesheet" href="stylesheets/fluid.gs.lt_ie8.css" type="text/css" media="screen" title="no title" charset="utf-8"><![endif]-->
<link rel="stylesheet" href="stylesheets/demo.css" type="text/css" media="screen" title="no title" charset="utf-8">
<title>Fluid Grid System</title>
</head>
<body>
<div class="fluid_grid_layout">
<h1>Equal width columns (6 columns)</h1>
<div class="six_column section">
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
</div>
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
</div>
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
</div>
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
</div>
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
</div>
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
</div>
</div>
<div class="six_column section">
<div class="two column">
<div class="column_content">
<strong>Two column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
</div>
<div class="two column">
<div class="column_content">
<strong>Two column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="two column">
<div class="column_content">
<strong>Two column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="six_column section">
<div class="three column">
<div class="column_content">
<strong>Three column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="three column">
<div class="column_content">
<strong>Three column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
<div class="fluid_grid_layout">
<h1>Varying width columns (6 columns)</h1>
<div class="six_column section">
<div class="four column">
<div class="column_content">
<strong>Four column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="two column">
<div class="column_content">
<strong>Two column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="six_column section">
<div class="two column">
<div class="column_content">
<strong>Two column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="three column">
<div class="column_content">
<strong>Three column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="six_column section">
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<div class="two column">
<div class="column_content">
<strong>Two column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="three column">
<div class="column_content">
<strong>Three column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<h1>Varying width columns (9 columns)</h1>
<div class="nine_column section">
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
</div>
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
</div>
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
</div>
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
</div>
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
</div>
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
</div>
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
</div>
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
</div>
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit
</div>
</div>
</div>
<div class="nine_column section">
<div class="three column">
<div class="column_content">
<strong>Three column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="three column">
<div class="column_content">
<strong>Three column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="three column">
<div class="column_content">
<strong>Three column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="nine_column section">
<div class="four column">
<div class="column_content">
<strong>Four column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="five column">
<div class="column_content">
<strong>Five column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="nine_column section">
<div class="nine column">
<div class="column_content">
<strong>Nine column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="nine_column section">
<div class="seven column">
<div class="column_content">
<strong>Seven column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="two column">
<div class="column_content">
<strong>Two column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
</div>
<div class="nine_column section">
<div class="two column">
<div class="column_content">
<strong>Two column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="seven column">
<div class="column_content">
<strong>Seven column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="nine_column section">
<div class="five column">
<div class="column_content">
<strong>Five column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<div class="two column">
<div class="column_content">
<strong>Two column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="two column">
<div class="column_content">
<strong>Two column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
<h1>Varying width columns (12 columns)</h1>
<div class="twelve_column section">
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet elit
</div>
</div>
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet elit
</div>
</div>
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet elit
</div>
</div>
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet elit
</div>
</div>
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet elit
</div>
</div>
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet elit
</div>
</div>
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet elit
</div>
</div>
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet elit
</div>
</div>
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet elit
</div>
</div>
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet elit
</div>
</div>
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet elit
</div>
</div>
<div class="one column">
<div class="column_content">
<strong>One column</strong> Lorem ipsum dolor sit amet elit
</div>
</div>
</div>
<div class="twelve_column section">
<div class="two column">
<div class="column_content">
<strong>Two column</strong> Lorem ipsum dolor sit amet elit
</div>
</div>
<div class="two column">
<div class="column_content">
<strong>Two column</strong> Lorem ipsum dolor sit amet elit
</div>
</div>
<div class="two column">
<div class="column_content">
<strong>Two column</strong> Lorem ipsum dolor sit amet elit
</div>
</div>
<div class="six column">
<div class="column_content">
<strong>Six column</strong> Lorem ipsum dolor sit amet elit
</div>
</div>
</div>
<div class="twelve_column section">
<div class="four column">
<div class="column_content">
<strong>Four column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="four column">
<div class="column_content">
<strong>Four column</strong> Lorem ipsum dolor sit amet elit
</div>
</div>
<div class="two column">
<div class="column_content">
<strong>Two column</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="two column">
<div class="column_content">
<strong>Two column</strong> Lorem ipsum dolor sit amet elit
</div>
</div>
</div>
</div>
</body>
</html>