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 2013-10-15 20:14:25 +01:00
parent aed101ae69
commit ab9632a8ca
7 changed files with 287 additions and 168 deletions

View File

@ -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

File diff suppressed because one or more lines are too long

View File

@ -5,69 +5,69 @@
<!--[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 &amp; Support</h3> <h3>Docs &amp; 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
================================================== --> ================================================== -->
</body> </body>
</html> </html>

56
examples/example-1.html Normal file
View 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 &copy; 2013 - based on the original Skeleton project by Dave Gamache</p>
</footer>
</div><!-- container -->
</body>
</html>

74
examples/grid.html Normal file
View 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>

View File

@ -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;
}
} }
} }
//-------------------------------------------------------------------- //--------------------------------------------------------------------

View File

@ -82,8 +82,8 @@
@mixin box-sizing($boxsize) { @mixin box-sizing($boxsize) {
-webkit-box-sizing: $boxsize; -webkit-box-sizing: $boxsize;
-moz-box-sizing: $boxsize; -moz-box-sizing: $boxsize;
-ms-box-sizing: $boxsize; -ms-box-sizing: $boxsize;
-o-box-sizing: $boxsize; -o-box-sizing: $boxsize;
-khtml-box-sizing: $boxsize; -khtml-box-sizing: $boxsize;
box-sizing: $boxsize; box-sizing: $boxsize;
} }
@ -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; }
} }
} }
@ -204,11 +204,11 @@
} }
@mixin visible { @mixin visible {
display: block !important; display: block !important;
visibility: visible; visibility: visible;
} }
@mixin hidden { @mixin hidden {
display: none !important; display: none !important;
visibility: hidden; visibility: hidden;
} }