Skip to content

Instantly share code, notes, and snippets.

@vinayraghu
Created May 1, 2014 13:37
Show Gist options
  • Save vinayraghu/11451814 to your computer and use it in GitHub Desktop.
Save vinayraghu/11451814 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
// ----
// Sass (v3.3.6)
// Compass (v)
// Breakpoint (v)
// Singularity.gs (v)
// Singularity Extras (v)
// Toolkit (v)
// ----
@import "breakpoint";
@import "compass";
@import "singularitygs";
@import "singularitygs";
@import "singularity-extras";
@import "toolkit";
@include add-grid(5);
@include add-gutter(30px);
div {
background: rgba(red, 0.2);
height: 100vh;
}
.one {
@include grid-span(1,1);
}
.two {
@include grid-span(1,2);
}
.three {
@include grid-span(1,3);
}
.four {
@include grid-span(1,4);
}
.five {
@include grid-span(1,5);
}
div {
background: rgba(255, 0, 0, 0.2);
height: 100vh;
}
.one {
width: 20%;
float: left;
margin-right: -100%;
clear: none;
padding-right: 30px;
}
.two {
width: 20%;
float: left;
margin-right: -100%;
margin-left: 20%;
clear: none;
padding-right: 30px;
}
.three {
width: 20%;
float: left;
margin-right: -100%;
margin-left: 40%;
clear: none;
padding-right: 30px;
}
.four {
width: 20%;
float: left;
margin-right: -100%;
margin-left: 60%;
clear: none;
padding-right: 30px;
}
.five {
width: 20%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
padding-right: 0;
}
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment