Skip to content

Instantly share code, notes, and snippets.

@rafszul

rafszul/index.html

Created February 16, 2017 00:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rafszul/a2350e024bc2ba64315011dc75e45b58 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rafszul/a2350e024bc2ba64315011dc75e45b58 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive OOCSS Grid System
Raw
index.html
<div class="grid-wrap">
<div class="row">
<div class="col g-1of1 g4-1of5">
<div class="in">
<div class="row is-nested">
<div class="col g2-1of1 g3-1of3 g4-1of1">
<div class="in">
<div class="module">
<h1 class="h3">One Third</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad expedita cumque eveniet repudiandae asperiores illo ipsam ea pariatur dicta quia animi repellat quis atque rerum distinctio officia eos vitae cupiditate.</p>
</div>
</div>
</div>
<div class="col g2-1of1 g3-1of3 g4-1of1">
<div class="in">
<div class="module">
<h1 class="h3">One Third</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad expedita cumque eveniet repudiandae asperiores illo ipsam ea pariatur dicta quia animi repellat quis atque rerum distinctio officia eos vitae cupiditate.</p>
</div>
</div>
</div>
<div class="col g2-1of1 g3-1of3 g4-1of1">
<div class="in">
<div class="module">
<h1 class="h3">One Third</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad expedita cumque eveniet repudiandae asperiores illo ipsam ea pariatur dicta quia animi repellat quis atque rerum distinctio officia eos vitae cupiditate.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col g-1of1 g4-3of5">
<div class="in">
<div class="row is-nested">
<div class="col g-1of1 g1-1of2">
<div class="in">
<div class="module">
<h1 class="h3">One Half</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad expedita cumque eveniet repudiandae asperiores illo ipsam ea pariatur dicta quia animi repellat quis atque rerum distinctio officia eos vitae cupiditate.</p>
</div>
</div>
</div>
<div class="col g-1of1 g1-1of2">
<div class="in">
<div class="module">
<h1 class="h3">One Half</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad expedita cumque eveniet repudiandae asperiores illo ipsam ea pariatur dicta quia animi repellat quis atque rerum distinctio officia eos vitae cupiditate.</p>
</div>
</div>
</div>
</div>
<div class="row is-nested">
<div class="col g-1of1 g3-1of3">
<div class="in">
<div class="module">
<h1 class="h3">One Third</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad expedita cumque eveniet repudiandae asperiores illo ipsam ea pariatur dicta quia animi repellat quis atque rerum distinctio officia eos vitae cupiditate.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad expedita cumque eveniet repudiandae asperiores illo ipsam ea pariatur dicta quia animi repellat quis atque rerum distinctio officia eos vitae cupiditate.</p>
</div>
</div>
</div>
<div class="col g-1of1 g3-2of3">
<div class="in">
<div class="row is-nested">
<div class="col g-1of1 g5-1of2">
<div class="in">
<div class="module">
<h1 class="h3">One Half</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad expedita cumque eveniet repudiandae asperiores illo ipsam ea pariatur dicta quia animi repellat quis atque rerum distinctio officia eos vitae cupiditate.</p>
</div>
</div>
</div>
<div class="col g-1of1 g5-1of2">
<div class="in">
<div class="module">
<h1 class="h3">One Half</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad expedita cumque eveniet repudiandae asperiores illo ipsam ea pariatur dicta quia animi repellat quis atque rerum distinctio officia eos vitae cupiditate.</p>
</div>
</div>
</div>
</div>
<div class="row is-nested">
<div class="col g-1of1">
<div class="in">
<div class="module">
<h1 class="h3">Full Width</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad expedita cumque eveniet repudiandae asperiores illo ipsam ea pariatur dicta quia animi repellat quis atque rerum distinctio officia eos vitae cupiditate.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col g-1of1 g4-1of5">
<div class="in">
<div class="module">
<h1 class="h3">One Fifth</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad expedita cumque eveniet repudiandae asperiores illo ipsam ea pariatur dicta quia animi repellat quis atque rerum distinctio officia eos vitae cupiditate.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad expedita cumque eveniet repudiandae asperiores illo ipsam ea pariatur dicta quia animi repellat quis atque rerum distinctio officia eos vitae cupiditate.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad expedita cumque eveniet repudiandae asperiores illo ipsam ea pariatur dicta quia animi repellat quis atque rerum distinctio officia eos vitae cupiditate.</p>
</div>
</div>
</div>
</div>
</div>
Raw
responsive-oocss-grid-system.markdown
Raw
style.css
/* Basic Typography Styles */
h1:first-child {
margin-top: 0;
}
h1:last-child,
p:last-child {
margin-bottom: 0;
}
h3,
.h3 {
font-size: 1.17em;
margin: 1em 0;
}
/* Basic Module */
.module {
padding: 15px;
background: rgba(255,0,0,.1);
}
/* Grid Styles */
.grid-wrap {
margin: 10px;
}
/* Clearfix Rows */
.row:before,
.row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}
/* Compensate Gutters for Nested Grids */
.is-nested {
margin-left: -10px;
margin-right: -10px;
}
/* Columns and Gutters */
.col {
float: left;
}
.col > .in {
margin-right: 10px;
margin-left: 10px;
/*background: rgba(255,0,0,.1);*/
}
/* Fix for Rounding Erros, apply to last column in a row */
.last-col {
float: none;
width: auto;
}
/* For reversing column float direction */
.rtl .col {
float: right;
_position:relative;
_left:-3px;
_margin-right:-3px;
}
.rtl .last-col {
_right:-3px;
_margin-left:-3px;
_margin-right:0;
_left:0;
}
/* Grid values */
.g-1of1 { width: 100%; }
.g-1of2 { width: 50%; }
.g-1of3 { width: 33.33333%; }
.g-2of3 { width: 66.66666%; }
.g-1of4 { width: 25%; }
.g-3of4 { width: 75%; }
.g-1of5 { width: 20%; }
.g-2of5 { width: 40%; }
.g-3of5 { width: 60%; }
.g-4of5 { width: 80%; }
.g-1of6 { width: 16.66666%; }
.g-4of6 { width: 66.66666%; }
.g-5of6 { width: 83.33333%; }
/* Grid values at breakpoints */
@media only screen and (min-width: 25.5em) {
.g1-1of1 { width: 100%; }
.g1-1of2 { width: 50%; }
.g1-1of3 { width: 33.33333%; }
.g1-2of3 { width: 66.66666%; }
.g1-1of4 { width: 25%; }
.g1-3of4 { width: 75%; }
.g1-1of5 { width: 20%; }
.g1-2of5 { width: 40%; }
.g1-3of5 { width: 60%; }
.g1-4of5 { width: 80%; }
.g1-1of6 { width: 16.66666%; }
.g1-4of6 { width: 66.66666%; }
.g1-5of6 { width: 83.33333%; }
}
@media only screen and (min-width: 32em) {
.g2-1of1 { width: 100%; }
.g2-1of2 { width: 50%; }
.g2-1of3 { width: 33.33333%; }
.g2-2of3 { width: 66.66666%; }
.g2-1of4 { width: 25%; }
.g2-3of4 { width: 75%; }
.g2-1of5 { width: 20%; }
.g2-2of5 { width: 40%; }
.g2-3of5 { width: 60%; }
.g2-4of5 { width: 80%; }
.g2-1of6 { width: 16.66666%; }
.g2-4of6 { width: 66.66666%; }
.g2-5of6 { width: 83.33333%; }
}
@media only screen and (min-width: 43.5em) {
.g3-1of1 { width: 100%; }
.g3-1of2 { width: 50%; }
.g3-1of3 { width: 33.33333%; }
.g3-2of3 { width: 66.66666%; }
.g3-1of4 { width: 25%; }
.g3-3of4 { width: 75%; }
.g3-1of5 { width: 20%; }
.g3-2of5 { width: 40%; }
.g3-3of5 { width: 60%; }
.g3-4of5 { width: 80%; }
.g3-1of6 { width: 16.66666%; }
.g3-4of6 { width: 66.66666%; }
.g3-5of6 { width: 83.33333%; }
}
@media only screen and (min-width: 52.5em) {
.g4-1of1 { width: 100%; }
.g4-1of2 { width: 50%; }
.g4-1of3 { width: 33.33333%; }
.g4-2of3 { width: 66.66666%; }
.g4-1of4 { width: 25%; }
.g4-3of4 { width: 75%; }
.g4-1of5 { width: 20%; }
.g4-2of5 { width: 40%; }
.g4-3of5 { width: 60%; }
.g4-4of5 { width: 80%; }
.g4-1of6 { width: 16.66666%; }
.g4-4of6 { width: 66.66666%; }
.g4-5of6 { width: 83.33333%; }
}
@media only screen and (min-width: 60em) {
.g5-1of1 { width: 100%; }
.g5-1of2 { width: 50%; }
.g5-1of3 { width: 33.33333%; }
.g5-2of3 { width: 66.66666%; }
.g5-1of4 { width: 25%; }
.g5-3of4 { width: 75%; }
.g5-1of5 { width: 20%; }
.g5-2of5 { width: 40%; }
.g5-3of5 { width: 60%; }
.g5-4of5 { width: 80%; }
.g5-1of6 { width: 16.66666%; }
.g5-4of6 { width: 66.66666%; }
.g5-5of6 { width: 83.33333%; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment