Skip to content

Instantly share code, notes, and snippets.

@airen

airen/SassMeister-input-HTML.html

Last active August 29, 2015 14:17
Show Gist options
  • Save airen/f4f964660c837b94d224 to your computer and use it in GitHub Desktop.
Save airen/f4f964660c837b94d224 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div data-row>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
</div>
<div data-row>
<div data-col="2"></div>
<div data-col="2"></div>
<div data-col="2"></div>
<div data-col="2"></div>
<div data-col="2"></div>
<div data-col="2"></div>
<div data-col="2"></div>
<div data-col="2"></div>
</div>
<div data-row>
<div data-col="3"></div>
<div data-col="13"></div>
</div>
<div data-row>
<div data-col="4">
<div data-row>
<div data-col="3"></div>
<div data-col="3"></div>
<div data-col="3"></div>
<div data-col="7"></div>
</div>
</div>
<div data-col="4">
<div data-row>
<div data-col="4"></div>
<div data-col="12"></div>
</div>
</div>
<div data-col="4">
<div data-row>
<div data-col="6"></div>
<div data-col="10"></div>
</div>
</div>
<div data-col="4">
<div data-row>
<div data-col="4"></div>
<div data-col="4"></div>
<div data-col="4"></div>
<div data-col="4"></div>
</div>
</div>
</div>
<div data-row>
<div data-col="5"></div>
<div data-col="11"></div>
</div>
<div data-row>
<div data-col="6"></div>
<div data-col="10"></div>
</div>
<div data-row>
<div data-col="7"></div>
<div data-col="9"></div>
</div>
<div data-row>
<div data-col="8"></div>
<div data-col="8"></div>
</div>
<div data-row>
<div data-col="9"></div>
<div data-col="7"></div>
</div>
<div data-row>
<div data-col="10"></div>
<div data-col="6"></div>
</div>
<div data-row>
<div data-col="11"></div>
<div data-col="5"></div>
</div>
<div data-row>
<div data-col="12"></div>
<div data-col="4"></div>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
//from: http://www.sitepoint.com/understanding-css-grid-systems/
//cw = column width
//scw = single column width (6.86666667%;)
//cs = column span(1~12)
//m = margin (1.6%)
//mc = maximum columns (12)
//scw = (100 - (m * (mc -1 ))) / mc
//cw = (scw * cs) + (m * (cs - 1))
@mixin col-width($loop:false,$cs:12,$mc:12,$m: 1.6%){
@if $loop {
@for $i from 1 through $mc {
[data-col="#{$i}"]{
width: (((100 - ($m * ($mc - 1))) / $mc) * $i) + ($m * ($i - 1));
}
}
} @else {
width: (((100 - ($m * ($mc - 1))) / $mc) * $cs) + ($m * ($cs - 1));
}
}
@include col-width(true,16,16,1.6%);
[data-row],
[data-col]{
box-sizing: border-box;
}
[data-row]{
margin-bottom: 10px;
&:before,
&:after {
content:"";
display: table;
}
&:after {
clear:both;
}
&:last-child{
margin-bottom:0;
}
}
[data-col]{
min-height: 50px;
background-color: #eee;
border-radius: 5px;
float: left;
position: relative;
display: block;
padding: 5px;
}
[data-col] + [data-col] {
margin-left: 1.6%;
}
[data-col] [data-col]{
background-color: #333;
}
Raw
SassMeister-output.css
[data-col="1"] {
width: 4.75%;
}
[data-col="2"] {
width: 11.1%;
}
[data-col="3"] {
width: 17.45%;
}
[data-col="4"] {
width: 23.8%;
}
[data-col="5"] {
width: 30.15%;
}
[data-col="6"] {
width: 36.5%;
}
[data-col="7"] {
width: 42.85%;
}
[data-col="8"] {
width: 49.2%;
}
[data-col="9"] {
width: 55.55%;
}
[data-col="10"] {
width: 61.9%;
}
[data-col="11"] {
width: 68.25%;
}
[data-col="12"] {
width: 74.6%;
}
[data-col="13"] {
width: 80.95%;
}
[data-col="14"] {
width: 87.3%;
}
[data-col="15"] {
width: 93.65%;
}
[data-col="16"] {
width: 100%;
}
[data-row],
[data-col] {
box-sizing: border-box;
}
[data-row] {
margin-bottom: 10px;
}
[data-row]:before, [data-row]:after {
content: "";
display: table;
}
[data-row]:after {
clear: both;
}
[data-row]:last-child {
margin-bottom: 0;
}
[data-col] {
min-height: 50px;
background-color: #eee;
border-radius: 5px;
float: left;
position: relative;
display: block;
padding: 5px;
}
[data-col] + [data-col] {
margin-left: 1.6%;
}
[data-col] [data-col] {
background-color: #333;
}
Raw
SassMeister-rendered.html
<div data-row>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
<div data-col="1"></div>
</div>
<div data-row>
<div data-col="2"></div>
<div data-col="2"></div>
<div data-col="2"></div>
<div data-col="2"></div>
<div data-col="2"></div>
<div data-col="2"></div>
<div data-col="2"></div>
<div data-col="2"></div>
</div>
<div data-row>
<div data-col="3"></div>
<div data-col="13"></div>
</div>
<div data-row>
<div data-col="4">
<div data-row>
<div data-col="3"></div>
<div data-col="3"></div>
<div data-col="3"></div>
<div data-col="7"></div>
</div>
</div>
<div data-col="4">
<div data-row>
<div data-col="4"></div>
<div data-col="12"></div>
</div>
</div>
<div data-col="4">
<div data-row>
<div data-col="6"></div>
<div data-col="10"></div>
</div>
</div>
<div data-col="4">
<div data-row>
<div data-col="4"></div>
<div data-col="4"></div>
<div data-col="4"></div>
<div data-col="4"></div>
</div>
</div>
</div>
<div data-row>
<div data-col="5"></div>
<div data-col="11"></div>
</div>
<div data-row>
<div data-col="6"></div>
<div data-col="10"></div>
</div>
<div data-row>
<div data-col="7"></div>
<div data-col="9"></div>
</div>
<div data-row>
<div data-col="8"></div>
<div data-col="8"></div>
</div>
<div data-row>
<div data-col="9"></div>
<div data-col="7"></div>
</div>
<div data-row>
<div data-col="10"></div>
<div data-col="6"></div>
</div>
<div data-row>
<div data-col="11"></div>
<div data-col="5"></div>
</div>
<div data-row>
<div data-col="12"></div>
<div data-col="4"></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment