Fixed some grid issues:
* Switched to margins for push/pull * Removed tablet alpha and omega - they just break things Added a couple of example files
This commit is contained in:
Nick Pack
parent
aed101ae69
commit
ab9632a8ca
@ -483,65 +483,65 @@ hr {
|
|||||||
.container .offset-by-fifteen {
|
.container .offset-by-fifteen {
|
||||||
padding-left: 900px; }
|
padding-left: 900px; }
|
||||||
.container .pull-by-one {
|
.container .pull-by-one {
|
||||||
left: -60px; }
|
margin-left: -60px; }
|
||||||
.container .pull-by-two {
|
.container .pull-by-two {
|
||||||
left: -120px; }
|
margin-left: -120px; }
|
||||||
.container .pull-by-three {
|
.container .pull-by-three {
|
||||||
left: -180px; }
|
margin-left: -180px; }
|
||||||
.container .pull-by-four {
|
.container .pull-by-four {
|
||||||
left: -240px; }
|
margin-left: -240px; }
|
||||||
.container .pull-by-five {
|
.container .pull-by-five {
|
||||||
left: -300px; }
|
margin-left: -300px; }
|
||||||
.container .pull-by-six {
|
.container .pull-by-six {
|
||||||
left: -360px; }
|
margin-left: -360px; }
|
||||||
.container .pull-by-seven {
|
.container .pull-by-seven {
|
||||||
left: -420px; }
|
margin-left: -420px; }
|
||||||
.container .pull-by-eight {
|
.container .pull-by-eight {
|
||||||
left: -480px; }
|
margin-left: -480px; }
|
||||||
.container .pull-by-nine {
|
.container .pull-by-nine {
|
||||||
left: -540px; }
|
margin-left: -540px; }
|
||||||
.container .pull-by-ten {
|
.container .pull-by-ten {
|
||||||
left: -600px; }
|
margin-left: -600px; }
|
||||||
.container .pull-by-eleven {
|
.container .pull-by-eleven {
|
||||||
left: -660px; }
|
margin-left: -660px; }
|
||||||
.container .pull-by-twelve {
|
.container .pull-by-twelve {
|
||||||
left: -720px; }
|
margin-left: -720px; }
|
||||||
.container .pull-by-thirteen {
|
.container .pull-by-thirteen {
|
||||||
left: -780px; }
|
margin-left: -780px; }
|
||||||
.container .pull-by-fourteen {
|
.container .pull-by-fourteen {
|
||||||
left: -840px; }
|
margin-left: -840px; }
|
||||||
.container .pull-by-fifteen {
|
.container .pull-by-fifteen {
|
||||||
left: -900px; }
|
margin-left: -900px; }
|
||||||
.container .push-by-one {
|
.container .push-by-one {
|
||||||
left: 60px; }
|
margin-left: 60px; }
|
||||||
.container .push-by-two {
|
.container .push-by-two {
|
||||||
left: 120px; }
|
margin-left: 120px; }
|
||||||
.container .push-by-three {
|
.container .push-by-three {
|
||||||
left: 180px; }
|
margin-left: 180px; }
|
||||||
.container .push-by-four {
|
.container .push-by-four {
|
||||||
left: 240px; }
|
margin-left: 240px; }
|
||||||
.container .push-by-five {
|
.container .push-by-five {
|
||||||
left: 300px; }
|
margin-left: 300px; }
|
||||||
.container .push-by-six {
|
.container .push-by-six {
|
||||||
left: 360px; }
|
margin-left: 360px; }
|
||||||
.container .push-by-seven {
|
.container .push-by-seven {
|
||||||
left: 420px; }
|
margin-left: 420px; }
|
||||||
.container .push-by-eight {
|
.container .push-by-eight {
|
||||||
left: 480px; }
|
margin-left: 480px; }
|
||||||
.container .push-by-nine {
|
.container .push-by-nine {
|
||||||
left: 540px; }
|
margin-left: 540px; }
|
||||||
.container .push-by-ten {
|
.container .push-by-ten {
|
||||||
left: 600px; }
|
margin-left: 600px; }
|
||||||
.container .push-by-eleven {
|
.container .push-by-eleven {
|
||||||
left: 660px; }
|
margin-left: 660px; }
|
||||||
.container .push-by-twelve {
|
.container .push-by-twelve {
|
||||||
left: 720px; }
|
margin-left: 720px; }
|
||||||
.container .push-by-thirteen {
|
.container .push-by-thirteen {
|
||||||
left: 780px; }
|
margin-left: 780px; }
|
||||||
.container .push-by-fourteen {
|
.container .push-by-fourteen {
|
||||||
left: 840px; }
|
margin-left: 840px; }
|
||||||
.container .push-by-fifteen {
|
.container .push-by-fifteen {
|
||||||
left: 900px; }
|
margin-left: 900px; }
|
||||||
|
|
||||||
@media only screen and (max-width: 959px) {
|
@media only screen and (max-width: 959px) {
|
||||||
.container {
|
.container {
|
||||||
@ -619,72 +619,68 @@ hr {
|
|||||||
.container .offset-by-fifteen {
|
.container .offset-by-fifteen {
|
||||||
padding-left: 720px; }
|
padding-left: 720px; }
|
||||||
.container .pull-by-one {
|
.container .pull-by-one {
|
||||||
left: -48px; }
|
margin-left: -48px; }
|
||||||
.container .pull-by-two {
|
.container .pull-by-two {
|
||||||
left: -96px; }
|
margin-left: -96px; }
|
||||||
.container .pull-by-three {
|
.container .pull-by-three {
|
||||||
left: -144px; }
|
margin-left: -144px; }
|
||||||
.container .pull-by-four {
|
.container .pull-by-four {
|
||||||
left: -192px; }
|
margin-left: -192px; }
|
||||||
.container .pull-by-five {
|
.container .pull-by-five {
|
||||||
left: -240px; }
|
margin-left: -240px; }
|
||||||
.container .pull-by-six {
|
.container .pull-by-six {
|
||||||
left: -288px; }
|
margin-left: -288px; }
|
||||||
.container .pull-by-seven {
|
.container .pull-by-seven {
|
||||||
left: -336px; }
|
margin-left: -336px; }
|
||||||
.container .pull-by-eight {
|
.container .pull-by-eight {
|
||||||
left: -384px; }
|
margin-left: -384px; }
|
||||||
.container .pull-by-nine {
|
.container .pull-by-nine {
|
||||||
left: -432px; }
|
margin-left: -432px; }
|
||||||
.container .pull-by-ten {
|
.container .pull-by-ten {
|
||||||
left: -480px; }
|
margin-left: -480px; }
|
||||||
.container .pull-by-eleven {
|
.container .pull-by-eleven {
|
||||||
left: -528px; }
|
margin-left: -528px; }
|
||||||
.container .pull-by-twelve {
|
.container .pull-by-twelve {
|
||||||
left: -576px; }
|
margin-left: -576px; }
|
||||||
.container .pull-by-thirteen {
|
.container .pull-by-thirteen {
|
||||||
left: -624px; }
|
margin-left: -624px; }
|
||||||
.container .pull-by-fourteen {
|
.container .pull-by-fourteen {
|
||||||
left: -672px; }
|
margin-left: -672px; }
|
||||||
.container .pull-by-fifteen {
|
.container .pull-by-fifteen {
|
||||||
left: -720px; }
|
margin-left: -720px; }
|
||||||
.container .push-by-one {
|
.container .push-by-one {
|
||||||
left: 48px; }
|
margin-left: 48px; }
|
||||||
.container .push-by-two {
|
.container .push-by-two {
|
||||||
left: 96px; }
|
margin-left: 96px; }
|
||||||
.container .push-by-three {
|
.container .push-by-three {
|
||||||
left: 144px; }
|
margin-left: 144px; }
|
||||||
.container .push-by-four {
|
.container .push-by-four {
|
||||||
left: 192px; }
|
margin-left: 192px; }
|
||||||
.container .push-by-five {
|
.container .push-by-five {
|
||||||
left: 240px; }
|
margin-left: 240px; }
|
||||||
.container .push-by-six {
|
.container .push-by-six {
|
||||||
left: 288px; }
|
margin-left: 288px; }
|
||||||
.container .push-by-seven {
|
.container .push-by-seven {
|
||||||
left: 336px; }
|
margin-left: 336px; }
|
||||||
.container .push-by-eight {
|
.container .push-by-eight {
|
||||||
left: 384px; }
|
margin-left: 384px; }
|
||||||
.container .push-by-nine {
|
.container .push-by-nine {
|
||||||
left: 432px; }
|
margin-left: 432px; }
|
||||||
.container .push-by-ten {
|
.container .push-by-ten {
|
||||||
left: 480px; }
|
margin-left: 480px; }
|
||||||
.container .push-by-eleven {
|
.container .push-by-eleven {
|
||||||
left: 528px; }
|
margin-left: 528px; }
|
||||||
.container .push-by-twelve {
|
.container .push-by-twelve {
|
||||||
left: 576px; }
|
margin-left: 576px; }
|
||||||
.container .push-by-thirteen {
|
.container .push-by-thirteen {
|
||||||
left: 624px; }
|
margin-left: 624px; }
|
||||||
.container .push-by-fourteen {
|
.container .push-by-fourteen {
|
||||||
left: 672px; }
|
margin-left: 672px; }
|
||||||
.container .push-by-fifteen {
|
.container .push-by-fifteen {
|
||||||
left: 720px; }
|
margin-left: 720px; }
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: 768px; }
|
width: 768px; } }
|
||||||
.container .alpha {
|
|
||||||
margin-right: 10px; }
|
|
||||||
.container .omega {
|
|
||||||
margin-left: 10px; } }
|
|
||||||
/*
|
/*
|
||||||
#Mobile Grid
|
#Mobile Grid
|
||||||
Every column element in this grid is the total grid width
|
Every column element in this grid is the total grid width
|
||||||
|
|||||||
2
build/css/Ribs.min.css
vendored
2
build/css/Ribs.min.css
vendored
File diff suppressed because one or more lines are too long
@ -5,66 +5,66 @@
|
|||||||
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
|
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
|
||||||
<head>
|
<head>
|
||||||
|
|
||||||
<!-- Basic Page Needs
|
<!-- Basic Page Needs
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Your Page Title Here</title>
|
<title>Your Page Title Here</title>
|
||||||
<meta name="description" content="">
|
<meta name="description" content="">
|
||||||
<meta name="author" content="">
|
<meta name="author" content="">
|
||||||
|
|
||||||
<!-- Mobile Specific Metas
|
<!-- Mobile Specific Metas
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
|
|
||||||
<!-- CSS
|
<!-- CSS
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<link rel="stylesheet" href="css/Ribs.min.css">
|
<link rel="stylesheet" href="css/Ribs.min.css">
|
||||||
|
|
||||||
<!--[if lt IE 9]>
|
<!--[if lt IE 9]>
|
||||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||||
<![endif]-->
|
<![endif]-->
|
||||||
|
|
||||||
<!-- Favicons
|
<!-- Favicons
|
||||||
================================================== -->
|
================================================== -->
|
||||||
<link rel="shortcut icon" href="img/favicon.ico">
|
<link rel="shortcut icon" href="img/favicon.ico">
|
||||||
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
|
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
|
||||||
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
|
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
|
||||||
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">
|
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<!-- Primary Page Layout
|
<!-- Primary Page Layout
|
||||||
================================================== -->
|
================================================== -->
|
||||||
|
|
||||||
<!-- Delete everything in this .container and get started on your own site! -->
|
<!-- Delete everything in this .container and get started on your own site! -->
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="sixteen columns">
|
<div class="sixteen columns">
|
||||||
<h1 class="remove-bottom" style="margin-top: 40px">Ribs</h1>
|
<h1 class="remove-bottom" style="margin-top: 40px">Ribs</h1>
|
||||||
<h5>Version 1.0.5</h5>
|
<h5>Version 1.0.9</h5>
|
||||||
<hr />
|
<hr />
|
||||||
</div>
|
</div>
|
||||||
<div class="one-third column">
|
<div class="one-third column">
|
||||||
<h3>About Ribs</h3>
|
<h3>About Ribs</h3>
|
||||||
<p>Skeleton is a small collection of well-organized CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, forms and media queries. Go ahead, resize this super basic page to see the grid in action.</p>
|
<p>Skeleton is a small collection of well-organized CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, forms and media queries. Go ahead, resize this super basic page to see the grid in action.</p>
|
||||||
<p>Ribs is the evolution of the original Skeleton Project.</p>
|
<p>Ribs is the evolution of the original Skeleton Project.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="one-third column">
|
<div class="one-third column">
|
||||||
<h3>Three Core Principles</h3>
|
<h3>Three Core Principles</h3>
|
||||||
<p>Skeleton is built on three core principles:</p>
|
<p>Skeleton is built on three core principles:</p>
|
||||||
<ul class="square">
|
<ul class="square">
|
||||||
<li><strong>A Responsive Grid Down To Mobile</strong>: Elegant scaling from a browser to tablets to mobile.</li>
|
<li><strong>A Responsive Grid Down To Mobile</strong>: Elegant scaling from a browser to tablets to mobile.</li>
|
||||||
<li><strong>Fast to Start</strong>: It's a tool for rapid development with best practices</li>
|
<li><strong>Fast to Start</strong>: It's a tool for rapid development with best practices</li>
|
||||||
<li><strong>Style Agnostic</strong>: It provides the most basic, beautiful styles, but is meant to be overwritten.</li>
|
<li><strong>Style Agnostic</strong>: It provides the most basic, beautiful styles, but is meant to be overwritten.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="one-third column">
|
<div class="one-third column">
|
||||||
<h3>Docs & Support</h3>
|
<h3>Docs & Support</h3>
|
||||||
<p>The easiest way to really get started with Ribs is to check out the original skeleton docs and info at <a href="http://www.getskeleton.com">www.getskeleton.com.</a> - this is the main set of docs for the original css project, but will provide all of the needed insight. Ribs is open-source and has a <a href="https://github.com/nickpack/Ribs">project on github</a>, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at <a href="mailto:nick@nickpack.com">nick@nickpack.com</a>.</p>
|
<p>The easiest way to really get started with Ribs is to check out the original skeleton docs and info at <a href="http://www.getskeleton.com">www.getskeleton.com.</a> - this is the main set of docs for the original css project, but will provide all of the needed insight. Ribs is open-source and has a <a href="https://github.com/nickpack/Ribs">project on github</a>, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at <a href="mailto:nick@nickpack.com">nick@nickpack.com</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- container -->
|
</div><!-- container -->
|
||||||
|
|
||||||
|
|
||||||
<!-- End Document
|
<!-- End Document
|
||||||
|
|||||||
56
examples/example-1.html
Normal file
56
examples/example-1.html
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
<!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>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Your Page Title Here</title>
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="author" content="Nick Pack">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
|
<link rel="stylesheet" href="../build/css/Ribs.min.css">
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
<link rel="shortcut icon" href="../build/img/favicon.ico">
|
||||||
|
<link rel="apple-touch-icon" href="../build/img/apple-touch-icon.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="72x72" href="../build/img/apple-touch-icon-72x72.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="114x114" href="../build/img/apple-touch-icon-114x114.png">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<header class="sixteen columns">
|
||||||
|
<h1>Ribs</h1>
|
||||||
|
</header>
|
||||||
|
<div class="four columns">
|
||||||
|
<h3>Example 1</h3>
|
||||||
|
<nav>
|
||||||
|
<ul class="square">
|
||||||
|
<li>Docs</li>
|
||||||
|
<li>Source</li>
|
||||||
|
<li>Licence</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="twelve columns">
|
||||||
|
<h3>About Ribs</h3>
|
||||||
|
<p>Ribs is a small collection of well-organized SASS files that can help you rapidly develop sites that look beautiful at any size,
|
||||||
|
be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography,
|
||||||
|
buttons, forms and media queries. Go ahead, resize this super basic page to see the grid in action.</p>
|
||||||
|
<p>Ribs is the evolution of the original Skeleton Project.</p>
|
||||||
|
<h3>Three Core Principles</h3>
|
||||||
|
<p>Skeleton is built on three core principles:</p>
|
||||||
|
<ul class="square">
|
||||||
|
<li><strong>A Responsive Grid Down To Mobile</strong>: Elegant scaling from a browser to tablets to mobile.</li>
|
||||||
|
<li><strong>Fast to Start</strong>: It's a tool for rapid development with best practices</li>
|
||||||
|
<li><strong>Style Agnostic</strong>: It provides the most basic, beautiful styles, but is meant to be overwritten.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<footer class="sixteen columns">
|
||||||
|
<p>Ribs is copyright © 2013 - based on the original Skeleton project by Dave Gamache</p>
|
||||||
|
</footer>
|
||||||
|
</div><!-- container -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
74
examples/grid.html
Normal file
74
examples/grid.html
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
<!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>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Your Page Title Here</title>
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="author" content="Nick Pack">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
|
<link rel="stylesheet" href="../build/css/Ribs.min.css">
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
<link rel="shortcut icon" href="../build/img/favicon.ico">
|
||||||
|
<link rel="apple-touch-icon" href="../build/img/apple-touch-icon.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="72x72" href="../build/img/apple-touch-icon-72x72.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="114x114" href="../build/img/apple-touch-icon-114x114.png">
|
||||||
|
<style type="text/css">
|
||||||
|
#grid .column,
|
||||||
|
#grid .columns {
|
||||||
|
background: #ddd;
|
||||||
|
height: 25px;
|
||||||
|
line-height: 25px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #555;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
-moz-border-radius: 2px;
|
||||||
|
-webkit-border-radius: 2px;
|
||||||
|
border-radius: 2px; }
|
||||||
|
#grid .column:hover,
|
||||||
|
#grid .columns:hover {
|
||||||
|
background: #bbb;
|
||||||
|
color: #333; }
|
||||||
|
#grid .example-grid { overflow: hidden; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<section id="grid">
|
||||||
|
<h3>The Grid</h3>
|
||||||
|
<p>The syntax is simple and it's effective cross browser, but the awesome part is that it also has the flexibility to go mobile like a champ.
|
||||||
|
<strong>Go ahead, resize the browser and watch as the layout reacts!</strong></p>
|
||||||
|
<div class="one column alpha">One</div>
|
||||||
|
<div class="fifteen columns omega">Fifteen</div>
|
||||||
|
<div class="three columns alpha">Three</div>
|
||||||
|
<div class="thirteen columns omega">Thirteen</div>
|
||||||
|
<div class="push-by-twelve four columns alpha omega">Four Pushed by Twelve</div>
|
||||||
|
<div class="seven columns alpha">Seven</div>
|
||||||
|
<div class="nine columns omega">Nine</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="eight columns alpha">Eight</div>
|
||||||
|
<div class="eight columns omega">Eight</div>
|
||||||
|
<div class="six columns alpha">Six</div>
|
||||||
|
<div class="ten columns omega">Ten</div>
|
||||||
|
<div class="push-by-eight eight columns alpha omega">Eight Pushed by Eight</div>
|
||||||
|
<div class="three columns alpha">Three</div>
|
||||||
|
<div class="ten columns">Ten</div>
|
||||||
|
<div class="three columns omega">Three</div>
|
||||||
|
<div class="eleven columns alpha">Eleven</div>
|
||||||
|
<div class="five columns omega">Five</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -2,27 +2,26 @@
|
|||||||
#Grid System
|
#Grid System
|
||||||
|
|
||||||
<div class="one column alpha">One</div>
|
<div class="one column alpha">One</div>
|
||||||
<div class="eleven columns omega">Eleven</div>
|
<div class="fifteen columns omega">Fifteen</div>
|
||||||
<div class="two columns alpha">Two</div>
|
|
||||||
<div class="ten columns omega">Ten</div>
|
|
||||||
<div class="three columns alpha">Three</div>
|
<div class="three columns alpha">Three</div>
|
||||||
|
<div class="thirteen columns omega">Thirteen</div>
|
||||||
|
<div class="push-by-twelve four columns alpha omega">Four Pushed by Twelve</div>
|
||||||
|
<div class="seven columns alpha">Seven</div>
|
||||||
<div class="nine columns omega">Nine</div>
|
<div class="nine columns omega">Nine</div>
|
||||||
<div class="four columns alpha">Four</div>
|
<div class="four columns alpha">Four</div>
|
||||||
<div class="eight columns omega">Eight</div>
|
<div class="twelve columns omega">Twelve</div>
|
||||||
<div class="five columns alpha">Five</div>
|
<div class="five columns alpha">Five</div>
|
||||||
<div class="seven columns omega">Seven</div>
|
<div class="eleven columns omega">Eleven</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="eight columns alpha">Eight</div>
|
||||||
<div class="four columns omega">Four</div>
|
<div class="eight columns omega">Eight</div>
|
||||||
<div class="nine columns alpha">Nine</div>
|
<div class="six columns alpha">Six</div>
|
||||||
|
<div class="ten columns omega">Ten</div>
|
||||||
|
<div class="push-by-eight eight columns alpha omega">Eight Pushed by Eight</div>
|
||||||
|
<div class="three columns alpha">Three</div>
|
||||||
|
<div class="ten columns">Ten</div>
|
||||||
<div class="three columns omega">Three</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="eleven columns alpha">Eleven</div>
|
||||||
<div class="one column omega">One</div>
|
<div class="five columns omega">Five</div>
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
@ -63,12 +62,6 @@
|
|||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: $tablet-container-width;
|
width: $tablet-container-width;
|
||||||
& .alpha {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
& .omega {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//--------------------------------------------------------------------
|
//--------------------------------------------------------------------
|
||||||
|
|||||||
@ -160,37 +160,37 @@
|
|||||||
.offset-by-fourteen { padding-left: $grid-column-width*14; }
|
.offset-by-fourteen { padding-left: $grid-column-width*14; }
|
||||||
.offset-by-fifteen { padding-left: $grid-column-width*15; }
|
.offset-by-fifteen { padding-left: $grid-column-width*15; }
|
||||||
|
|
||||||
.pull-by-one { left: -$grid-column-width; }
|
.pull-by-one { margin-left: -$grid-column-width; }
|
||||||
.pull-by-two { left: -$grid-column-width*2; }
|
.pull-by-two { margin-left: -$grid-column-width*2; }
|
||||||
.pull-by-three { left: -$grid-column-width*3; }
|
.pull-by-three { margin-left: -$grid-column-width*3; }
|
||||||
.pull-by-four { left: -$grid-column-width*4; }
|
.pull-by-four { margin-left: -$grid-column-width*4; }
|
||||||
.pull-by-five { left: -$grid-column-width*5; }
|
.pull-by-five { margin-left: -$grid-column-width*5; }
|
||||||
.pull-by-six { left: -$grid-column-width*6; }
|
.pull-by-six { margin-left: -$grid-column-width*6; }
|
||||||
.pull-by-seven { left: -$grid-column-width*7; }
|
.pull-by-seven { margin-left: -$grid-column-width*7; }
|
||||||
.pull-by-eight { left: -$grid-column-width*8; }
|
.pull-by-eight { margin-left: -$grid-column-width*8; }
|
||||||
.pull-by-nine { left: -$grid-column-width*9; }
|
.pull-by-nine { margin-left: -$grid-column-width*9; }
|
||||||
.pull-by-ten { left: -$grid-column-width*10; }
|
.pull-by-ten { margin-left: -$grid-column-width*10; }
|
||||||
.pull-by-eleven { left: -$grid-column-width*11; }
|
.pull-by-eleven { margin-left: -$grid-column-width*11; }
|
||||||
.pull-by-twelve { left: -$grid-column-width*12; }
|
.pull-by-twelve { margin-left: -$grid-column-width*12; }
|
||||||
.pull-by-thirteen { left: -$grid-column-width*13; }
|
.pull-by-thirteen { margin-left: -$grid-column-width*13; }
|
||||||
.pull-by-fourteen { left: -$grid-column-width*14; }
|
.pull-by-fourteen { margin-left: -$grid-column-width*14; }
|
||||||
.pull-by-fifteen { left: -$grid-column-width*15; }
|
.pull-by-fifteen { margin-left: -$grid-column-width*15; }
|
||||||
|
|
||||||
.push-by-one { left: $grid-column-width; }
|
.push-by-one { margin-left: $grid-column-width; }
|
||||||
.push-by-two { left: $grid-column-width*2; }
|
.push-by-two { margin-left: $grid-column-width*2; }
|
||||||
.push-by-three { left: $grid-column-width*3; }
|
.push-by-three { margin-left: $grid-column-width*3; }
|
||||||
.push-by-four { left: $grid-column-width*4; }
|
.push-by-four { margin-left: $grid-column-width*4; }
|
||||||
.push-by-five { left: $grid-column-width*5; }
|
.push-by-five { margin-left: $grid-column-width*5; }
|
||||||
.push-by-six { left: $grid-column-width*6; }
|
.push-by-six { margin-left: $grid-column-width*6; }
|
||||||
.push-by-seven { left: $grid-column-width*7; }
|
.push-by-seven { margin-left: $grid-column-width*7; }
|
||||||
.push-by-eight { left: $grid-column-width*8; }
|
.push-by-eight { margin-left: $grid-column-width*8; }
|
||||||
.push-by-nine { left: $grid-column-width*9; }
|
.push-by-nine { margin-left: $grid-column-width*9; }
|
||||||
.push-by-ten { left: $grid-column-width*10; }
|
.push-by-ten { margin-left: $grid-column-width*10; }
|
||||||
.push-by-eleven { left: $grid-column-width*11; }
|
.push-by-eleven { margin-left: $grid-column-width*11; }
|
||||||
.push-by-twelve { left: $grid-column-width*12; }
|
.push-by-twelve { margin-left: $grid-column-width*12; }
|
||||||
.push-by-thirteen { left: $grid-column-width*13; }
|
.push-by-thirteen { margin-left: $grid-column-width*13; }
|
||||||
.push-by-fourteen { left: $grid-column-width*14; }
|
.push-by-fourteen { margin-left: $grid-column-width*14; }
|
||||||
.push-by-fifteen { left: $grid-column-width*15; }
|
.push-by-fifteen { margin-left: $grid-column-width*15; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user