Skip to content

Instantly share code, notes, and snippets.

@una

una/SassMeister-input-HTML.html

Created November 13, 2014 02:40
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/e66e0cc75fd59a7440f3 to your computer and use it in GitHub Desktop.
Save una/e66e0cc75fd59a7440f3 to your computer and use it in GitHub Desktop.
Download ZIP
Singularity Demo 3: Grids on Grids on Grids
Raw
SassMeister-input-HTML.html
<body>
<div class="main">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">
<div class="a">Three A</div>
<div class="b">Three B</div>
<div class="c">Three C</div>
</div>
</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;
}
@include layout(8, 1/3) {
.one {
@include grid-span(3, 1);
background: dimgrey;
}
.two {
@include grid-span(3, 6);
background: lemonchiffon;
}
.three {
@include grid-span(3, 6);
background: lightgreen;
clear: both;
@include layout(6, 1/3) {
.a {
@include grid-span(2,1)
}
.b {
@include grid-span(2,3)
}
.c {
@include grid-span(2,5)
}
}
}
}
.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;
}
.one {
width: 35.4838709677%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
background: dimgrey;
}
.two {
width: 35.4838709677%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
background: lemonchiffon;
}
.three {
width: 35.4838709677%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
background: lightgreen;
clear: both;
}
.three .a {
width: 30.4347826087%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
}
.three .b {
width: 30.4347826087%;
float: left;
margin-right: -100%;
margin-left: 34.7826086957%;
clear: none;
}
.three .c {
width: 30.4347826087%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
}
.second {
width: 19.0476190476%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
background: turquoise;
}
Raw
SassMeister-rendered.html
<body>
<div class="main">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">
<div class="a">Three A</div>
<div class="b">Three B</div>
<div class="c">Three C</div>
</div>
</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