Skip to content

Instantly share code, notes, and snippets.

@tsmith512

tsmith512/SassMeister-input-HTML.html

Last active February 25, 2016 18:46
Show Gist options
  • Save tsmith512/ac403a192cd831e977ab to your computer and use it in GitHub Desktop.
Save tsmith512/ac403a192cd831e977ab to your computer and use it in GitHub Desktop.
Download ZIP
Intro to Singularity: Source Order vs. Visual Order Example
Raw
SassMeister-input-HTML.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<div class="wrap">
<div class="a">First</div>
<div class="b">Second</div>
<div class="c">Third</div>
<div class="d">Fourth</div>
</div>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
@import "toolkit";
@import "toolkit/kickstart";
@import "breakpoint";
@import "singularitygs";
@include sgs-change('debug', true);
@include add-grid(4);
@include add-gutter(1/8);
.wrap {
@include clearfix;
width: 960px;
padding: 1em 0;
// Add the background grid simulation:
@include background-grid($color: #ccc);
// First example of a single item:
> div {
text-align: center;
font-family: sans-serif;
font-size: 2em;
background: black;
color: white;
padding: 1em;
}
.a {
@include grid-span(1,4);
}
.b {
@include grid-span(1,3);
}
.c {
@include grid-span(1,2);
}
.d {
@include grid-span(1,1);
}
}
Raw
SassMeister-output.css
*, *:before, *:after {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
img, video {
max-width: 100%;
height: auto;
}
.wrap {
width: 960px;
padding: 1em 0;
background-image: linear-gradient(to right, #cccccc 0%, #cccccc 22.85714%, #d8d8d8 22.85714%, #d8d8d8 25.71429%, #cccccc 25.71429%, #cccccc 48.57143%, #d8d8d8 48.57143%, #d8d8d8 51.42857%, #cccccc 51.42857%, #cccccc 74.28571%, #d8d8d8 74.28571%, #d8d8d8 77.14286%, #cccccc 77.14286%, #cccccc);
}
.wrap:after {
content: "";
display: table;
clear: both;
}
.wrap > div {
text-align: center;
font-family: sans-serif;
font-size: 2em;
background: black;
color: white;
padding: 1em;
}
.wrap .a {
-sgs-span-settings: ("span": 1, "location": 4, "grid": 4, "gutter": 0.125, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 22.85714%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
}
.wrap .b {
-sgs-span-settings: ("span": 1, "location": 3, "grid": 4, "gutter": 0.125, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 22.85714%;
float: left;
margin-right: -100%;
margin-left: 51.42857%;
clear: none;
}
.wrap .c {
-sgs-span-settings: ("span": 1, "location": 2, "grid": 4, "gutter": 0.125, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 22.85714%;
float: left;
margin-right: -100%;
margin-left: 25.71429%;
clear: none;
}
.wrap .d {
-sgs-span-settings: ("span": 1, "location": 1, "grid": 4, "gutter": 0.125, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 22.85714%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
}
Raw
SassMeister-rendered.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<div class="wrap">
<div class="a">First</div>
<div class="b">Second</div>
<div class="c">Third</div>
<div class="d">Fourth</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment