Skip to content

Instantly share code, notes, and snippets.

@DannyJoris

DannyJoris/SassMeister-input-HTML.html

Created April 17, 2015 14:00
Show Gist options
  • Save DannyJoris/03e953095162c48fe2ae to your computer and use it in GitHub Desktop.
Save DannyJoris/03e953095162c48fe2ae to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<p class="container">Fluid gutters (2%) with nested items</p>
<div class="container">
<article class="block"><div class="inline"></div></article>
<article class="block"><div class="inline"></div></article>
<article class="block block-nested">
<div class="block"><div class="inline"></div></div>
<div class="block"><div class="inline"></div></div>
<div class="block"><div class="inline"></div></div>
</article>
</div>
<p class="container">Fixed gutters (20px) with nested items</p>
<div class="container">
<article class="block2"><div class="inline"></div></article>
<article class="block2"><div class="inline"></div></article>
<article class="block2 block-nested">
<div class="block2"><div class="inline"></div></div>
<div class="block2"><div class="inline"></div></div>
<div class="block2"><div class="inline"></div></div>
</article>
</div>
<p class="container">Fixed gutters (20px) with nested items</p>
<div class="container">
<article class="block2"><div class="inline"></div></article>
<article class="block2"><div class="inline"></div></article>
<article class="block2 block-nested">
<div class="block"><div class="inline"></div></div>
<div class="block"><div class="inline"></div></div>
<div class="block"><div class="inline"></div></div>
<div class="block"><div class="inline"></div></div>
</article>
</div>
<p class="container">Fixed gutters (20px) without nested items, still matching the layout of the previous grid with nested items.</p>
<div class="container">
<article class="block3"><div class="inline"></div></article>
<article class="block3"><div class="inline"></div></article>
<article class="block3"><div class="inline"></div></article>
<article class="block3"><div class="inline"></div></article>
<article class="block3"><div class="inline"></div></article>
<article class="block3"><div class="inline"></div></article>
<article class="block3"><div class="inline"></div></article>
<article class="block3"><div class="inline"></div></article>
<article class="block3"><div class="inline"></div></article>
<article class="block3"><div class="inline"></div></article>
<article class="block3"><div class="inline"></div></article>
<article class="block3"><div class="inline"></div></article>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.2.19)
// Compass (v0.12.7)
// Breakpoint (v2.0.7)
// Zen Grids (v1.4)
// ----
// Nested containers
// Variable gutter width vs fixed
@import "breakpoint";
@import "zen";
$luigi: 600px 4;
$yoshi: 960px 12;
$zen-column-count: 12;
$zen-box-sizing: border-box;
$container-max-width: 1200px;
$zen-gutter-width: 2%;
@mixin at-breakpoint($breakpoint) {
@include breakpoint(nth($breakpoint, 1)) {
$zen-column-count: nth($breakpoint, 2);
@content;
}
}
.container {
max-width: $container-max-width;
margin: 0 auto 20px;
overflow: auto;
}
article {
height: 75px;
box-sizing: border-box;
}
.block {
width: 100%;
background: pink;
&:nth-child(3n + 1) {
@include at-breakpoint($luigi) {
@include zen-grid-item(2, 1, left);
@include zen-clear(left);
}
@include at-breakpoint($yoshi) {
@include zen-grid-item(4, 1, left);
@include zen-clear(left);
}
}
&:nth-child(3n + 2) {
@include at-breakpoint($luigi) {
@include zen-grid-item(2, 3, left);
@include zen-clear(none);
}
@include at-breakpoint($yoshi) {
@include zen-grid-item(4, 5, left);
@include zen-clear(none);
}
}
&:nth-child(3n) {
@include at-breakpoint($luigi) {
@include zen-grid-item(2, 3, left);
@include zen-clear(none);
}
@include at-breakpoint($yoshi) {
@include zen-grid-item(4, 9, left);
@include zen-clear(none);
}
}
}
.block2 {
$zen-gutter-width: 20px;
width: 100%;
background: pink;
&:nth-child(3n + 1) {
@include at-breakpoint($luigi) {
@include zen-grid-item(2, 1, left);
@include zen-clear(left);
}
@include at-breakpoint($yoshi) {
@include zen-grid-item(4, 1, left);
@include zen-clear(left);
}
}
&:nth-child(3n + 2) {
@include at-breakpoint($luigi) {
@include zen-grid-item(2, 3, left);
@include zen-clear(none);
}
@include at-breakpoint($yoshi) {
@include zen-grid-item(4, 5, left);
@include zen-clear(none);
}
}
&:nth-child(3n) {
@include at-breakpoint($luigi) {
@include zen-grid-item(2, 3, left);
@include zen-clear(none);
}
@include at-breakpoint($yoshi) {
@include zen-grid-item(4, 9, left);
@include zen-clear(none);
}
}
}
.block-nested:nth-child(3n) {
@include at-breakpoint($luigi) {
@include zen-nested-container();
}
@include at-breakpoint($yoshi) {
@include zen-nested-container();
}
}
.block2 > .block {
&:nth-child(4n + 1) {
@include at-breakpoint($luigi) {
}
@include at-breakpoint($yoshi) {
@include zen-grid-item(3, 1, left);
@include zen-clear(left);
}
}
&:nth-child(4n + 2) {
@include at-breakpoint($luigi) {
}
@include at-breakpoint($yoshi) {
@include zen-grid-item(3, 4, left);
@include zen-clear(none);
}
}
&:nth-child(4n + 3) {
@include at-breakpoint($luigi) {
}
@include at-breakpoint($yoshi) {
@include zen-grid-item(3, 7, left);
@include zen-clear(none);
}
}
&:nth-child(4n) {
@include at-breakpoint($luigi) {
}
@include at-breakpoint($yoshi) {
@include zen-grid-item(3, 10, left);
@include zen-clear(none);
}
}
}
.block3 {
$zen-gutter-width: 20px;
width: 100%;
background: pink;
&:nth-child(1) {
@include at-breakpoint($yoshi) {
@include zen-grid-item(1, 1, left);
@include zen-clear(left);
}
}
&:nth-child(2) {
@include at-breakpoint($yoshi) {
@include zen-grid-item(1, 2, left);
@include zen-clear(none);
}
}
&:nth-child(3) {
@include at-breakpoint($yoshi) {
@include zen-grid-item(1, 3, left);
@include zen-clear(none);
}
}
&:nth-child(4) {
@include at-breakpoint($yoshi) {
@include zen-grid-item(1, 4, left);
@include zen-clear(none);
}
}
&:nth-child(5) {
@include at-breakpoint($yoshi) {
@include zen-grid-item(1, 5, left);
@include zen-clear(none);
}
}
&:nth-child(6) {
@include at-breakpoint($yoshi) {
@include zen-grid-item(1, 6, left);
@include zen-clear(none);
}
}
&:nth-child(7) {
@include at-breakpoint($yoshi) {
@include zen-grid-item(1, 7, left);
@include zen-clear(none);
}
}
&:nth-child(8) {
@include at-breakpoint($yoshi) {
@include zen-grid-item(1, 8, left);
@include zen-clear(none);
}
}
&:nth-child(9) {
@include at-breakpoint($yoshi) {
@include zen-grid-item(1, 9, left);
@include zen-clear(none);
}
}
&:nth-child(10) {
@include at-breakpoint($yoshi) {
@include zen-grid-item(1, 10, left);
@include zen-clear(none);
}
}
&:nth-child(11) {
@include at-breakpoint($yoshi) {
@include zen-grid-item(1, 11, left);
@include zen-clear(none);
}
}
&:nth-child(12) {
@include at-breakpoint($yoshi) {
@include zen-grid-item(1, 12, left);
@include zen-clear(none);
}
}
}
.inline {
width: 100%;
height: 75px;
background: hotpink;
}
.block-nested .inline {
background: deeppink;
}
.hotpink {
background: hotpink;
}
Raw
SassMeister-output.css
.container {
max-width: 1200px;
margin: 0 auto 20px;
overflow: auto;
}
article {
height: 75px;
box-sizing: border-box;
}
.block {
width: 100%;
background: pink;
}
@media (min-width: 600px) {
.block:nth-child(3n + 1) {
float: left;
width: 50%;
margin-left: 0%;
margin-right: -50%;
padding-left: 1%;
padding-right: 1%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: left;
}
}
@media (min-width: 960px) {
.block:nth-child(3n + 1) {
float: left;
width: 33.33333%;
margin-left: 0%;
margin-right: -33.33333%;
padding-left: 1%;
padding-right: 1%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: left;
}
}
@media (min-width: 600px) {
.block:nth-child(3n + 2) {
float: left;
width: 50%;
margin-left: 50%;
margin-right: -100%;
padding-left: 1%;
padding-right: 1%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
@media (min-width: 960px) {
.block:nth-child(3n + 2) {
float: left;
width: 33.33333%;
margin-left: 33.33333%;
margin-right: -66.66667%;
padding-left: 1%;
padding-right: 1%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
@media (min-width: 600px) {
.block:nth-child(3n) {
float: left;
width: 50%;
margin-left: 50%;
margin-right: -100%;
padding-left: 1%;
padding-right: 1%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
@media (min-width: 960px) {
.block:nth-child(3n) {
float: left;
width: 33.33333%;
margin-left: 66.66667%;
margin-right: -100%;
padding-left: 1%;
padding-right: 1%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
.block2 {
width: 100%;
background: pink;
}
@media (min-width: 600px) {
.block2:nth-child(3n + 1) {
float: left;
width: 50%;
margin-left: 0%;
margin-right: -50%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: left;
}
}
@media (min-width: 960px) {
.block2:nth-child(3n + 1) {
float: left;
width: 33.33333%;
margin-left: 0%;
margin-right: -33.33333%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: left;
}
}
@media (min-width: 600px) {
.block2:nth-child(3n + 2) {
float: left;
width: 50%;
margin-left: 50%;
margin-right: -100%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
@media (min-width: 960px) {
.block2:nth-child(3n + 2) {
float: left;
width: 33.33333%;
margin-left: 33.33333%;
margin-right: -66.66667%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
@media (min-width: 600px) {
.block2:nth-child(3n) {
float: left;
width: 50%;
margin-left: 50%;
margin-right: -100%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
@media (min-width: 960px) {
.block2:nth-child(3n) {
float: left;
width: 33.33333%;
margin-left: 66.66667%;
margin-right: -100%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
@media (min-width: 600px) {
.block-nested:nth-child(3n) {
padding-left: 0;
padding-right: 0;
}
}
@media (min-width: 960px) {
.block-nested:nth-child(3n) {
padding-left: 0;
padding-right: 0;
}
}
@media (min-width: 960px) {
.block2 > .block:nth-child(4n + 1) {
float: left;
width: 25%;
margin-left: 0%;
margin-right: -25%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: left;
}
}
@media (min-width: 960px) {
.block2 > .block:nth-child(4n + 2) {
float: left;
width: 25%;
margin-left: 25%;
margin-right: -50%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
@media (min-width: 960px) {
.block2 > .block:nth-child(4n + 3) {
float: left;
width: 25%;
margin-left: 50%;
margin-right: -75%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
@media (min-width: 960px) {
.block2 > .block:nth-child(4n) {
float: left;
width: 25%;
margin-left: 75%;
margin-right: -100%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
.block3 {
width: 100%;
background: pink;
}
@media (min-width: 960px) {
.block3:nth-child(1) {
float: left;
width: 8.33333%;
margin-left: 0%;
margin-right: -8.33333%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: left;
}
}
@media (min-width: 960px) {
.block3:nth-child(2) {
float: left;
width: 8.33333%;
margin-left: 8.33333%;
margin-right: -16.66667%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
@media (min-width: 960px) {
.block3:nth-child(3) {
float: left;
width: 8.33333%;
margin-left: 16.66667%;
margin-right: -25%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
@media (min-width: 960px) {
.block3:nth-child(4) {
float: left;
width: 8.33333%;
margin-left: 25%;
margin-right: -33.33333%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
@media (min-width: 960px) {
.block3:nth-child(5) {
float: left;
width: 8.33333%;
margin-left: 33.33333%;
margin-right: -41.66667%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
@media (min-width: 960px) {
.block3:nth-child(6) {
float: left;
width: 8.33333%;
margin-left: 41.66667%;
margin-right: -50%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
@media (min-width: 960px) {
.block3:nth-child(7) {
float: left;
width: 8.33333%;
margin-left: 50%;
margin-right: -58.33333%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
@media (min-width: 960px) {
.block3:nth-child(8) {
float: left;
width: 8.33333%;
margin-left: 58.33333%;
margin-right: -66.66667%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
@media (min-width: 960px) {
.block3:nth-child(9) {
float: left;
width: 8.33333%;
margin-left: 66.66667%;
margin-right: -75%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
@media (min-width: 960px) {
.block3:nth-child(10) {
float: left;
width: 8.33333%;
margin-left: 75%;
margin-right: -83.33333%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
@media (min-width: 960px) {
.block3:nth-child(11) {
float: left;
width: 8.33333%;
margin-left: 83.33333%;
margin-right: -91.66667%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
@media (min-width: 960px) {
.block3:nth-child(12) {
float: left;
width: 8.33333%;
margin-left: 91.66667%;
margin-right: -100%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
.inline {
width: 100%;
height: 75px;
background: hotpink;
}
.block-nested .inline {
background: deeppink;
}
.hotpink {
background: hotpink;
}
Raw
SassMeister-rendered.html
<p class="container">Fluid gutters (2%) with nested items</p>
<div class="container">
<article class="block"><div class="inline"></div></article>
<article class="block"><div class="inline"></div></article>
<article class="block block-nested">
<div class="block"><div class="inline"></div></div>
<div class="block"><div class="inline"></div></div>
<div class="block"><div class="inline"></div></div>
</article>
</div>
<p class="container">Fixed gutters (20px) with nested items</p>
<div class="container">
<article class="block2"><div class="inline"></div></article>
<article class="block2"><div class="inline"></div></article>
<article class="block2 block-nested">
<div class="block2"><div class="inline"></div></div>
<div class="block2"><div class="inline"></div></div>
<div class="block2"><div class="inline"></div></div>
</article>
</div>
<p class="container">Fixed gutters (20px) with nested items</p>
<div class="container">
<article class="block2"><div class="inline"></div></article>
<article class="block2"><div class="inline"></div></article>
<article class="block2 block-nested">
<div class="block"><div class="inline"></div></div>
<div class="block"><div class="inline"></div></div>
<div class="block"><div class="inline"></div></div>
<div class="block"><div class="inline"></div></div>
</article>
</div>
<p class="container">Fixed gutters (20px) without nested items, still matching the layout of the previous grid with nested items.</p>
<div class="container">
<article class="block3"><div class="inline"></div></article>
<article class="block3"><div class="inline"></div></article>
<article class="block3"><div class="inline"></div></article>
<article class="block3"><div class="inline"></div></article>
<article class="block3"><div class="inline"></div></article>
<article class="block3"><div class="inline"></div></article>
<article class="block3"><div class="inline"></div></article>
<article class="block3"><div class="inline"></div></article>
<article class="block3"><div class="inline"></div></article>
<article class="block3"><div class="inline"></div></article>
<article class="block3"><div class="inline"></div></article>
<article class="block3"><div class="inline"></div></article>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment