Skip to content

Instantly share code, notes, and snippets.

@DannyJoris

DannyJoris/SassMeister-input-HTML.html

Created April 16, 2015 21:58
Show Gist options
  • Save DannyJoris/577dcdfde8ccc57e72b5 to your computer and use it in GitHub Desktop.
Save DannyJoris/577dcdfde8ccc57e72b5 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<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>
<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>
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();
}
}
.inline {
width: 100%;
height: 75px;
background: hotpink;
}
.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;
}
}
.inline {
width: 100%;
height: 75px;
background: hotpink;
}
.hotpink {
background: hotpink;
}
Raw
SassMeister-rendered.html
<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>
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment