/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
html { height: 100%; font-size: 100%}
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
body {
font-family: 'Lato', Calibri, Arial, sans-serif;
background: #f9f9f9;
font-weight: 300;
font-size: 1em;
color: #333;
overflow: scroll;
overflow-x: hidden;
}
a {
color: #555;
text-decoration: none;
}
.container {
width: 100%;
position: relative;
}
.main,
.container > header {
width: 95%;
max-width: 1240px;
margin: 0 auto;
position: relative;
padding: 0 30px 50px 30px;
}
.container > header {
padding: 30px;
}
.container > header h1 {
font-size: 34px;
line-height: 38px;
margin: 0;
font-weight: 700;
color: #333;
float: left;
}
.container > header h1 span {
display: block;
font-size: 20px;
font-weight: 300;
}
/* Header Style */
.codrops-top {
line-height: 24px;
font-size: 11px;
background: #fff;
background: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
z-index: 9999;
position: relative;
box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.codrops-top a {
padding: 0px 10px;
letter-spacing: 1px;
color: #333;
display: inline-block;
}
.codrops-top a:hover {
background: rgba(255,255,255,0.8);
color: #000;
}
.codrops-top span.right {
float: right;
}
.codrops-top span.right a {
float: left;
display: block;
}
/* Demo Buttons Style */
.codrops-demos {
float: right;
padding-top: 10px;
}
.codrops-demos a {
display: inline-block;
margin: 10px;
color: #666;
font-weight: 700;
line-height: 30px;
border-bottom: 4px solid transparent;
}
.codrops-demos a:hover {
color: #000;
border-color: #000;
}
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
color: #aaa;
border-color: #aaa;
}
.support-note {
clear: both;
}
.support-note span{
color: #ac375d;
font-size: 16px;
display: none;
font-weight: bold;
text-align: center;
padding: 5px 0;
}
/*************************
DEMO STYLES
*************************/
@import url('demo.css');
/* Component Style */
body {
background-color: #fff;
}
img {
width: auto;
max-width: 100%;
height: auto;
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: middle;
}
.highlight {
background: transparent;
min-height: 32px;
min-height: 2rem;
box-shadow: inset 0 0 5px hsla(0, 0%, 0%, .15);
}
.highlight .highlight {
background: #7BCDC8;
box-shadow: none;
}
.decoration:before {
content: "IE D\003A";
font-weight: bold;
white-space: pre;
}
.resize {
position: fixed;
background-color: #7BCDC8;
background-color: hsla(176, 45%, 64%, .75);
color: #fff;
bottom: 0;
right: 0;
padding: .5em 4em 3em;
-webkit-transform: translate(70px, 15px) rotate(-45deg);
-o-transform: translate(70px, 15px) rotate(-45deg);
transform: translate(70px, 15px) rotate(-45deg);
z-index: 1000;
}
/* typography modifiers */
.ac { text-align: center;}
/* layout modifiers */
.mb-alpha {
margin-bottom: 16px;
margin-bottom: 1rem;
}
.mb-gamma {
margin-bottom: 48px;
margin-bottom: 3rem;
}
.d-iblock { display: inline-block;}
/*!
* Gridpak Beta CSS
*
* Generator - http://gridpak.com/
* Created by @erskinedesign
*/
.row {
margin-left: -24px;
margin-left: -1.5rem;
}
.ie8 .row { /* margin-left: 0 */}
/* Reusable column setup */
.col {
position: relative;
float: left;
border: 0px solid transparent;
border-left-width: 24px;
border-left-width: 1.5rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-background-clip: padding-box !important;
-webkit-background-clip: padding-box !important;
background-clip: padding-box !important;
}
.ie8 .col { /* padding: 0 24px; */}
.span_1_ie8 { width: 8.33333333333%;}
.span_2_ie8 { width: 16.6666666667%;}
.span_3_ie8 { width: 25.0%;}
.span_4_ie8 { width: 33.3333333333%;}
.span_5_ie8 { width: 41.6666666667%;}
.span_6_ie8 { width: 50.0%;}
.span_7_ie8 { width: 58.3333333333%;}
.span_8_ie8 { width: 66.6666666667%;}
.span_9_ie8 { width: 75.0%;}
.span_10_ie8 { width: 83.3333333333%;}
.span_11_ie8 { width: 91.6666666667%;}
.span_12_ie8 {
margin-left: 0;
width: 100%;
}
.pull_1_ie8 { left: -8.33333333333%;}
.pull_2_ie8 { left: -16.6666666667%;}
.pull_3_ie8 { left: -25.0%;}
.pull_4_ie8 { left: -33.3333333333%;}
.pull_5_ie8 { left: -41.6666666667%;}
.pull_6_ie8 { left: -50.0%;}
.pull_7_ie8 { left: -58.3333333333%;}
.pull_8_ie8 { left: -66.6666666667%;}
.pull_9_ie8 { left: -75.0%;}
.pull_10_ie8 { left: -83.3333333333%;}
.pull_11_ie8 { left: -91.6666666667%;}
.pull_12_ie8 { left: -100%;}
.push_1_ie8 { right: -8.33333333333%;}
.push_2_ie8 { right: -16.6666666667%;}
.push_3_ie8 { right: -25.0%;}
.push_4_ie8 { right: -33.3333333333%;}
.push_5_ie8 { right: -41.6666666667%;}
.push_6_ie8 { right: -50.0%;}
.push_7_ie8 { right: -58.3333333333%;}
.push_8_ie8 { right: -66.6666666667%;}
.push_9_ie8 { right: -75.0%;}
.push_10_ie8 { right: -83.3333333333%;}
.push_11_ie8 { right: -91.6666666667%;}
.push_12_ie8 { right: -100%;}
/* 1. 12 Column Grid 0px
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */
@media screen and (min-width: 0) {
.decoration:before { content: "\003A\0020\0029";}
.span_1_vpalpha { width: 8.33333333333%;}
.span_2_vpalpha { width: 16.6666666667%;}
.span_3_vpalpha { width: 25.0%;}
.span_4_vpalpha { width: 33.3333333333%;}
.span_5_vpalpha { width: 41.6666666667%;}
.span_6_vpalpha { width: 50.0%;}
.span_7_vpalpha { width: 58.3333333333%;}
.span_8_vpalpha { width: 66.6666666667%;}
.span_9_vpalpha { width: 75.0%;}
.span_10_vpalpha { width: 83.3333333333%;}
.span_11_vpalpha { width: 91.6666666667%;}
.span_12_vpalpha {
margin-left: 0;
width: 100%;
}
.pull_push_0_vpalpha { left: auto; right: auto;}
.pull_1_vpalpha { left: -8.33333333333%;}
.pull_2_vpalpha { left: -16.6666666667%;}
.pull_3_vpalpha { left: -25.0%;}
.pull_4_vpalpha { left: -33.3333333333%;}
.pull_5_vpalpha { left: -41.6666666667%;}
.pull_6_vpalpha { left: -50.0%;}
.pull_7_vpalpha { left: -58.3333333333%;}
.pull_8_vpalpha { left: -66.6666666667%;}
.pull_9_vpalpha { left: -75.0%;}
.pull_10_vpalpha { left: -83.3333333333%;}
.pull_11_vpalpha { left: -91.6666666667%;}
.pull_12_vpalpha { left: -100%;}
.push_1_vpalpha { right: -8.33333333333%;}
.push_2_vpalpha { right: -16.6666666667%;}
.push_3_vpalpha { right: -25.0%;}
.push_4_vpalpha { right: -33.3333333333%;}
.push_5_vpalpha { right: -41.6666666667%;}
.push_6_vpalpha { right: -50.0%;}
.push_7_vpalpha { right: -58.3333333333%;}
.push_8_vpalpha { right: -66.6666666667%;}
.push_9_vpalpha { right: -75.0%;}
.push_10_vpalpha { right: -83.3333333333%;}
.push_11_vpalpha { right: -91.6666666667%;}
.push_12_vpalpha { right: -100%;}
}
/* 2. 12 Column Grid 480px
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */
@media screen and (min-width: 30em) {
.decoration:before {
content: "\21A2";
}
.span_1_vpbeta { width: 8.33333333333%;}
.span_2_vpbeta { width: 16.6666666667%;}
.span_3_vpbeta { width: 25.0%;}
.span_4_vpbeta { width: 33.3333333333%;}
.span_5_vpbeta { width: 41.6666666667%;}
.span_6_vpbeta { width: 50.0%;}
.span_7_vpbeta { width: 58.3333333333%;}
.span_8_vpbeta { width: 66.6666666667%;}
.span_9_vpbeta { width: 75.0%;}
.span_10_vpbeta { width: 83.3333333333%;}
.span_11_vpbeta { width: 91.6666666667%;}
.span_12_vpbeta {
margin-left: 0;
width: 100%;
}
.pull_push_0_vpbeta { left: auto; right: auto;}
.pull_1_vpbeta { left: -8.33333333333%;}
.pull_2_vpbeta { left: -16.6666666667%;}
.pull_3_vpbeta { left: -25.0%;}
.pull_4_vpbeta { left: -33.3333333333%;}
.pull_5_vpbeta { left: -41.6666666667%;}
.pull_6_vpbeta { left: -50.0%;}
.pull_7_vpbeta { left: -58.3333333333%;}
.pull_8_vpbeta { left: -66.6666666667%;}
.pull_9_vpbeta { left: -75.0%;}
.pull_10_vpbeta { left: -83.3333333333%;}
.pull_11_vpbeta { left: -91.6666666667%;}
.pull_12_vpbeta { left: -100%;}
.push_1_vpbeta { right: -8.33333333333%;}
.push_2_vpbeta { right: -16.6666666667%;}
.push_3_vpbeta { right: -25.0%;}
.push_4_vpbeta { right: -33.3333333333%;}
.push_5_vpbeta { right: -41.6666666667%;}
.push_6_vpbeta { right: -50.0%;}
.push_7_vpbeta { right: -58.3333333333%;}
.push_8_vpbeta { right: -66.6666666667%;}
.push_9_vpbeta { right: -75.0%;}
.push_10_vpbeta { right: -83.3333333333%;}
.push_11_vpbeta { right: -91.6666666667%;}
.push_12_vpbeta { right: -100%;}
}
/* 3. 12 Column Grid 640px
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */
@media screen and (min-width: 40em) {
.decoration:before {
content: "\005f\005f\005f \0020 \005f\005f\005f \0020 \005f \0020 \005f \000A \005f \0020 \005f \0020 \005f \0020 \005f\005f\005f\005f\005f \000A \005f\005f\005f\005f\005f \0020 \005f \0020 \005f \0020 \005f \000A \0020 \005f \0020 \005f \0020 \005f\005f\005f \0020 \005f\005f\005f";
}
.span_1_vpgamma { width: 8.33333333333%;}
.span_2_vpgamma { width: 16.6666666667%;}
.span_3_vpgamma { width: 25.0%;}
.span_4_vpgamma { width: 33.3333333333%;}
.span_5_vpgamma { width: 41.6666666667%;}
.span_6_vpgamma { width: 50.0%;}
.span_7_vpgamma { width: 58.3333333333%;}
.span_8_vpgamma { width: 66.6666666667%;}
.span_9_vpgamma { width: 75.0%;}
.span_10_vpgamma { width: 83.3333333333%;}
.span_11_vpgamma { width: 91.6666666667%;}
.span_12_vpgamma {
margin-left: 0;
width: 100%;
}
.pull_push_0_vpgamma { left: auto; right: auto;}
.pull_1_vpgamma { left: -8.33333333333%;}
.pull_2_vpgamma { left: -16.6666666667%;}
.pull_3_vpgamma { left: -25.0%;}
.pull_4_vpgamma { left: -33.3333333333%;}
.pull_5_vpgamma { left: -41.6666666667%;}
.pull_6_vpgamma { left: -50.0%;}
.pull_7_vpgamma { left: -58.3333333333%;}
.pull_8_vpgamma { left: -66.6666666667%;}
.pull_9_vpgamma { left: -75.0%;}
.pull_10_vpgamma { left: -83.3333333333%;}
.pull_11_vpgamma { left: -91.6666666667%;}
.pull_12_vpgamma { left: -100%;}
.push_1_vpgamma { right: -8.33333333333%;}
.push_2_vpgamma { right: -16.6666666667%;}
.push_3_vpgamma { right: -25.0%;}
.push_4_vpgamma { right: -33.3333333333%;}
.push_5_vpgamma { right: -41.6666666667%;}
.push_6_vpgamma { right: -50.0%;}
.push_7_vpgamma { right: -58.3333333333%;}
.push_8_vpgamma { right: -66.6666666667%;}
.push_9_vpgamma { right: -75.0%;}
.push_10_vpgamma { right: -83.3333333333%;}
.push_11_vpgamma { right: -91.6666666667%;}
.push_12_vpgamma { right: -100%;}
}
<!doctype html>
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9 oldie" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Grids</title>
<!--[if lte IE 7]><style>.support-note .note-ie{display:block;}</style><![endif]-->
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top cf">
<span class="right">
<a href="http://lorempixel.com/">Images by lorempixel.com</a>
</span>
</div><!--/ Codrops top bar -->
<header class="cf">
<div class="support-note">
<span class="note-ie">Sorry, only modern browsers.</span>
</div>
</header>
<div class="main">
<div class="resize"><small><strong>resize me!</strong></small></div>
<div class="row cf">
<div class="mb-gamma col span_12_vpalpha span_3_vpgamma span_3_ie8">
<div class="row cf">
<div class="col span_3_vpalpha span_12_vpgamma span_12_ie8">
<img class="mb-alpha" src="http://lorempixel.com/300/300/people/7">
</div>
<div class="col span_9_vpalpha span_7_vpbeta span_12_vpgamma col-12-ie8">
<h1>Pikaboo!</h1>
</div>
<div class="col span_9_vpalpha span_2_vpbeta span_12_vpgamma col-12-ie8">
<small class="d-iblock mb-alpha"><sub>4 Jan, 2052</sub></small>
</div>
<div class="col span_12_vpalpha span_9_vpbeta span_12_vpgamma col-12-ie8">
<p class="mb-alpha">Each year, Oscar attempts the four hundred mile walk from Newport Beach to Berkeley, California. In the twelve years that he's attempted this, he's never made it farther than UC Irvine.</p>
</div>
</div>
</div>
<div class="mb-gamma col span_12_vpalpha span_3_vpgamma span_3_ie8">
<div class="row cf">
<div class="col span_3_vpalpha push_9_vpalpha span_12_vpgamma pull_push_0_vpgamma span_12_ie8">
<img class="mb-alpha" src="http://lorempixel.com/300/300/people/9">
</div>
<div class="col span_9_vpalpha pull_3_vpalpha span_7_vpbeta span_12_vpgamma pull_push_0_vpgamma col-12-ie8">
<h1>Well Red</h1>
</div>
<div class="col span_9_vpalpha pull_3_vpalpha span_2_vpbeta span_12_vpgamma pull_push_0_vpgamma col-12-ie8">
<small class="d-iblock mb-alpha"><sub>29 Feb, 2052</sub></small>
</div>
<div class="col span_12_vpalpha pull_3_vpbeta span_9_vpbeta span_12_vpgamma pull_push_0_vpgamma col-12-ie8">
<p class="mb-alpha">What is she doing at a beauty pageant? Is she running the lights or something? I'm foolish and I'm funny and I'm needy. Am I needy?</p>
</div>
</div>
</div>
<div class="mb-gamma col span_12_vpalpha span_3_vpgamma span_3_ie8">
<div class="row cf">
<div class="col span_3_vpalpha span_12_vpgamma span_12_ie8">
<img class="mb-alpha" src="http://lorempixel.com/300/300/sports/4">
</div>
<div class="col span_9_vpalpha span_7_vpbeta span_12_vpgamma col-12-ie8">
<h1>Airtime</h1>
</div>
<div class="col span_9_vpalpha span_2_vpbeta span_12_vpgamma col-12-ie8">
<small class="d-iblock mb-alpha"><sub>16 Jul, 2052</sub></small>
</div>
<div class="col span_12_vpalpha span_9_vpbeta span_12_vpgamma col-12-ie8">
<p class="mb-alpha">One of the guys told me to take my head out of my BOTTOM and get back to work…my BOTTOM! Hahahaha. Say something that will terrify me.</p>
</div>
</div>
</div>
<div class="mb-gamma col span_12_vpalpha span_3_vpgamma span_3_ie8">
<div class="row cf">
<div class="col span_3_vpalpha push_9_vpalpha span_12_vpgamma pull_push_0_vpgamma span_12_ie8">
<img class="mb-alpha" src="http://lorempixel.com/300/300/people/5">
</div>
<div class="col span_9_vpalpha pull_3_vpalpha span_7_vpbeta span_12_vpgamma pull_push_0_vpgamma col-12-ie8">
<h1>Trained</h1>
</div>
<div class="col span_9_vpalpha pull_3_vpalpha span_2_vpbeta span_12_vpgamma pull_push_0_vpgamma col-12-ie8">
<small class="d-iblock mb-alpha"><sub>1 Nov, 2052</sub></small>
</div>
<div class="col span_12_vpalpha pull_3_vpbeta span_9_vpbeta span_12_vpgamma pull_push_0_vpgamma col-12-ie8">
<p class="mb-alpha">Everything they do is so dramatic and flamboyant. It just makes me want to set myself on fire. Oh, hi, Mom. I have the afternoon free. Really? Did "nothing" cancel?</p>
</div>
</div>
</div>
</div><!-- .row -->
</div><!-- .main -->
</div><!-- /container -->
</body>
</html>