Skip to content

Instantly share code, notes, and snippets.

@ovdojoey

ovdojoey/flex_test.html

Created August 11, 2015 20:33
Show Gist options
  • Save ovdojoey/5f14c793dea4911c754f to your computer and use it in GitHub Desktop.
Save ovdojoey/5f14c793dea4911c754f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flex_test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flex</title>
<link rel="stylesheet" href="https://gist.githubusercontent.com/ovdojoey/08d310ee8c07ac36330a/raw/ef31781517bc73f052977de26145a52996b9f8e0/juiced_v0.1.css">
<style>
#container-test{
color: #fff;
/*height: 200px;*/
}
#big-center{
width: 500px;
background: #444;
}
.col {
/*min-width: 100px;*/
}
</style>
</head>
<body>
<div class="container text-center justify-space-around items-center gutters" id="container-test">
<div class="col-xs-4 col-6 col-lg-3" style="background: #aaa">
<div class="container items-center" style="height: 200px;">
<div class="col-12">
col-xs-4 &nbsp; col-6 &nbsp; col-lg-3
</div>
</div>
</div>
<div class="col-xs-4 col-6 col-lg-6" style="background: #999;">
<div class="container items-center" style="height: 200px;">
<div class="col-12">
col-xs-4 &nbsp; col-6 &nbsp; col-lg-6
</div>
</div>
</div>
<div class="col-xs-4 col-12 col-lg-3" style="background: #a3a;">
<div class="container items-center" style="height: 200px;">
<div class="col-12">
col-xs-4 &nbsp; col-12 &nbsp; col-lg-3
</div>
</div>
</div>
<div class="col-sm-6" style="background: #4ab">col-sm-6</div>
<div class="col-sm-6" style="background:#1a4;">col-sm-6</div>
<div class="col-md-6 col-lg-4 " style="background: #a1a; padding: 15px;">
col-md-6 &nbsp; col-lg-4
<br />
<small>Leaving off the mobile-first col- tag will force 12 columns on mobile</small>
</div>
<div class="col-md-6 col-lg-4" style="background: red;">col-md-6 &nbsp; col-lg-4 <div><small>im centered vertically</small></div></div>
<div class="col-md-12 col-lg-4" style="background:#555; padding: 15px;">
col-md-12 &nbsp; col-lg-4
<br />
forget about vertical-align: middle, veritcal centering is default! You have more control using items- class.
</div>
</div>
<br />
<div class="container gutters">
<div class="col-12">
<h2 class="text-left">Juiced: Front end framework</h2>
<p class="text-left">Juiced keeps a lot of the same grid features that you know and love, and improves them by adding more media queries for better mobile targeting, custom ordering, no gutters by default, and less boilerplate styles. Using the power of
Flexbox, Juiced makes layouts a breeze.</p>
</div>
</div>
<br />
<div class="container gutters">
<div class="col-12">
<h2 class="text-left">Ordering</h2>
<p class="text-left">Ordering columns was a pain! Push this many columns over, pull this many! It was a tricky mess! Juiced makes ordering a breeze.
There are 12 ordering classes per breakpoint.
</p>
<p>Simply add them by using:
<br />
col-order-$x &nbsp; or &nbsp; col-$breakpoint-$x
<br /><br />
<small>where $x equals an interger between 1 and 12 and $breakpoint is equal to xs, sm, md, or lg.</small>
</p>
</div>
</div>
<div class="container gutters">
<div class="col-12">
<div class="container text-center" style="background: #222; color: #fff;">
<div class="col-xs-4 col-12 col-lg-order-1 col-xs-order-3 col-sm-order-2 col-md-order-2 col-order-1" style="background:green;">
<STRONG>ORDERING</strong> <br /><br />
mobile: 1<br />
XS: 3<br />
SM: 2<br />
MD: 2<br />
LG: 1
</div>
<div class="col-xs-4 col-12 col-lg-order-2 col-xs-order-1 col-sm-order-3 col-md-order-1 col-order-3" style="background:red;">
<STRONG>ORDERING</strong> <br /><br />
mobile: 3<br />
XS: 1<br />
SM: 3<br />
MD: 1<br />
LG: 2
</div>
<div class="col-xs-4 col-12 col-lg-order-3 col-xs-order-2 col-sm-order-1 col-md-order-3 col-order-2">
<STRONG>ORDERING</strong> <br /><br />
mobile: 2<br />
XS: 2<br />
SM: 1<br />
MD: 3<br />
LG: 3
</div>
</div>
</div>
</div>
<br />
<div class="container full-width justify-center text-center">
<div class="col-12 text-center"><h3>Medium Row <em>col-md-2</em></h3></div>
<div class="col-md-2 col-sm-3 col-6 col-xs-4">col-md-2 col-sm-3</div>
<div class="col-md-2 col-sm-3 col-6 col-xs-4">col-md-2 col-sm-3</div>
<div class="col-md-2 col-sm-3 col-12 col-xs-4">col-md-2 col-sm-3</div>
<div class="col-md-2 col-sm-3">col-md-2 col-sm-3</div>
<div class="col-md-2 col-sm-6">col-md-2 col-sm-3</div>
<div class="col-md-2 col-sm-6">col-md-2 col-sm-6</div>
<div class="col-md-2 col-sm-6">col-md-2 col-sm-6</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment