Skip to content

Instantly share code, notes, and snippets.

@una

una/SassMeister-input-HTML.html

Last active August 29, 2015 14:09
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/ee61c89f23760bec1183 to your computer and use it in GitHub Desktop.
Save una/ee61c89f23760bec1183 to your computer and use it in GitHub Desktop.
Download ZIP
Singularity Sample 1: Grids in 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;
}
}
.second {
@include grid-span(1, 3);
background: turquoise;
}
Raw
SassMeister-output.css
.container {
background-image: linear-gradient(to right, blue 0%, blue 6.77966%, #3f3fff 6.77966%, #3f3fff 8.47458%, blue 8.47458%, blue 15.25424%, #3f3fff 15.25424%, #3f3fff 16.94915%, blue 16.94915%, blue 23.72881%, #3f3fff 23.72881%, #3f3fff 25.42373%, blue 25.42373%, blue 32.20339%, #3f3fff 32.20339%, #3f3fff 33.89831%, blue 33.89831%, blue 40.67797%, #3f3fff 40.67797%, #3f3fff 42.37288%, blue 42.37288%, blue 49.15254%, #3f3fff 49.15254%, #3f3fff 50.84746%, blue 50.84746%, blue 57.62712%, #3f3fff 57.62712%, #3f3fff 59.32203%, blue 59.32203%, blue 66.10169%, #3f3fff 66.10169%, #3f3fff 67.79661%, blue 67.79661%, blue 74.57627%, #3f3fff 74.57627%, #3f3fff 76.27119%, blue 76.27119%, blue 83.05085%, #3f3fff 83.05085%, #3f3fff 84.74576%, blue 84.74576%, blue 91.52542%, #3f3fff 91.52542%, #3f3fff 93.22034%, blue 93.22034%, blue);
}
.main {
-sgs-span-settings: ("span": 1, "location": 2, "grid": 1 3 1, "gutter": 0.125, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": ((null: null)));
width: 57.14286%;
float: left;
margin-right: -100%;
margin-left: 21.42857%;
clear: none;
background: hotpink;
}
.first {
-sgs-span-settings: ("span": 1, "location": 1, "grid": 1 3 1, "gutter": 0.125, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": ((null: null)));
width: 19.04762%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
background: tomato;
}
.one {
-sgs-span-settings: ("span": 3, "location": 1, "grid": 8, "gutter": 0.33333, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": ((null: null)));
width: 35.48387%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
background: dimgrey;
}
.two {
-sgs-span-settings: ("span": 3, "location": 6, "grid": 8, "gutter": 0.33333, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": ((null: null)));
width: 35.48387%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
background: lemonchiffon;
}
.three {
-sgs-span-settings: ("span": 3, "location": 6, "grid": 8, "gutter": 0.33333, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": ((null: null)));
width: 35.48387%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
background: lightgreen;
clear: both;
}
.second {
-sgs-span-settings: ("span": 1, "location": 3, "grid": 1 3 1, "gutter": 0.125, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": ((null: null)));
width: 19.04762%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
background: turquoise;
}
Raw
SassMeister-rendered.html
<body class="container">
<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