Skip to content

Instantly share code, notes, and snippets.

@ezekg

ezekg/SassMeister-input-HTML.html

Created May 3, 2014 00:09
Show Gist options
  • Save ezekg/11489231 to your computer and use it in GitHub Desktop.
Save ezekg/11489231 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<section>
<article class="container">
<div class="col-16"></div>
<div class="col-15"></div>
<div class="col-14"></div>
<div class="col-13"></div>
<div class="col-12"></div>
<div class="col-11"></div>
<div class="col-10"></div>
<div class="col-9"></div>
<div class="col-8"></div>
<div class="col-7"></div>
<div class="col-6"></div>
<div class="col-5"></div>
<div class="col-4"></div>
<div class="col-3"></div>
<div class="col-2"></div>
<div class="col-1"></div>
</article>
</section>
<section>
<article class="container">
<div class="col-third"></div>
<div class="col-third"></div>
<div class="col-third"></div>
</article>
</section>
<section>
<article class="container">
<div class="col-fourth"></div>
<div class="col-fourth"></div>
<div class="col-fourth"></div>
<div class="col-fourth"></div>
</article>
</section>
<section>
<article class="container">
<div class="col-fifth"></div>
<div class="col-fifth"></div>
<div class="col-fifth"></div>
<div class="col-fifth"></div>
<div class="col-fifth"></div>
</article>
</section>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.6)
// Compass (v1.0.0.alpha.18)
// Flint (v)
// ----
// Grid settings
$flint: (
// grid configuration
"config": (
// define breakpoints
"desktop": (
"columns": 16,
"breakpoint": 1280px,
),
"laptop": (
"columns": 12,
"breakpoint": 960px,
),
"tablet": (
"columns": 8,
"breakpoint": 640px,
),
"mobile": (
"columns": 4,
"breakpoint": 320px,
),
// additional grid settings
"settings": (
"default": "desktop", // [any breakpoint's alias : becomes main output]
"grid": "fluid", // [fluid | fixed]
"gutter": 10px, // [0-infinity(unit)]
"float-style": "left", // [left | right]
"max-width": 1440px, // [true : uses highest breakpoint | false | value(unit)]
"center-container": true, // [true | false]
"border-box-sizing": true, // [true | false]
"debug-mode": false, // [true | false]
),
),
);
// Import flint
@import "flint";
// Foundation
@include _(foundation);
// Colors
$color: darkslategray;
// Pseudo content
@mixin col-num($i) {
&:before {
padding: 0 1em;
@include _(desktop) {
content: "#{$i} of 16";
}
@include _(laptop) {
@if $i > 12 { $i: 12; }
content: "#{$i} of 12";
}
@include _(tablet) {
@if $i > 8 { $i: 8; }
content: "#{$i} of 8";
}
@include _(mobile) {
@if $i > 4 { $i: 4; }
content: "#{$i} of 4";
}
}
}
// Generate cols
@for $i from 1 through 16 {
.col-#{$i} {
@if $i == 16 {
@include _($i 12 8 4);
@include col-num($i);
} @else if $i > 12 {
@include _($i 12 8 4);
@include col-num($i);
} @else if $i > 8 {
@include _($i $i 8 4);
@include col-num($i);
} @else if $i > 4 {
@include _($i $i $i 4);
@include col-num($i);
} @else {
@include _($i);
@include col-num($i);
}
background: if($i > 10, darken($color, ($i*0.25)), lighten($color, (16/$i)));
clear: both;
}
}
.col-third {
@include _(16/3 12/3 8/3 4/3);
background: $color;
&:before { content: "1/3"; padding: 0 1em; }
}
.col-fourth {
@include _(16/4 12/4 8/4 4/4);
background: $color;
&:before { content: "1/4"; padding: 0 1em; }
}
.col-fifth {
@include _(16/5 12/5 8/5 4/5);
background: $color;
&:before { content: "1/5"; padding: 0 1em; }
}
div[class*="col"] {
font: 10px Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
color: lighten($color, 50%);
height: 120px;
margin-top: 10px;
margin-bottom: 10px;
padding: 1em 0;
}
section {
& + & { background: darken(white, 5%); }
& + & + & { background: darken(white, 10%); }
& + & + & + & { background: darken(white, 15%); }
}
.container {
@include _(clear);
@include _(container);
}
Raw
SassMeister-output.css
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.col-1 {
display: block;
float: left;
width: 4.6875%;
margin-right: 0.78125%;
margin-left: 0.78125%;
background: #4d8282;
clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-1 {
width: 6.25%;
margin-right: 1.04167%;
margin-left: 1.04167%;
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-1 {
width: 9.375%;
margin-right: 1.5625%;
margin-left: 1.5625%;
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-1 {
width: 18.75%;
margin-right: 3.125%;
margin-left: 3.125%;
}
}
.col-1:before {
padding: 0 1em;
}
@media only screen and (min-width: 961px) {
.col-1:before {
content: "1 of 16";
}
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-1:before {
content: "1 of 12";
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-1:before {
content: "1 of 8";
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-1:before {
content: "1 of 4";
}
}
.col-2 {
display: block;
float: left;
width: 10.9375%;
margin-right: 0.78125%;
margin-left: 0.78125%;
background: #3e6969;
clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-2 {
width: 14.58333%;
margin-right: 1.04167%;
margin-left: 1.04167%;
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-2 {
width: 21.875%;
margin-right: 1.5625%;
margin-left: 1.5625%;
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-2 {
width: 43.75%;
margin-right: 3.125%;
margin-left: 3.125%;
}
}
.col-2:before {
padding: 0 1em;
}
@media only screen and (min-width: 961px) {
.col-2:before {
content: "2 of 16";
}
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-2:before {
content: "2 of 12";
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-2:before {
content: "2 of 8";
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-2:before {
content: "2 of 4";
}
}
.col-3 {
display: block;
float: left;
width: 17.1875%;
margin-right: 0.78125%;
margin-left: 0.78125%;
background: #396060;
clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-3 {
width: 22.91667%;
margin-right: 1.04167%;
margin-left: 1.04167%;
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-3 {
width: 34.375%;
margin-right: 1.5625%;
margin-left: 1.5625%;
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-3 {
width: 68.75%;
margin-right: 3.125%;
margin-left: 3.125%;
}
}
.col-3:before {
padding: 0 1em;
}
@media only screen and (min-width: 961px) {
.col-3:before {
content: "3 of 16";
}
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-3:before {
content: "3 of 12";
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-3:before {
content: "3 of 8";
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-3:before {
content: "3 of 4";
}
}
.col-4 {
display: block;
float: left;
width: 23.4375%;
margin-right: 0.78125%;
margin-left: 0.78125%;
background: #375c5c;
clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-4 {
width: 31.25%;
margin-right: 1.04167%;
margin-left: 1.04167%;
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-4 {
width: 46.875%;
margin-right: 1.5625%;
margin-left: 1.5625%;
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-4 {
width: 93.75%;
margin-right: 3.125%;
margin-left: 3.125%;
}
}
.col-4:before {
padding: 0 1em;
}
@media only screen and (min-width: 961px) {
.col-4:before {
content: "4 of 16";
}
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-4:before {
content: "4 of 12";
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-4:before {
content: "4 of 8";
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-4:before {
content: "4 of 4";
}
}
.col-5 {
display: block;
float: left;
width: 29.6875%;
margin-right: 0.78125%;
margin-left: 0.78125%;
background: #355959;
clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-5 {
width: 39.58333%;
margin-right: 1.04167%;
margin-left: 1.04167%;
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-5 {
width: 59.375%;
margin-right: 1.5625%;
margin-left: 1.5625%;
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-5 {
width: 93.75%;
margin-right: 3.125%;
margin-left: 3.125%;
}
}
.col-5:before {
padding: 0 1em;
}
@media only screen and (min-width: 961px) {
.col-5:before {
content: "5 of 16";
}
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-5:before {
content: "5 of 12";
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-5:before {
content: "5 of 8";
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-5:before {
content: "4 of 4";
}
}
.col-6 {
display: block;
float: left;
width: 35.9375%;
margin-right: 0.78125%;
margin-left: 0.78125%;
background: #345858;
clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-6 {
width: 47.91667%;
margin-right: 1.04167%;
margin-left: 1.04167%;
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-6 {
width: 71.875%;
margin-right: 1.5625%;
margin-left: 1.5625%;
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-6 {
width: 93.75%;
margin-right: 3.125%;
margin-left: 3.125%;
}
}
.col-6:before {
padding: 0 1em;
}
@media only screen and (min-width: 961px) {
.col-6:before {
content: "6 of 16";
}
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-6:before {
content: "6 of 12";
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-6:before {
content: "6 of 8";
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-6:before {
content: "4 of 4";
}
}
.col-7 {
display: block;
float: left;
width: 42.1875%;
margin-right: 0.78125%;
margin-left: 0.78125%;
background: #335656;
clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-7 {
width: 56.25%;
margin-right: 1.04167%;
margin-left: 1.04167%;
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-7 {
width: 84.375%;
margin-right: 1.5625%;
margin-left: 1.5625%;
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-7 {
width: 93.75%;
margin-right: 3.125%;
margin-left: 3.125%;
}
}
.col-7:before {
padding: 0 1em;
}
@media only screen and (min-width: 961px) {
.col-7:before {
content: "7 of 16";
}
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-7:before {
content: "7 of 12";
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-7:before {
content: "7 of 8";
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-7:before {
content: "4 of 4";
}
}
.col-8 {
display: block;
float: left;
width: 48.4375%;
margin-right: 0.78125%;
margin-left: 0.78125%;
background: #335555;
clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-8 {
width: 64.58333%;
margin-right: 1.04167%;
margin-left: 1.04167%;
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-8 {
width: 96.875%;
margin-right: 1.5625%;
margin-left: 1.5625%;
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-8 {
width: 93.75%;
margin-right: 3.125%;
margin-left: 3.125%;
}
}
.col-8:before {
padding: 0 1em;
}
@media only screen and (min-width: 961px) {
.col-8:before {
content: "8 of 16";
}
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-8:before {
content: "8 of 12";
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-8:before {
content: "8 of 8";
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-8:before {
content: "4 of 4";
}
}
.col-9 {
display: block;
float: left;
width: 54.6875%;
margin-right: 0.78125%;
margin-left: 0.78125%;
background: #325555;
clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-9 {
width: 72.91667%;
margin-right: 1.04167%;
margin-left: 1.04167%;
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-9 {
width: 96.875%;
margin-right: 1.5625%;
margin-left: 1.5625%;
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-9 {
width: 93.75%;
margin-right: 3.125%;
margin-left: 3.125%;
}
}
.col-9:before {
padding: 0 1em;
}
@media only screen and (min-width: 961px) {
.col-9:before {
content: "9 of 16";
}
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-9:before {
content: "9 of 12";
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-9:before {
content: "8 of 8";
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-9:before {
content: "4 of 4";
}
}
.col-10 {
display: block;
float: left;
width: 60.9375%;
margin-right: 0.78125%;
margin-left: 0.78125%;
background: #325454;
clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-10 {
width: 81.25%;
margin-right: 1.04167%;
margin-left: 1.04167%;
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-10 {
width: 96.875%;
margin-right: 1.5625%;
margin-left: 1.5625%;
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-10 {
width: 93.75%;
margin-right: 3.125%;
margin-left: 3.125%;
}
}
.col-10:before {
padding: 0 1em;
}
@media only screen and (min-width: 961px) {
.col-10:before {
content: "10 of 16";
}
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-10:before {
content: "10 of 12";
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-10:before {
content: "8 of 8";
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-10:before {
content: "4 of 4";
}
}
.col-11 {
display: block;
float: left;
width: 67.1875%;
margin-right: 0.78125%;
margin-left: 0.78125%;
background: #2a4646;
clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-11 {
width: 89.58333%;
margin-right: 1.04167%;
margin-left: 1.04167%;
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-11 {
width: 96.875%;
margin-right: 1.5625%;
margin-left: 1.5625%;
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-11 {
width: 93.75%;
margin-right: 3.125%;
margin-left: 3.125%;
}
}
.col-11:before {
padding: 0 1em;
}
@media only screen and (min-width: 961px) {
.col-11:before {
content: "11 of 16";
}
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-11:before {
content: "11 of 12";
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-11:before {
content: "8 of 8";
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-11:before {
content: "4 of 4";
}
}
.col-12 {
display: block;
float: left;
width: 73.4375%;
margin-right: 0.78125%;
margin-left: 0.78125%;
background: #294545;
clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-12 {
width: 97.91667%;
margin-right: 1.04167%;
margin-left: 1.04167%;
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-12 {
width: 96.875%;
margin-right: 1.5625%;
margin-left: 1.5625%;
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-12 {
width: 93.75%;
margin-right: 3.125%;
margin-left: 3.125%;
}
}
.col-12:before {
padding: 0 1em;
}
@media only screen and (min-width: 961px) {
.col-12:before {
content: "12 of 16";
}
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-12:before {
content: "12 of 12";
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-12:before {
content: "8 of 8";
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-12:before {
content: "4 of 4";
}
}
.col-13 {
display: block;
float: left;
width: 79.6875%;
margin-right: 0.78125%;
margin-left: 0.78125%;
background: #294545;
clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-13 {
width: 97.91667%;
margin-right: 1.04167%;
margin-left: 1.04167%;
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-13 {
width: 96.875%;
margin-right: 1.5625%;
margin-left: 1.5625%;
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-13 {
width: 93.75%;
margin-right: 3.125%;
margin-left: 3.125%;
}
}
.col-13:before {
padding: 0 1em;
}
@media only screen and (min-width: 961px) {
.col-13:before {
content: "13 of 16";
}
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-13:before {
content: "12 of 12";
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-13:before {
content: "8 of 8";
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-13:before {
content: "4 of 4";
}
}
.col-14 {
display: block;
float: left;
width: 85.9375%;
margin-right: 0.78125%;
margin-left: 0.78125%;
background: #284444;
clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-14 {
width: 97.91667%;
margin-right: 1.04167%;
margin-left: 1.04167%;
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-14 {
width: 96.875%;
margin-right: 1.5625%;
margin-left: 1.5625%;
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-14 {
width: 93.75%;
margin-right: 3.125%;
margin-left: 3.125%;
}
}
.col-14:before {
padding: 0 1em;
}
@media only screen and (min-width: 961px) {
.col-14:before {
content: "14 of 16";
}
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-14:before {
content: "12 of 12";
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-14:before {
content: "8 of 8";
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-14:before {
content: "4 of 4";
}
}
.col-15 {
display: block;
float: left;
width: 92.1875%;
margin-right: 0.78125%;
margin-left: 0.78125%;
background: #284343;
clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-15 {
width: 97.91667%;
margin-right: 1.04167%;
margin-left: 1.04167%;
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-15 {
width: 96.875%;
margin-right: 1.5625%;
margin-left: 1.5625%;
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-15 {
width: 93.75%;
margin-right: 3.125%;
margin-left: 3.125%;
}
}
.col-15:before {
padding: 0 1em;
}
@media only screen and (min-width: 961px) {
.col-15:before {
content: "15 of 16";
}
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-15:before {
content: "12 of 12";
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-15:before {
content: "8 of 8";
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-15:before {
content: "4 of 4";
}
}
.col-16 {
display: block;
float: left;
width: 98.4375%;
margin-right: 0.78125%;
margin-left: 0.78125%;
background: #274242;
clear: both;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-16 {
width: 97.91667%;
margin-right: 1.04167%;
margin-left: 1.04167%;
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-16 {
width: 96.875%;
margin-right: 1.5625%;
margin-left: 1.5625%;
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-16 {
width: 93.75%;
margin-right: 3.125%;
margin-left: 3.125%;
}
}
.col-16:before {
padding: 0 1em;
}
@media only screen and (min-width: 961px) {
.col-16:before {
content: "16 of 16";
}
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-16:before {
content: "12 of 12";
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-16:before {
content: "8 of 8";
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-16:before {
content: "4 of 4";
}
}
.col-third {
display: block;
float: left;
width: 31.77083%;
margin-right: 0.78125%;
margin-left: 0.78125%;
background: darkslategray;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-third {
width: 31.25%;
margin-right: 1.04167%;
margin-left: 1.04167%;
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-third {
width: 30.20833%;
margin-right: 1.5625%;
margin-left: 1.5625%;
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-third {
width: 27.08333%;
margin-right: 3.125%;
margin-left: 3.125%;
}
}
.col-third:before {
content: "1/3";
padding: 0 1em;
}
.col-fourth {
display: block;
float: left;
width: 23.4375%;
margin-right: 0.78125%;
margin-left: 0.78125%;
background: darkslategray;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-fourth {
width: 22.91667%;
margin-right: 1.04167%;
margin-left: 1.04167%;
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-fourth {
width: 21.875%;
margin-right: 1.5625%;
margin-left: 1.5625%;
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-fourth {
width: 18.75%;
margin-right: 3.125%;
margin-left: 3.125%;
}
}
.col-fourth:before {
content: "1/4";
padding: 0 1em;
}
.col-fifth {
display: block;
float: left;
width: 18.4375%;
margin-right: 0.78125%;
margin-left: 0.78125%;
background: darkslategray;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.col-fifth {
width: 17.91667%;
margin-right: 1.04167%;
margin-left: 1.04167%;
}
}
@media only screen and (min-width: 321px) and (max-width: 640px) {
.col-fifth {
width: 16.875%;
margin-right: 1.5625%;
margin-left: 1.5625%;
}
}
@media only screen and (min-width: 0) and (max-width: 320px) {
.col-fifth {
width: 13.75%;
margin-right: 3.125%;
margin-left: 3.125%;
}
}
.col-fifth:before {
content: "1/5";
padding: 0 1em;
}
div[class*="col"] {
font: 10px Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
color: #aecfcf;
height: 120px;
margin-top: 10px;
margin-bottom: 10px;
padding: 1em 0;
}
section + section {
background: #f2f2f2;
}
section + section + section {
background: #e6e6e6;
}
section + section + section + section {
background: #d9d9d9;
}
.container {
zoom: 1;
display: block;
float: none;
max-width: 1440px;
margin-right: auto;
margin-left: auto;
}
.container:before, .container:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
.container:after {
clear: both;
}
Raw
SassMeister-rendered.html
<section>
<article class="container">
<div class="col-16"></div>
<div class="col-15"></div>
<div class="col-14"></div>
<div class="col-13"></div>
<div class="col-12"></div>
<div class="col-11"></div>
<div class="col-10"></div>
<div class="col-9"></div>
<div class="col-8"></div>
<div class="col-7"></div>
<div class="col-6"></div>
<div class="col-5"></div>
<div class="col-4"></div>
<div class="col-3"></div>
<div class="col-2"></div>
<div class="col-1"></div>
</article>
</section>
<section>
<article class="container">
<div class="col-third"></div>
<div class="col-third"></div>
<div class="col-third"></div>
</article>
</section>
<section>
<article class="container">
<div class="col-fourth"></div>
<div class="col-fourth"></div>
<div class="col-fourth"></div>
<div class="col-fourth"></div>
</article>
</section>
<section>
<article class="container">
<div class="col-fifth"></div>
<div class="col-fifth"></div>
<div class="col-fifth"></div>
<div class="col-fifth"></div>
<div class="col-fifth"></div>
</article>
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment