Skip to content

Instantly share code, notes, and snippets.

@micmath

micmath/index.html

Created November 27, 2017 17:24
Show Gist options
  • Save micmath/96d1aaab40e2b9774ab666e21443fb40 to your computer and use it in GitHub Desktop.
Save micmath/96d1aaab40e2b9774ab666e21443fb40 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/pilahor
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
* { box-sizing: border-box; }
body {
margin: 0;
padding: 0;
}
main {
padding: 0 15px;
}
/*== rows ==========================*/
.row {
border: 0;
margin: 0;
padding: 0;
margin-bottom: 10.66666666px;
}
.row:after {
content: "";
display: table;
clear: both;
}
/*== cols ==========================*/
.col {
float: left;
text-align: justify;
xborder-left: 1px dashed #993333;
padding-left: 0px;
padding-right: 0px;
}
/*== halves ========================*/
.halves .col,
.halves .x1 {
width: 50%;
}
.halves .col:first-child {
padding-left: 0;
padding-right: 5.3333px;
}
.halves .col:last-child {
padding-left: 5.3333px;
padding-right: 0;
}
/*== quarters ======================*/
.quarters .col,
.quarters .x1 {
width: 25%;
}
.quarters .col:first-child {
padding-left: 0;
padding-right: 8px;
}
.quarters .col:nth-of-type(2) {
padding-left: 2.6666px;
padding-right: 5.3333px;
}
.quarters .col:nth-of-type(3) {
padding-left: 5.3333px;
padding-right: 2.6666px;
}
.quarters .col:last-child {
padding-left: 8px;
padding-right: 0;
}
.quarters .x2:first-child {
width: 50%;
padding-left: 0px;
padding-right: 5.3333px;
}
.quarters .x2:first-child + .col {
padding-left: 5.3333px;
padding-right: 2.6666px;
}
.quarters .x2:last-child {
width: 50%;
padding-left: 5.3333px;
padding-right: 0;
}
.quarters .x2:nth-of-type(2) {
width: 50%;
padding-left: 2.6666px;
padding-right: 2.6666px;
}
.quarters .x3:first-child {
width: 75%;
padding-left: 0px;
padding-right: 2.6666px;
}
.quarters .x3:last-child {
width: 75%;
padding-left: 2.6666px;
padding-right: 0;
}
/*== thirds =======================*/
.thirds .col,
.thirds .x1 {
width: 33.3333%;
}
.thirds .col:first-child {
padding-left: 0;
padding-right: 7.1111px;
}
.thirds .col:nth-of-type(2) {
padding-left: 3.5555px;
padding-right: 3.5555px;
}
.thirds .col:last-child {
padding-left: 7.1111px;
padding-right: 0;
}
.thirds .x2:first-child {
width: 66.6666%;
padding-left: 0px;
padding-right: 3.5555px;
}
.thirds .x2:last-child {
width: 66.6666%;
padding-left: 3.5555px;
padding-right: 0;
}
/*== wholes ======================*/
.whole .col,
.thirds .x3,
.halves .x2,
.quarters .x4 {
width: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
}
/*== cards =======================*/
.card {
border: 1px solid #999;
padding: 12px;
background: white;
}
</style>
</head>
<body>
<main class="main">
<h1>Griddle</h1>
<p>An itty bitty griddy.</p>
<h2>Quarters</h2>
<div class="row quarters">
<div class="col">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
</div>
<div class="col">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
</div>
<div class="col">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
</div>
<div class="col">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
</div>
</div>
<div class="row quarters">
<div class="col x2">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
</div>
<div class="col">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
</div>
<div class="col">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
</div>
</div>
<div class="row quarters">
<div class="col">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
</div>
<div class="col">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
</div>
<div class="col x2">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
</div>
</div>
<div class="row quarters">
<div class="col">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
</div>
<div class="col x2">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
</div>
<div class="col">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
</div>
</div>
<div class="row quarters">
<div class="col x3">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
</div>
<div class="col">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
</div>
</div>
<div class="row quarters">
<div class="col">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
</div>
<div class="col x3">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
</div>
</div>
<h2>Halves</h2>
<div class="row halves">
<div class="col">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
</div>
<div class="col">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
</div>
</div>
<div class="row halves">
<div class="col x2">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
</div>
</div>
<h2>Thirds</h2>
<section class="row thirds">
<div class="col">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
</div>
<div class="col">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
</div>
<div class="col">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
</div>
</section>
<div class="row thirds">
<div class="col x2">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
</div>
<div class="col">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
</div>
</div>
<div class="row thirds">
<div class="col">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
</div>
<div class="col x2">
<div class="card">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</div>
</div>
</div>
</main>
<script id="jsbin-source-css" type="text/css">* { box-sizing: border-box; }
body {
margin: 0;
padding: 0;
}
main {
padding: 0 15px;
}
/*== rows ==========================*/
.row {
border: 0;
margin: 0;
padding: 0;
margin-bottom: 10.66666666px;
}
.row:after {
content: "";
display: table;
clear: both;
}
/*== cols ==========================*/
.col {
float: left;
text-align: justify;
xborder-left: 1px dashed #993333;
padding-left: 0px;
padding-right: 0px;
}
/*== halves ========================*/
.halves .col,
.halves .x1 {
width: 50%;
}
.halves .col:first-child {
padding-left: 0;
padding-right: 5.3333px;
}
.halves .col:last-child {
padding-left: 5.3333px;
padding-right: 0;
}
/*== quarters ======================*/
.quarters .col,
.quarters .x1 {
width: 25%;
}
.quarters .col:first-child {
padding-left: 0;
padding-right: 8px;
}
.quarters .col:nth-of-type(2) {
padding-left: 2.6666px;
padding-right: 5.3333px;
}
.quarters .col:nth-of-type(3) {
padding-left: 5.3333px;
padding-right: 2.6666px;
}
.quarters .col:last-child {
padding-left: 8px;
padding-right: 0;
}
.quarters .x2:first-child {
width: 50%;
padding-left: 0px;
padding-right: 5.3333px;
}
.quarters .x2:first-child + .col {
padding-left: 5.3333px;
padding-right: 2.6666px;
}
.quarters .x2:last-child {
width: 50%;
padding-left: 5.3333px;
padding-right: 0;
}
.quarters .x2:nth-of-type(2) {
width: 50%;
padding-left: 2.6666px;
padding-right: 2.6666px;
}
.quarters .x3:first-child {
width: 75%;
padding-left: 0px;
padding-right: 2.6666px;
}
.quarters .x3:last-child {
width: 75%;
padding-left: 2.6666px;
padding-right: 0;
}
/*== thirds =======================*/
.thirds .col,
.thirds .x1 {
width: 33.3333%;
}
.thirds .col:first-child {
padding-left: 0;
padding-right: 7.1111px;
}
.thirds .col:nth-of-type(2) {
padding-left: 3.5555px;
padding-right: 3.5555px;
}
.thirds .col:last-child {
padding-left: 7.1111px;
padding-right: 0;
}
.thirds .x2:first-child {
width: 66.6666%;
padding-left: 0px;
padding-right: 3.5555px;
}
.thirds .x2:last-child {
width: 66.6666%;
padding-left: 3.5555px;
padding-right: 0;
}
/*== wholes ======================*/
.whole .col,
.thirds .x3,
.halves .x2,
.quarters .x4 {
width: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
}
/*== cards =======================*/
.card {
border: 1px solid #999;
padding: 12px;
background: white;
}</script>
</body>
</html>
Raw
jsbin.pilahor.css
* { box-sizing: border-box; }
body {
margin: 0;
padding: 0;
}
main {
padding: 0 15px;
}
/*== rows ==========================*/
.row {
border: 0;
margin: 0;
padding: 0;
margin-bottom: 10.66666666px;
}
.row:after {
content: "";
display: table;
clear: both;
}
/*== cols ==========================*/
.col {
float: left;
text-align: justify;
xborder-left: 1px dashed #993333;
padding-left: 0px;
padding-right: 0px;
}
/*== halves ========================*/
.halves .col,
.halves .x1 {
width: 50%;
}
.halves .col:first-child {
padding-left: 0;
padding-right: 5.3333px;
}
.halves .col:last-child {
padding-left: 5.3333px;
padding-right: 0;
}
/*== quarters ======================*/
.quarters .col,
.quarters .x1 {
width: 25%;
}
.quarters .col:first-child {
padding-left: 0;
padding-right: 8px;
}
.quarters .col:nth-of-type(2) {
padding-left: 2.6666px;
padding-right: 5.3333px;
}
.quarters .col:nth-of-type(3) {
padding-left: 5.3333px;
padding-right: 2.6666px;
}
.quarters .col:last-child {
padding-left: 8px;
padding-right: 0;
}
.quarters .x2:first-child {
width: 50%;
padding-left: 0px;
padding-right: 5.3333px;
}
.quarters .x2:first-child + .col {
padding-left: 5.3333px;
padding-right: 2.6666px;
}
.quarters .x2:last-child {
width: 50%;
padding-left: 5.3333px;
padding-right: 0;
}
.quarters .x2:nth-of-type(2) {
width: 50%;
padding-left: 2.6666px;
padding-right: 2.6666px;
}
.quarters .x3:first-child {
width: 75%;
padding-left: 0px;
padding-right: 2.6666px;
}
.quarters .x3:last-child {
width: 75%;
padding-left: 2.6666px;
padding-right: 0;
}
/*== thirds =======================*/
.thirds .col,
.thirds .x1 {
width: 33.3333%;
}
.thirds .col:first-child {
padding-left: 0;
padding-right: 7.1111px;
}
.thirds .col:nth-of-type(2) {
padding-left: 3.5555px;
padding-right: 3.5555px;
}
.thirds .col:last-child {
padding-left: 7.1111px;
padding-right: 0;
}
.thirds .x2:first-child {
width: 66.6666%;
padding-left: 0px;
padding-right: 3.5555px;
}
.thirds .x2:last-child {
width: 66.6666%;
padding-left: 3.5555px;
padding-right: 0;
}
/*== wholes ======================*/
.whole .col,
.thirds .x3,
.halves .x2,
.quarters .x4 {
width: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
}
/*== cards =======================*/
.card {
border: 1px solid #999;
padding: 12px;
background: white;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment