Skip to content

Instantly share code, notes, and snippets.

@tsmith512

tsmith512/SassMeister-input-HTML.html

Last active July 21, 2016 17:26
Show Gist options
  • Save tsmith512/520885a8605b7788c687 to your computer and use it in GitHub Desktop.
Save tsmith512/520885a8605b7788c687 to your computer and use it in GitHub Desktop.
Download ZIP
Intro to Singularity: Twelve Column 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="item">&nbsp;</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);
// Define the 12 column grid with 1/3 gutters:
@include add-grid(12);
@include add-gutter(1/3);
.wrap {
@include clearfix;
width: 960px;
// Add the background grid simulation:
@include background-grid($color: #ccc);
// First example of a single item:
.item {
@include grid-span(1,2);
background: red;
height: 100px;
}
}
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;
background-image: linear-gradient(to right, #cccccc 0%, #cccccc 6.38298%, #d8d8d8 6.38298%, #d8d8d8 8.51064%, #cccccc 8.51064%, #cccccc 14.89362%, #d8d8d8 14.89362%, #d8d8d8 17.02128%, #cccccc 17.02128%, #cccccc 23.40426%, #d8d8d8 23.40426%, #d8d8d8 25.53191%, #cccccc 25.53191%, #cccccc 31.91489%, #d8d8d8 31.91489%, #d8d8d8 34.04255%, #cccccc 34.04255%, #cccccc 40.42553%, #d8d8d8 40.42553%, #d8d8d8 42.55319%, #cccccc 42.55319%, #cccccc 48.93617%, #d8d8d8 48.93617%, #d8d8d8 51.06383%, #cccccc 51.06383%, #cccccc 57.44681%, #d8d8d8 57.44681%, #d8d8d8 59.57447%, #cccccc 59.57447%, #cccccc 65.95745%, #d8d8d8 65.95745%, #d8d8d8 68.08511%, #cccccc 68.08511%, #cccccc 74.46809%, #d8d8d8 74.46809%, #d8d8d8 76.59574%, #cccccc 76.59574%, #cccccc 82.97872%, #d8d8d8 82.97872%, #d8d8d8 85.10638%, #cccccc 85.10638%, #cccccc 91.48936%, #d8d8d8 91.48936%, #d8d8d8 93.61702%, #cccccc 93.61702%, #cccccc);
}
.wrap:after {
content: "";
display: table;
clear: both;
}
.wrap .item {
-sgs-span-settings: ("span": 1, "location": 2, "grid": 12, "gutter": 0.33333, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": false, "gutter property": "margin", "options": ((null: null)));
width: 6.38298%;
float: left;
margin-right: -100%;
margin-left: 8.51064%;
clear: none;
background: red;
height: 100px;
}
Raw
SassMeister-rendered.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<div class="wrap">
<div class="item">&nbsp;</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment