f068644893
Was only working for one column type and not both the 12 and 16. Updated minified version with latest code.
173 lines
7.3 KiB
HTML
173 lines
7.3 KiB
HTML
<!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>
|
|
<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>
|
|
|
|
<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>
|
|
<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>
|
|
|
|
<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> |