Skip to content

Instantly share code, notes, and snippets.

@una

una/SassMeister-input-HTML.html

Created November 13, 2014 02:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save una/7d83a0bdb36601900458 to your computer and use it in GitHub Desktop.
Save una/7d83a0bdb36601900458 to your computer and use it in GitHub Desktop.
Download ZIP
Singularity Grid Sample 1: Spanning Grids
Raw
SassMeister-input-HTML.html
<body>
<div class="main">Main Section</div>
<div class="first">First Section</div>
<div class="second">Second Section</div>
</body>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// Singularity.gs (v1.4.0)
// ----
@import "singularitygs";
@include add-grid(1 3 1);
@include add-gutter(1/8);
.main {
@include grid-span(1, 2);
background: hotpink;
}
.first {
@include grid-span(1, 1);
background: tomato;
}
.second {
@include grid-span(1, 3);
background: turquoise;
}
Raw
SassMeister-output.css
.main {
width: 57.1428571429%;
float: left;
margin-right: -100%;
margin-left: 21.4285714286%;
clear: none;
background: hotpink;
}
.first {
width: 19.0476190476%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
background: tomato;
}
.second {
width: 19.0476190476%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
background: turquoise;
}
Raw
SassMeister-rendered.html
<body>
<div class="main">Main Section</div>
<div class="first">First Section</div>
<div class="second">Second Section</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment