2011-06-07 16:55:30 -04:00
|
|
|
<!doctype html>
|
|
|
|
|
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
|
|
|
|
|
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
|
|
|
|
|
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
|
|
|
|
|
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
|
|
|
|
|
<head>
|
|
|
|
|
|
|
|
|
|
<!-- Basic Page Needs
|
|
|
|
|
================================================== -->
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<title>Demo of 12 & 16 Columns with Offsets.</title>
|
|
|
|
|
<meta name="description" content="">
|
|
|
|
|
<meta name="author" content="">
|
|
|
|
|
<!--[if lt IE 9]>
|
|
|
|
|
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
|
|
|
|
<![endif]-->
|
|
|
|
|
|
|
|
|
|
<!-- Mobile Specific Metas
|
|
|
|
|
================================================== -->
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
|
|
|
|
|
|
|
|
|
|
<!-- CSS
|
|
|
|
|
================================================== -->
|
|
|
|
|
<link rel="stylesheet" href="stylesheets/base.css">
|
|
|
|
|
<link rel="stylesheet" href="stylesheets/skeleton.css">
|
|
|
|
|
<link rel="stylesheet" href="stylesheets/layout.css">
|
|
|
|
|
<style>
|
|
|
|
|
.demo .column, .demo .columns{ background-color: #ddd; -moz-border-radius: 3px; text-align: center; margin-bottom: 10px}
|
|
|
|
|
</style>
|
|
|
|
|
<!-- Favicons
|
|
|
|
|
================================================== -->
|
|
|
|
|
<link rel="shortcut icon" href="images/favicon.ico">
|
|
|
|
|
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
|
|
|
|
|
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
|
|
|
|
|
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Primary Page Layout
|
|
|
|
|
================================================== -->
|
|
|
|
|
|
|
|
|
|
<!-- Delete everything in this .container and get started on your own site! -->
|
|
|
|
|
|
|
|
|
|
<header class="container container-twelve" style="border-bottom: 1px solid #ddd; margin-bottom: 20px;">
|
|
|
|
|
<h1 class="remove-bottom" style="margin-top: 40px">Skeleton Demo</h1>
|
|
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<div class="container container-twelve">
|
|
|
|
|
<div class="twelve columns demo">
|
|
|
|
|
<h2>Twelve Columns</h2>
|
|
|
|
|
<div class="one column alpha">One</div>
|
|
|
|
|
<div class="eleven columns omega">Eleven</div>
|
|
|
|
|
<div class="two columns alpha">Two</div>
|
|
|
|
|
<div class="ten columns omega">Ten</div>
|
|
|
|
|
<div class="three columns alpha">Three</div>
|
|
|
|
|
<div class="nine columns omega">Nine</div>
|
|
|
|
|
<div class="four columns alpha">Four</div>
|
|
|
|
|
<div class="eight columns omega">Eight</div>
|
|
|
|
|
<div class="five columns alpha">Five</div>
|
|
|
|
|
<div class="seven columns omega">Seven</div>
|
|
|
|
|
<div class="six columns alpha">Six</div>
|
|
|
|
|
<div class="six columns omega">Six</div>
|
|
|
|
|
<div class="seven columns alpha">Seven</div>
|
|
|
|
|
<div class="five columns omega">Five</div>
|
|
|
|
|
<div class="eight columns alpha">Eight</div>
|
|
|
|
|
<div class="four columns omega">Four</div>
|
|
|
|
|
<div class="nine columns alpha">Nine</div>
|
|
|
|
|
<div class="three columns omega">Three</div>
|
|
|
|
|
<div class="ten columns alpha">Ten</div>
|
|
|
|
|
<div class="two columns omega">Two</div>
|
|
|
|
|
<div class="eleven columns alpha">Eleven</div>
|
|
|
|
|
<div class="one column omega">One</div>
|
2011-06-23 23:44:23 -04:00
|
|
|
<div class="one-third column alpha">One-Third</div>
|
|
|
|
|
<div class="one-third column">One-Third</div>
|
|
|
|
|
<div class="one-third column omega">One-Third</div>
|
|
|
|
|
<div class="two-thirds column alpha">Two-Thirds</div>
|
|
|
|
|
<div class="one-third column omega">One-Third</div>
|
|
|
|
|
<div class="one-third column alpha">One-Third</div>
|
|
|
|
|
<div class="two-thirds column omega">Two-Thirds</div>
|
2011-06-07 16:55:30 -04:00
|
|
|
|
|
|
|
|
<h3>With Offsets</h3>
|
|
|
|
|
<div class="eleven columns offset-by-one omega">Eleven</div>
|
|
|
|
|
<div class="ten columns offset-by-two omega">Ten</div>
|
|
|
|
|
<div class="nine columns offset-by-three omega">Nine</div>
|
|
|
|
|
<div class="eight columns offset-by-four omega">Eight</div>
|
|
|
|
|
<div class="seven columns offset-by-five omega">Seven</div>
|
|
|
|
|
<div class="six columns offset-by-six omega">Six</div>
|
|
|
|
|
<div class="five columns offset-by-seven omega">Five</div>
|
|
|
|
|
<div class="four columns offset-by-eight omega">Four</div>
|
|
|
|
|
<div class="three columns offset-by-nine omega">Three</div>
|
|
|
|
|
<div class="two columns offset-by-ten omega">Two</div>
|
|
|
|
|
<div class="one column offset-by-eleven omega">One</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div><!-- container -->
|
|
|
|
|
|
|
|
|
|
<div class="container container-sixteen">
|
|
|
|
|
<div class="sixteen columns demo">
|
|
|
|
|
<h2>Sixteen Columns</h2>
|
|
|
|
|
<div class="one column alpha">One</div>
|
|
|
|
|
<div class="fifteen columns omega">Fifteen</div>
|
|
|
|
|
<div class="two columns alpha">Two</div>
|
|
|
|
|
<div class="fourteen columns omega">Fourteen</div>
|
|
|
|
|
<div class="three columns alpha">Three</div>
|
|
|
|
|
<div class="thirteen columns omega">Thirteen</div>
|
|
|
|
|
<div class="four columns alpha">Four</div>
|
|
|
|
|
<div class="twelve columns omega">Twelve</div>
|
|
|
|
|
<div class="five columns alpha">Five</div>
|
|
|
|
|
<div class="eleven columns omega">Eleven</div>
|
|
|
|
|
<div class="six columns alpha">Six</div>
|
|
|
|
|
<div class="ten columns omega">Ten</div>
|
|
|
|
|
<div class="seven columns alpha">Seven</div>
|
|
|
|
|
<div class="nine columns omega">Nine</div>
|
|
|
|
|
<div class="eight columns alpha">Eight</div>
|
|
|
|
|
<div class="eight columns omega">Eight</div>
|
|
|
|
|
<div class="nine columns alpha">Nine</div>
|
|
|
|
|
<div class="seven columns omega">Seven</div>
|
|
|
|
|
<div class="ten columns alpha">Ten</div>
|
|
|
|
|
<div class="six columns omega">Six</div>
|
|
|
|
|
<div class="eleven columns alpha">Eleven</div>
|
|
|
|
|
<div class="five columns omega">Five</div>
|
|
|
|
|
<div class="twelve columns alpha">Twelve</div>
|
|
|
|
|
<div class="four columns omega">Four</div>
|
|
|
|
|
<div class="thirteen columns alpha">Thirteen</div>
|
|
|
|
|
<div class="three columns omega">Three</div>
|
|
|
|
|
<div class="fourteen columns alpha">Fourteen</div>
|
|
|
|
|
<div class="two columns omega">Two</div>
|
|
|
|
|
<div class="fifteen columns alpha">Fifteen</div>
|
|
|
|
|
<div class="one column omega">One</div>
|
2011-06-23 23:44:23 -04:00
|
|
|
<div class="one-third column alpha">One-Third</div>
|
|
|
|
|
<div class="one-third column">One-Third</div>
|
|
|
|
|
<div class="one-third column omega">One-Third</div>
|
|
|
|
|
<div class="two-thirds column alpha">Two-Thirds</div>
|
|
|
|
|
<div class="one-third column omega">One-Third</div>
|
|
|
|
|
<div class="one-third column alpha">One-Thirds</div>
|
|
|
|
|
<div class="two-thirds column omega">Two-Thirds</div>
|
2011-06-07 16:55:30 -04:00
|
|
|
|
|
|
|
|
<h3>With Offsets</h3>
|
|
|
|
|
<div class="fifteen columns offset-by-one omega">Fifteen</div>
|
|
|
|
|
<div class="fourteen columns offset-by-two omega">Fourteen</div>
|
|
|
|
|
<div class="thirteen columns offset-by-three omega">Thirteen</div>
|
|
|
|
|
<div class="twelve columns offset-by-four omega">Twelve</div>
|
|
|
|
|
<div class="eleven columns offset-by-five omega">Eleven</div>
|
|
|
|
|
<div class="ten columns offset-by-six omega">Ten</div>
|
|
|
|
|
<div class="nine columns offset-by-seven omega">Nine</div>
|
|
|
|
|
<div class="eight columns offset-by-eight omega">Eight</div>
|
|
|
|
|
<div class="seven columns offset-by-nine omega">Seven</div>
|
|
|
|
|
<div class="six columns offset-by-ten omega">Six</div>
|
|
|
|
|
<div class="five columns offset-by-eleven omega">Five</div>
|
|
|
|
|
<div class="four columns offset-by-twelve omega">Four</div>
|
|
|
|
|
<div class="three columns offset-by-thirteen omega">Three</div>
|
|
|
|
|
<div class="two columns offset-by-fourteen omega">Two</div>
|
|
|
|
|
<div class="one column offset-by-fifteen omega">One</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div><!-- container -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- JS
|
|
|
|
|
================================================== -->
|
|
|
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
|
|
|
|
|
<script>window.jQuery || document.write("<script src='javascripts/jquery-1.5.1.min.js'>\x3C/script>")</script>
|
|
|
|
|
<script src="javascripts/app.js"></script>
|
|
|
|
|
|
|
|
|
|
<!-- End Document
|
|
|
|
|
================================================== -->
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
