Merge branch 'release/1.0.10'
This commit is contained in:
Nick Pack
commit
9e2b60d318
@ -1,4 +1,4 @@
|
||||
Ribs v1.0.9
|
||||
Ribs v1.0.10
|
||||
=============
|
||||
> Ribs is the evolution of Skeleton, the original author seems to have disappeared and/or lost interest in the project, and my colleagues and I use this an awful lot.
|
||||
|
||||
@ -50,6 +50,7 @@ Then following that, from the root dir of this project, run `npm install` which
|
||||
You should be good to go.
|
||||
|
||||
## Changelog
|
||||
* Oct 15, 2013 - (v1.0.10) Resolved some issues with the grid system (Switched to margins for push/pull and removed tablet specific alpha and omega classes), Added a couple of example files.
|
||||
* Oct 15, 2013 - (v1.0.9) Default flag added to variables - Thanks to Ivo Bathke (@ivoba)
|
||||
* Oct 10, 2013 - (v1.0.8) Initial inline documentation, styledocco based docs generation, fixed breakpoint oversight on media queries for tablet and mobile
|
||||
* Oct 10, 2013 - (v1.0.7) Documented the differences between the original skeleton project and Ribs, Updated normalize to 2.1.3
|
||||
|
||||
@ -365,27 +365,26 @@ hr {
|
||||
#Grid System
|
||||
|
||||
<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="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="eight columns omega">Eight</div>
|
||||
<div class="twelve columns omega">Twelve</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="eleven columns omega">Eleven</div>
|
||||
<div class="eight columns alpha">Eight</div>
|
||||
<div class="four columns omega">Four</div>
|
||||
<div class="nine columns alpha">Nine</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="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="five columns omega">Five</div>
|
||||
*/
|
||||
.container {
|
||||
position: relative;
|
||||
@ -483,65 +482,65 @@ hr {
|
||||
.container .offset-by-fifteen {
|
||||
padding-left: 900px; }
|
||||
.container .pull-by-one {
|
||||
left: -60px; }
|
||||
margin-left: -60px; }
|
||||
.container .pull-by-two {
|
||||
left: -120px; }
|
||||
margin-left: -120px; }
|
||||
.container .pull-by-three {
|
||||
left: -180px; }
|
||||
margin-left: -180px; }
|
||||
.container .pull-by-four {
|
||||
left: -240px; }
|
||||
margin-left: -240px; }
|
||||
.container .pull-by-five {
|
||||
left: -300px; }
|
||||
margin-left: -300px; }
|
||||
.container .pull-by-six {
|
||||
left: -360px; }
|
||||
margin-left: -360px; }
|
||||
.container .pull-by-seven {
|
||||
left: -420px; }
|
||||
margin-left: -420px; }
|
||||
.container .pull-by-eight {
|
||||
left: -480px; }
|
||||
margin-left: -480px; }
|
||||
.container .pull-by-nine {
|
||||
left: -540px; }
|
||||
margin-left: -540px; }
|
||||
.container .pull-by-ten {
|
||||
left: -600px; }
|
||||
margin-left: -600px; }
|
||||
.container .pull-by-eleven {
|
||||
left: -660px; }
|
||||
margin-left: -660px; }
|
||||
.container .pull-by-twelve {
|
||||
left: -720px; }
|
||||
margin-left: -720px; }
|
||||
.container .pull-by-thirteen {
|
||||
left: -780px; }
|
||||
margin-left: -780px; }
|
||||
.container .pull-by-fourteen {
|
||||
left: -840px; }
|
||||
margin-left: -840px; }
|
||||
.container .pull-by-fifteen {
|
||||
left: -900px; }
|
||||
margin-left: -900px; }
|
||||
.container .push-by-one {
|
||||
left: 60px; }
|
||||
margin-left: 60px; }
|
||||
.container .push-by-two {
|
||||
left: 120px; }
|
||||
margin-left: 120px; }
|
||||
.container .push-by-three {
|
||||
left: 180px; }
|
||||
margin-left: 180px; }
|
||||
.container .push-by-four {
|
||||
left: 240px; }
|
||||
margin-left: 240px; }
|
||||
.container .push-by-five {
|
||||
left: 300px; }
|
||||
margin-left: 300px; }
|
||||
.container .push-by-six {
|
||||
left: 360px; }
|
||||
margin-left: 360px; }
|
||||
.container .push-by-seven {
|
||||
left: 420px; }
|
||||
margin-left: 420px; }
|
||||
.container .push-by-eight {
|
||||
left: 480px; }
|
||||
margin-left: 480px; }
|
||||
.container .push-by-nine {
|
||||
left: 540px; }
|
||||
margin-left: 540px; }
|
||||
.container .push-by-ten {
|
||||
left: 600px; }
|
||||
margin-left: 600px; }
|
||||
.container .push-by-eleven {
|
||||
left: 660px; }
|
||||
margin-left: 660px; }
|
||||
.container .push-by-twelve {
|
||||
left: 720px; }
|
||||
margin-left: 720px; }
|
||||
.container .push-by-thirteen {
|
||||
left: 780px; }
|
||||
margin-left: 780px; }
|
||||
.container .push-by-fourteen {
|
||||
left: 840px; }
|
||||
margin-left: 840px; }
|
||||
.container .push-by-fifteen {
|
||||
left: 900px; }
|
||||
margin-left: 900px; }
|
||||
|
||||
@media only screen and (max-width: 959px) {
|
||||
.container {
|
||||
@ -619,72 +618,68 @@ hr {
|
||||
.container .offset-by-fifteen {
|
||||
padding-left: 720px; }
|
||||
.container .pull-by-one {
|
||||
left: -48px; }
|
||||
margin-left: -48px; }
|
||||
.container .pull-by-two {
|
||||
left: -96px; }
|
||||
margin-left: -96px; }
|
||||
.container .pull-by-three {
|
||||
left: -144px; }
|
||||
margin-left: -144px; }
|
||||
.container .pull-by-four {
|
||||
left: -192px; }
|
||||
margin-left: -192px; }
|
||||
.container .pull-by-five {
|
||||
left: -240px; }
|
||||
margin-left: -240px; }
|
||||
.container .pull-by-six {
|
||||
left: -288px; }
|
||||
margin-left: -288px; }
|
||||
.container .pull-by-seven {
|
||||
left: -336px; }
|
||||
margin-left: -336px; }
|
||||
.container .pull-by-eight {
|
||||
left: -384px; }
|
||||
margin-left: -384px; }
|
||||
.container .pull-by-nine {
|
||||
left: -432px; }
|
||||
margin-left: -432px; }
|
||||
.container .pull-by-ten {
|
||||
left: -480px; }
|
||||
margin-left: -480px; }
|
||||
.container .pull-by-eleven {
|
||||
left: -528px; }
|
||||
margin-left: -528px; }
|
||||
.container .pull-by-twelve {
|
||||
left: -576px; }
|
||||
margin-left: -576px; }
|
||||
.container .pull-by-thirteen {
|
||||
left: -624px; }
|
||||
margin-left: -624px; }
|
||||
.container .pull-by-fourteen {
|
||||
left: -672px; }
|
||||
margin-left: -672px; }
|
||||
.container .pull-by-fifteen {
|
||||
left: -720px; }
|
||||
margin-left: -720px; }
|
||||
.container .push-by-one {
|
||||
left: 48px; }
|
||||
margin-left: 48px; }
|
||||
.container .push-by-two {
|
||||
left: 96px; }
|
||||
margin-left: 96px; }
|
||||
.container .push-by-three {
|
||||
left: 144px; }
|
||||
margin-left: 144px; }
|
||||
.container .push-by-four {
|
||||
left: 192px; }
|
||||
margin-left: 192px; }
|
||||
.container .push-by-five {
|
||||
left: 240px; }
|
||||
margin-left: 240px; }
|
||||
.container .push-by-six {
|
||||
left: 288px; }
|
||||
margin-left: 288px; }
|
||||
.container .push-by-seven {
|
||||
left: 336px; }
|
||||
margin-left: 336px; }
|
||||
.container .push-by-eight {
|
||||
left: 384px; }
|
||||
margin-left: 384px; }
|
||||
.container .push-by-nine {
|
||||
left: 432px; }
|
||||
margin-left: 432px; }
|
||||
.container .push-by-ten {
|
||||
left: 480px; }
|
||||
margin-left: 480px; }
|
||||
.container .push-by-eleven {
|
||||
left: 528px; }
|
||||
margin-left: 528px; }
|
||||
.container .push-by-twelve {
|
||||
left: 576px; }
|
||||
margin-left: 576px; }
|
||||
.container .push-by-thirteen {
|
||||
left: 624px; }
|
||||
margin-left: 624px; }
|
||||
.container .push-by-fourteen {
|
||||
left: 672px; }
|
||||
margin-left: 672px; }
|
||||
.container .push-by-fifteen {
|
||||
left: 720px; }
|
||||
margin-left: 720px; }
|
||||
|
||||
.container {
|
||||
width: 768px; }
|
||||
.container .alpha {
|
||||
margin-right: 10px; }
|
||||
.container .omega {
|
||||
margin-left: 10px; } }
|
||||
width: 768px; } }
|
||||
/*
|
||||
#Mobile Grid
|
||||
Every column element in this grid is the total grid width
|
||||
|
||||
4
build/css/Ribs.min.css
vendored
4
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]-->
|
||||
<head>
|
||||
|
||||
<!-- Basic Page Needs
|
||||
<!-- Basic Page Needs
|
||||
================================================== -->
|
||||
<meta charset="utf-8">
|
||||
<title>Your Page Title Here</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<meta charset="utf-8">
|
||||
<title>Your Page Title Here</title>
|
||||
<meta name="description" 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]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Favicons
|
||||
================================================== -->
|
||||
<link rel="shortcut icon" href="img/favicon.ico">
|
||||
<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="114x114" href="img/apple-touch-icon-114x114.png">
|
||||
<!-- Favicons
|
||||
================================================== -->
|
||||
<link rel="shortcut icon" href="img/favicon.ico">
|
||||
<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="114x114" href="img/apple-touch-icon-114x114.png">
|
||||
|
||||
</head>
|
||||
<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="sixteen columns">
|
||||
<h1 class="remove-bottom" style="margin-top: 40px">Ribs</h1>
|
||||
<h5>Version 1.0.5</h5>
|
||||
<hr />
|
||||
</div>
|
||||
<div class="one-third column">
|
||||
<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>Ribs is the evolution of the original Skeleton Project.</p>
|
||||
</div>
|
||||
<div class="one-third column">
|
||||
<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>
|
||||
<div class="one-third column">
|
||||
<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>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="sixteen columns">
|
||||
<h1 class="remove-bottom" style="margin-top: 40px">Ribs</h1>
|
||||
<h5>Version 1.0.9</h5>
|
||||
<hr />
|
||||
</div>
|
||||
<div class="one-third column">
|
||||
<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>Ribs is the evolution of the original Skeleton Project.</p>
|
||||
</div>
|
||||
<div class="one-third column">
|
||||
<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>
|
||||
<div class="one-third column">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
</div><!-- container -->
|
||||
</div><!-- container -->
|
||||
|
||||
|
||||
<!-- End Document
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "Ribs",
|
||||
"version": "1.0.9",
|
||||
"version": "1.0.10",
|
||||
"main": "build/css/Ribs.css",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
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,7 +2,7 @@
|
||||
"name": "Ribs",
|
||||
"title": "Ribs",
|
||||
"description": "The evolution of Skeleton: A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.",
|
||||
"version": "1.0.9",
|
||||
"version": "1.0.10",
|
||||
"homepage": "https://github.com/nickpack/Ribs",
|
||||
"author": {
|
||||
"name": "Nick Pack",
|
||||
|
||||
@ -2,27 +2,26 @@
|
||||
#Grid System
|
||||
|
||||
<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="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="eight columns omega">Eight</div>
|
||||
<div class="twelve columns omega">Twelve</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="eleven columns omega">Eleven</div>
|
||||
<div class="eight columns alpha">Eight</div>
|
||||
<div class="four columns omega">Four</div>
|
||||
<div class="nine columns alpha">Nine</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="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="five columns omega">Five</div>
|
||||
*/
|
||||
|
||||
.container {
|
||||
@ -63,12 +62,6 @@
|
||||
|
||||
.container {
|
||||
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-fifteen { padding-left: $grid-column-width*15; }
|
||||
|
||||
.pull-by-one { left: -$grid-column-width; }
|
||||
.pull-by-two { left: -$grid-column-width*2; }
|
||||
.pull-by-three { left: -$grid-column-width*3; }
|
||||
.pull-by-four { left: -$grid-column-width*4; }
|
||||
.pull-by-five { left: -$grid-column-width*5; }
|
||||
.pull-by-six { left: -$grid-column-width*6; }
|
||||
.pull-by-seven { left: -$grid-column-width*7; }
|
||||
.pull-by-eight { left: -$grid-column-width*8; }
|
||||
.pull-by-nine { left: -$grid-column-width*9; }
|
||||
.pull-by-ten { left: -$grid-column-width*10; }
|
||||
.pull-by-eleven { left: -$grid-column-width*11; }
|
||||
.pull-by-twelve { left: -$grid-column-width*12; }
|
||||
.pull-by-thirteen { left: -$grid-column-width*13; }
|
||||
.pull-by-fourteen { left: -$grid-column-width*14; }
|
||||
.pull-by-fifteen { left: -$grid-column-width*15; }
|
||||
.pull-by-one { margin-left: -$grid-column-width; }
|
||||
.pull-by-two { margin-left: -$grid-column-width*2; }
|
||||
.pull-by-three { margin-left: -$grid-column-width*3; }
|
||||
.pull-by-four { margin-left: -$grid-column-width*4; }
|
||||
.pull-by-five { margin-left: -$grid-column-width*5; }
|
||||
.pull-by-six { margin-left: -$grid-column-width*6; }
|
||||
.pull-by-seven { margin-left: -$grid-column-width*7; }
|
||||
.pull-by-eight { margin-left: -$grid-column-width*8; }
|
||||
.pull-by-nine { margin-left: -$grid-column-width*9; }
|
||||
.pull-by-ten { margin-left: -$grid-column-width*10; }
|
||||
.pull-by-eleven { margin-left: -$grid-column-width*11; }
|
||||
.pull-by-twelve { margin-left: -$grid-column-width*12; }
|
||||
.pull-by-thirteen { margin-left: -$grid-column-width*13; }
|
||||
.pull-by-fourteen { margin-left: -$grid-column-width*14; }
|
||||
.pull-by-fifteen { margin-left: -$grid-column-width*15; }
|
||||
|
||||
.push-by-one { left: $grid-column-width; }
|
||||
.push-by-two { left: $grid-column-width*2; }
|
||||
.push-by-three { left: $grid-column-width*3; }
|
||||
.push-by-four { left: $grid-column-width*4; }
|
||||
.push-by-five { left: $grid-column-width*5; }
|
||||
.push-by-six { left: $grid-column-width*6; }
|
||||
.push-by-seven { left: $grid-column-width*7; }
|
||||
.push-by-eight { left: $grid-column-width*8; }
|
||||
.push-by-nine { left: $grid-column-width*9; }
|
||||
.push-by-ten { left: $grid-column-width*10; }
|
||||
.push-by-eleven { left: $grid-column-width*11; }
|
||||
.push-by-twelve { left: $grid-column-width*12; }
|
||||
.push-by-thirteen { left: $grid-column-width*13; }
|
||||
.push-by-fourteen { left: $grid-column-width*14; }
|
||||
.push-by-fifteen { left: $grid-column-width*15; }
|
||||
.push-by-one { margin-left: $grid-column-width; }
|
||||
.push-by-two { margin-left: $grid-column-width*2; }
|
||||
.push-by-three { margin-left: $grid-column-width*3; }
|
||||
.push-by-four { margin-left: $grid-column-width*4; }
|
||||
.push-by-five { margin-left: $grid-column-width*5; }
|
||||
.push-by-six { margin-left: $grid-column-width*6; }
|
||||
.push-by-seven { margin-left: $grid-column-width*7; }
|
||||
.push-by-eight { margin-left: $grid-column-width*8; }
|
||||
.push-by-nine { margin-left: $grid-column-width*9; }
|
||||
.push-by-ten { margin-left: $grid-column-width*10; }
|
||||
.push-by-eleven { margin-left: $grid-column-width*11; }
|
||||
.push-by-twelve { margin-left: $grid-column-width*12; }
|
||||
.push-by-thirteen { margin-left: $grid-column-width*13; }
|
||||
.push-by-fourteen { margin-left: $grid-column-width*14; }
|
||||
.push-by-fifteen { margin-left: $grid-column-width*15; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user