JSFiddle - React, Tailwind, and code Playground

Avantgrid

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<script src="http://fonts.googleapis.com/css?family=Droid+Sans:400,700|Racing+Sans+One"></script>
<div class="grid">
    <header>
         <h1><b> Avant</b>grid </h1> 
        <p>While we wait for <code>Flexbox</code> to be widely supported. Avantgrid is a mobile first responsive grid sytem utilising the property <code>display:inline-block.</code> This is by no means finished and is still a little rough round the edges, if you have any suggestions please feel free to get involved on Github.</p>
    </header>
</div>
<div class="block-1-1">.block-1-1</div>
<div class="block-1-2">.block-1-2</div>
<div class="block-1-2">.block-1-2</div>
<div class="block-2-3">.block-2-3</div>
<div class="block-1-3">.block-1-3</div>
<div class="block-1-3">.block-1-3</div>
<div class="block-1-3">.block-1-3</div>
<div class="block-1-3">.block-1-3</div>
<div class="block-1-2">.block-1-2</div>
<div class="block-1-4">.block-1-4</div>
<div class="block-1-4">.block-1-4</div>
<div class="block-1-5">.block-1-5</div>
<div class="block-1-5">.block-1-5</div>
<div class="block-3-5">.block-3-5</div>
<div class="block-1-6">.block-1-6</div>
<div class="block-1-6">.block-1-6</div>
<div class="block-1-6">.block-1-6</div>
<div class="block-1-6">.block-1-6</div>
<div class="block-1-6">.block-1-6</div>
<div class="block-1-6">.block-1-6</div>
</div>
<!--============N ested Elements=============- -> 

<div class="grid" id="nested">
  <header>
    <h3> Nested </h3>
    <p>Nesting is pretty simple, just add another <code>.grid</code> container inside a <code>.block-X-X</code> element. Take note all examples on this page have a padding of 1em, which isn't included in the _avantgrid.scss or grid.css so nested elemnts will look different. </p>
  </header>
  <div class="block-1-1">
    .block-1-1
    <div class="grid">
      <div class="block-2-3">
        .block-2-3
        <div class="grid">
          <div...

CSS

@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400, 700|Racing+Sans+One);

/* Global Variables */

/* changing box model on all elements */
 *, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/* This is a list of direct decendant elements that need their right margin adjusting when aligned center or right.*/
 .grid, .grid-center, .grid-right {
    margin-left: -2%;
    max-width: 105%;
}
.grid-center {
    text-align: center;
}
.grid-center > div, .grid-center header, .grid-center img, .grid-center footer, .grid-center article, .grid-center section {
    margin-right: 0.125em;
}
.grid-right {
    text-align: right;
}
.grid-right > div, .grid-right header, .grid-right img, .grid-right footer, .grid-right article, .grid-right section {
    margin-right: 0.20em;
}
.grid-justify {
    margin-left: 0;
    max-width: 105%;
    text-align: justify;
}
.grid-justify:after {
    content:'';
    display: inline-block;
    width: 100%;
}
/* Setting up class names */
[class*="justify-"] {
    margin-top: 1em;
    overflow: hidden;
    *overflow: visible;
    display: block;
    vertical-align: top;
    width: 100%;
}
@media (min-width: 31.25em) {
    [class*="justify-"] {
        display: inline-block;
        *display: inline;
        *zoom: 1;
    }
}
[class*="justify-"]:last-of-type {
    margin-right: -0.1125em;
}
[class*="block-"], .block-extend, header {
    margin-left: 2%;
    margin-right: -0.25em;
    margin-top: 1em;
    overflow: hidden;
    *overflow: visible;
    display: block;
    vertical-align: top;
    width: 98%;
}
@media (min-width: 31.25em) {
    [class*="block-"], .block-extend, header {
        display: inline-block;
        *display: inline;
        *zoom: 1;
    }
}
.block-1-1, header, .justify-1-1 {
    width: 98%;
}
@media (min-width: 48.875em) {
    .block-1-2, .justify-1-2 {
        width: 48%;
    }
}
@media (min-width: 31.25em)...

JavaScript

$('#h-align li').click(function () {
    $('#h-align li').removeClass('selected');
    $(this).addClass('selected');
    $('#h-align').removeClass();
    $('#h-align').addClass($(this).attr('value'));
});

$('.v-align li').click(function () {
    $('.v-align li').removeClass('selected');
    $(this).addClass('selected');
    $('#v-align div').removeClass();
    $('#v-align div').addClass($(this).attr('value'));
});