Skip to content

Instantly share code, notes, and snippets.

@VinSpee

VinSpee/SassMeister-input-HTML.html

Created February 12, 2014 20:53
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 VinSpee/8964278 to your computer and use it in GitHub Desktop.
Save VinSpee/8964278 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<!doctype html>
<html>
<head>
<title>Singularity HTML Demo</title>
<link rel="stylesheet" href="css/demo-float.css">
</head>
<body>
<div id="page">
<div id="foo"></div>
<div id="bar"></div>
<div id="baz"></div>
<div id="qux"></div>
<div id="waldo"></div>
<div id="garfield"></div>
</div>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.2.14)
// Compass (v0.12.2)
// Breakpoint (v2.0.7)
// Singularity.gs (v1.1.2)
// ----
@import "singularitygs";
@import "breakpoint";
$break: 700px;
$break2: 900px;
$break3: 1200px;
$grids: add-grid(2);
$grids: add-grid(2 8 2 1 at $break);
$grids: add-grid(12 at $break2);
$grids: add-grid(1 3 5 7 9 at $break3);
$gutters: add-gutter(1/3);
// $gutters: add-gutter(.25 at $break);
$output: 'float';
body {
margin: 0;
padding: 0;
@include background-grid;
}
div {
height: 50px;
}
#foo {
background: red;
height: 30px;
@include grid-span(1, 2);
@include breakpoint($break) {
@include grid-span(1, 4);
clear: none;
}
@include breakpoint($break2) {
@include grid-span(2, 11);
}
@include breakpoint($break3) {
@include grid-span(1, 3);
@include push(2, 1);
}
}
#bar {
background: green;
height: 20px;
@include grid-span(1, 1);
clear: left;
@include breakpoint($break) {
@include grid-span(2, 2);
@include push(1, 1);
clear: none;
}
@include breakpoint($break2) {
@include grid-span(8, 3);
clear: none;
}
@include breakpoint($break3) {
@include grid-span(1, 1);
@include pull(3, 1);
}
}
#baz {
background: purple;
@include grid-span(1, 1);
@include breakpoint($break) {
// This piece's position is very wonky in Float, and as such we need to do some custom silliness to place it. It winds up looking similar to Isolation positioning, but in revers. Fortunately, because we have functions like column-span, gutter-span, and grid-span, we're able to build this fairly easily and have the heavy lifting of the math done for us.
width: column-span(1, 1);
float: right;
margin-left: -100%;
margin-right: grid-span(2, 2) + gutter-span();
clear: none;
}
@include breakpoint($break2) {
margin-right: 0;
@include grid-span(2, 1);
@include pull(10, 1);
clear: none;
}
@include breakpoint($break3) {
@include grid-span(1, 5);
}
}
#qux {
background: yellow;
@include grid-span(1, 1);
clear: both;
@include breakpoint($break) {
@include grid-span(3, 2);
// clear: left;
}
@include breakpoint($break2) {
@include grid-span(3, 4);
clear: both;
@include push(3, 1);
}
@include breakpoint($break3) {
@include grid-span(1, 2);
clear: none;
@include pull(2, 2);
}
}
#waldo {
background: blue;
height: 70px;
@include grid-span(1, 2);
@include breakpoint($break) {
@include grid-span(1, 1);
clear: left;
}
@include breakpoint($break2) {
@include grid-span(3, 1);
@include pull(6, 1);
}
@include breakpoint($break3) {
@include grid-span(1, 4);
clear: none;
margin-right: -100%;
margin-left: 0;
}
}
#garfield {
background: orange;
@include grid-span(2, 1);
@include breakpoint($break) {
@include float-span(4, 1);
}
@include breakpoint($break2) {
@include grid-span(5, 8);
}
@include breakpoint($break3) {
@include grid-span(2, 3);
clear: both;
@include push(2, 1);
}
}
Raw
SassMeister-output.css
body {
margin: 0;
padding: 0;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(210, 105, 30, 0.5)), color-stop(42.85714%, rgba(210, 105, 30, 0.5)), color-stop(42.85714%, rgba(210, 105, 30, 0.25)), color-stop(57.14286%, rgba(210, 105, 30, 0.25)), color-stop(57.14286%, rgba(210, 105, 30, 0.5)), color-stop(100%, rgba(210, 105, 30, 0.5)));
background-image: -webkit-linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 42.85714%, rgba(210, 105, 30, 0.25) 42.85714%, rgba(210, 105, 30, 0.25) 57.14286%, rgba(210, 105, 30, 0.5) 57.14286%, rgba(210, 105, 30, 0.5) 100%);
background-image: -moz-linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 42.85714%, rgba(210, 105, 30, 0.25) 42.85714%, rgba(210, 105, 30, 0.25) 57.14286%, rgba(210, 105, 30, 0.5) 57.14286%, rgba(210, 105, 30, 0.5) 100%);
background-image: -o-linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 42.85714%, rgba(210, 105, 30, 0.25) 42.85714%, rgba(210, 105, 30, 0.25) 57.14286%, rgba(210, 105, 30, 0.5) 57.14286%, rgba(210, 105, 30, 0.5) 100%);
background-image: linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 42.85714%, rgba(210, 105, 30, 0.25) 42.85714%, rgba(210, 105, 30, 0.25) 57.14286%, rgba(210, 105, 30, 0.5) 57.14286%, rgba(210, 105, 30, 0.5) 100%);
}
@media (min-width: 700px) {
body {
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(210, 105, 30, 0.5)), color-stop(14.28571%, rgba(210, 105, 30, 0.5)), color-stop(14.28571%, rgba(210, 105, 30, 0.25)), color-stop(16.66667%, rgba(210, 105, 30, 0.25)), color-stop(16.66667%, rgba(210, 105, 30, 0.5)), color-stop(73.80952%, rgba(210, 105, 30, 0.5)), color-stop(73.80952%, rgba(210, 105, 30, 0.25)), color-stop(76.19048%, rgba(210, 105, 30, 0.25)), color-stop(76.19048%, rgba(210, 105, 30, 0.5)), color-stop(90.47619%, rgba(210, 105, 30, 0.5)), color-stop(90.47619%, rgba(210, 105, 30, 0.25)), color-stop(92.85714%, rgba(210, 105, 30, 0.25)), color-stop(92.85714%, rgba(210, 105, 30, 0.5)), color-stop(100.0%, rgba(210, 105, 30, 0.5)), color-stop(100.0%, rgba(210, 105, 30, 0.25)), color-stop(102.38095%, rgba(210, 105, 30, 0.25)));
background-image: -webkit-linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 14.28571%, rgba(210, 105, 30, 0.25) 14.28571%, rgba(210, 105, 30, 0.25) 16.66667%, rgba(210, 105, 30, 0.5) 16.66667%, rgba(210, 105, 30, 0.5) 73.80952%, rgba(210, 105, 30, 0.25) 73.80952%, rgba(210, 105, 30, 0.25) 76.19048%, rgba(210, 105, 30, 0.5) 76.19048%, rgba(210, 105, 30, 0.5) 90.47619%, rgba(210, 105, 30, 0.25) 90.47619%, rgba(210, 105, 30, 0.25) 92.85714%, rgba(210, 105, 30, 0.5) 92.85714%, rgba(210, 105, 30, 0.5) 100.0%, rgba(210, 105, 30, 0.25) 100.0%, rgba(210, 105, 30, 0.25) 102.38095%);
background-image: -moz-linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 14.28571%, rgba(210, 105, 30, 0.25) 14.28571%, rgba(210, 105, 30, 0.25) 16.66667%, rgba(210, 105, 30, 0.5) 16.66667%, rgba(210, 105, 30, 0.5) 73.80952%, rgba(210, 105, 30, 0.25) 73.80952%, rgba(210, 105, 30, 0.25) 76.19048%, rgba(210, 105, 30, 0.5) 76.19048%, rgba(210, 105, 30, 0.5) 90.47619%, rgba(210, 105, 30, 0.25) 90.47619%, rgba(210, 105, 30, 0.25) 92.85714%, rgba(210, 105, 30, 0.5) 92.85714%, rgba(210, 105, 30, 0.5) 100.0%, rgba(210, 105, 30, 0.25) 100.0%, rgba(210, 105, 30, 0.25) 102.38095%);
background-image: -o-linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 14.28571%, rgba(210, 105, 30, 0.25) 14.28571%, rgba(210, 105, 30, 0.25) 16.66667%, rgba(210, 105, 30, 0.5) 16.66667%, rgba(210, 105, 30, 0.5) 73.80952%, rgba(210, 105, 30, 0.25) 73.80952%, rgba(210, 105, 30, 0.25) 76.19048%, rgba(210, 105, 30, 0.5) 76.19048%, rgba(210, 105, 30, 0.5) 90.47619%, rgba(210, 105, 30, 0.25) 90.47619%, rgba(210, 105, 30, 0.25) 92.85714%, rgba(210, 105, 30, 0.5) 92.85714%, rgba(210, 105, 30, 0.5) 100.0%, rgba(210, 105, 30, 0.25) 100.0%, rgba(210, 105, 30, 0.25) 102.38095%);
background-image: linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 14.28571%, rgba(210, 105, 30, 0.25) 14.28571%, rgba(210, 105, 30, 0.25) 16.66667%, rgba(210, 105, 30, 0.5) 16.66667%, rgba(210, 105, 30, 0.5) 73.80952%, rgba(210, 105, 30, 0.25) 73.80952%, rgba(210, 105, 30, 0.25) 76.19048%, rgba(210, 105, 30, 0.5) 76.19048%, rgba(210, 105, 30, 0.5) 90.47619%, rgba(210, 105, 30, 0.25) 90.47619%, rgba(210, 105, 30, 0.25) 92.85714%, rgba(210, 105, 30, 0.5) 92.85714%, rgba(210, 105, 30, 0.5) 100.0%, rgba(210, 105, 30, 0.25) 100.0%, rgba(210, 105, 30, 0.25) 102.38095%);
}
}
@media (min-width: 900px) {
body {
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(210, 105, 30, 0.5)), color-stop(6.38298%, rgba(210, 105, 30, 0.5)), color-stop(6.38298%, rgba(210, 105, 30, 0.25)), color-stop(8.51064%, rgba(210, 105, 30, 0.25)), color-stop(8.51064%, rgba(210, 105, 30, 0.5)), color-stop(14.89362%, rgba(210, 105, 30, 0.5)), color-stop(14.89362%, rgba(210, 105, 30, 0.25)), color-stop(17.02128%, rgba(210, 105, 30, 0.25)), color-stop(17.02128%, rgba(210, 105, 30, 0.5)), color-stop(23.40426%, rgba(210, 105, 30, 0.5)), color-stop(23.40426%, rgba(210, 105, 30, 0.25)), color-stop(25.53191%, rgba(210, 105, 30, 0.25)), color-stop(25.53191%, rgba(210, 105, 30, 0.5)), color-stop(31.91489%, rgba(210, 105, 30, 0.5)), color-stop(31.91489%, rgba(210, 105, 30, 0.25)), color-stop(34.04255%, rgba(210, 105, 30, 0.25)), color-stop(34.04255%, rgba(210, 105, 30, 0.5)), color-stop(40.42553%, rgba(210, 105, 30, 0.5)), color-stop(40.42553%, rgba(210, 105, 30, 0.25)), color-stop(42.55319%, rgba(210, 105, 30, 0.25)), color-stop(42.55319%, rgba(210, 105, 30, 0.5)), color-stop(48.93617%, rgba(210, 105, 30, 0.5)), color-stop(48.93617%, rgba(210, 105, 30, 0.25)), color-stop(51.06383%, rgba(210, 105, 30, 0.25)), color-stop(51.06383%, rgba(210, 105, 30, 0.5)), color-stop(57.44681%, rgba(210, 105, 30, 0.5)), color-stop(57.44681%, rgba(210, 105, 30, 0.25)), color-stop(59.57447%, rgba(210, 105, 30, 0.25)), color-stop(59.57447%, rgba(210, 105, 30, 0.5)), color-stop(65.95745%, rgba(210, 105, 30, 0.5)), color-stop(65.95745%, rgba(210, 105, 30, 0.25)), color-stop(68.08511%, rgba(210, 105, 30, 0.25)), color-stop(68.08511%, rgba(210, 105, 30, 0.5)), color-stop(74.46809%, rgba(210, 105, 30, 0.5)), color-stop(74.46809%, rgba(210, 105, 30, 0.25)), color-stop(76.59574%, rgba(210, 105, 30, 0.25)), color-stop(76.59574%, rgba(210, 105, 30, 0.5)), color-stop(82.97872%, rgba(210, 105, 30, 0.5)), color-stop(82.97872%, rgba(210, 105, 30, 0.25)), color-stop(85.10638%, rgba(210, 105, 30, 0.25)), color-stop(85.10638%, rgba(210, 105, 30, 0.5)), color-stop(91.48936%, rgba(210, 105, 30, 0.5)), color-stop(91.48936%, rgba(210, 105, 30, 0.25)), color-stop(93.61702%, rgba(210, 105, 30, 0.25)), color-stop(93.61702%, rgba(210, 105, 30, 0.5)), color-stop(100%, rgba(210, 105, 30, 0.5)));
background-image: -webkit-linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 6.38298%, rgba(210, 105, 30, 0.25) 6.38298%, rgba(210, 105, 30, 0.25) 8.51064%, rgba(210, 105, 30, 0.5) 8.51064%, rgba(210, 105, 30, 0.5) 14.89362%, rgba(210, 105, 30, 0.25) 14.89362%, rgba(210, 105, 30, 0.25) 17.02128%, rgba(210, 105, 30, 0.5) 17.02128%, rgba(210, 105, 30, 0.5) 23.40426%, rgba(210, 105, 30, 0.25) 23.40426%, rgba(210, 105, 30, 0.25) 25.53191%, rgba(210, 105, 30, 0.5) 25.53191%, rgba(210, 105, 30, 0.5) 31.91489%, rgba(210, 105, 30, 0.25) 31.91489%, rgba(210, 105, 30, 0.25) 34.04255%, rgba(210, 105, 30, 0.5) 34.04255%, rgba(210, 105, 30, 0.5) 40.42553%, rgba(210, 105, 30, 0.25) 40.42553%, rgba(210, 105, 30, 0.25) 42.55319%, rgba(210, 105, 30, 0.5) 42.55319%, rgba(210, 105, 30, 0.5) 48.93617%, rgba(210, 105, 30, 0.25) 48.93617%, rgba(210, 105, 30, 0.25) 51.06383%, rgba(210, 105, 30, 0.5) 51.06383%, rgba(210, 105, 30, 0.5) 57.44681%, rgba(210, 105, 30, 0.25) 57.44681%, rgba(210, 105, 30, 0.25) 59.57447%, rgba(210, 105, 30, 0.5) 59.57447%, rgba(210, 105, 30, 0.5) 65.95745%, rgba(210, 105, 30, 0.25) 65.95745%, rgba(210, 105, 30, 0.25) 68.08511%, rgba(210, 105, 30, 0.5) 68.08511%, rgba(210, 105, 30, 0.5) 74.46809%, rgba(210, 105, 30, 0.25) 74.46809%, rgba(210, 105, 30, 0.25) 76.59574%, rgba(210, 105, 30, 0.5) 76.59574%, rgba(210, 105, 30, 0.5) 82.97872%, rgba(210, 105, 30, 0.25) 82.97872%, rgba(210, 105, 30, 0.25) 85.10638%, rgba(210, 105, 30, 0.5) 85.10638%, rgba(210, 105, 30, 0.5) 91.48936%, rgba(210, 105, 30, 0.25) 91.48936%, rgba(210, 105, 30, 0.25) 93.61702%, rgba(210, 105, 30, 0.5) 93.61702%, rgba(210, 105, 30, 0.5) 100%);
background-image: -moz-linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 6.38298%, rgba(210, 105, 30, 0.25) 6.38298%, rgba(210, 105, 30, 0.25) 8.51064%, rgba(210, 105, 30, 0.5) 8.51064%, rgba(210, 105, 30, 0.5) 14.89362%, rgba(210, 105, 30, 0.25) 14.89362%, rgba(210, 105, 30, 0.25) 17.02128%, rgba(210, 105, 30, 0.5) 17.02128%, rgba(210, 105, 30, 0.5) 23.40426%, rgba(210, 105, 30, 0.25) 23.40426%, rgba(210, 105, 30, 0.25) 25.53191%, rgba(210, 105, 30, 0.5) 25.53191%, rgba(210, 105, 30, 0.5) 31.91489%, rgba(210, 105, 30, 0.25) 31.91489%, rgba(210, 105, 30, 0.25) 34.04255%, rgba(210, 105, 30, 0.5) 34.04255%, rgba(210, 105, 30, 0.5) 40.42553%, rgba(210, 105, 30, 0.25) 40.42553%, rgba(210, 105, 30, 0.25) 42.55319%, rgba(210, 105, 30, 0.5) 42.55319%, rgba(210, 105, 30, 0.5) 48.93617%, rgba(210, 105, 30, 0.25) 48.93617%, rgba(210, 105, 30, 0.25) 51.06383%, rgba(210, 105, 30, 0.5) 51.06383%, rgba(210, 105, 30, 0.5) 57.44681%, rgba(210, 105, 30, 0.25) 57.44681%, rgba(210, 105, 30, 0.25) 59.57447%, rgba(210, 105, 30, 0.5) 59.57447%, rgba(210, 105, 30, 0.5) 65.95745%, rgba(210, 105, 30, 0.25) 65.95745%, rgba(210, 105, 30, 0.25) 68.08511%, rgba(210, 105, 30, 0.5) 68.08511%, rgba(210, 105, 30, 0.5) 74.46809%, rgba(210, 105, 30, 0.25) 74.46809%, rgba(210, 105, 30, 0.25) 76.59574%, rgba(210, 105, 30, 0.5) 76.59574%, rgba(210, 105, 30, 0.5) 82.97872%, rgba(210, 105, 30, 0.25) 82.97872%, rgba(210, 105, 30, 0.25) 85.10638%, rgba(210, 105, 30, 0.5) 85.10638%, rgba(210, 105, 30, 0.5) 91.48936%, rgba(210, 105, 30, 0.25) 91.48936%, rgba(210, 105, 30, 0.25) 93.61702%, rgba(210, 105, 30, 0.5) 93.61702%, rgba(210, 105, 30, 0.5) 100%);
background-image: -o-linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 6.38298%, rgba(210, 105, 30, 0.25) 6.38298%, rgba(210, 105, 30, 0.25) 8.51064%, rgba(210, 105, 30, 0.5) 8.51064%, rgba(210, 105, 30, 0.5) 14.89362%, rgba(210, 105, 30, 0.25) 14.89362%, rgba(210, 105, 30, 0.25) 17.02128%, rgba(210, 105, 30, 0.5) 17.02128%, rgba(210, 105, 30, 0.5) 23.40426%, rgba(210, 105, 30, 0.25) 23.40426%, rgba(210, 105, 30, 0.25) 25.53191%, rgba(210, 105, 30, 0.5) 25.53191%, rgba(210, 105, 30, 0.5) 31.91489%, rgba(210, 105, 30, 0.25) 31.91489%, rgba(210, 105, 30, 0.25) 34.04255%, rgba(210, 105, 30, 0.5) 34.04255%, rgba(210, 105, 30, 0.5) 40.42553%, rgba(210, 105, 30, 0.25) 40.42553%, rgba(210, 105, 30, 0.25) 42.55319%, rgba(210, 105, 30, 0.5) 42.55319%, rgba(210, 105, 30, 0.5) 48.93617%, rgba(210, 105, 30, 0.25) 48.93617%, rgba(210, 105, 30, 0.25) 51.06383%, rgba(210, 105, 30, 0.5) 51.06383%, rgba(210, 105, 30, 0.5) 57.44681%, rgba(210, 105, 30, 0.25) 57.44681%, rgba(210, 105, 30, 0.25) 59.57447%, rgba(210, 105, 30, 0.5) 59.57447%, rgba(210, 105, 30, 0.5) 65.95745%, rgba(210, 105, 30, 0.25) 65.95745%, rgba(210, 105, 30, 0.25) 68.08511%, rgba(210, 105, 30, 0.5) 68.08511%, rgba(210, 105, 30, 0.5) 74.46809%, rgba(210, 105, 30, 0.25) 74.46809%, rgba(210, 105, 30, 0.25) 76.59574%, rgba(210, 105, 30, 0.5) 76.59574%, rgba(210, 105, 30, 0.5) 82.97872%, rgba(210, 105, 30, 0.25) 82.97872%, rgba(210, 105, 30, 0.25) 85.10638%, rgba(210, 105, 30, 0.5) 85.10638%, rgba(210, 105, 30, 0.5) 91.48936%, rgba(210, 105, 30, 0.25) 91.48936%, rgba(210, 105, 30, 0.25) 93.61702%, rgba(210, 105, 30, 0.5) 93.61702%, rgba(210, 105, 30, 0.5) 100%);
background-image: linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 6.38298%, rgba(210, 105, 30, 0.25) 6.38298%, rgba(210, 105, 30, 0.25) 8.51064%, rgba(210, 105, 30, 0.5) 8.51064%, rgba(210, 105, 30, 0.5) 14.89362%, rgba(210, 105, 30, 0.25) 14.89362%, rgba(210, 105, 30, 0.25) 17.02128%, rgba(210, 105, 30, 0.5) 17.02128%, rgba(210, 105, 30, 0.5) 23.40426%, rgba(210, 105, 30, 0.25) 23.40426%, rgba(210, 105, 30, 0.25) 25.53191%, rgba(210, 105, 30, 0.5) 25.53191%, rgba(210, 105, 30, 0.5) 31.91489%, rgba(210, 105, 30, 0.25) 31.91489%, rgba(210, 105, 30, 0.25) 34.04255%, rgba(210, 105, 30, 0.5) 34.04255%, rgba(210, 105, 30, 0.5) 40.42553%, rgba(210, 105, 30, 0.25) 40.42553%, rgba(210, 105, 30, 0.25) 42.55319%, rgba(210, 105, 30, 0.5) 42.55319%, rgba(210, 105, 30, 0.5) 48.93617%, rgba(210, 105, 30, 0.25) 48.93617%, rgba(210, 105, 30, 0.25) 51.06383%, rgba(210, 105, 30, 0.5) 51.06383%, rgba(210, 105, 30, 0.5) 57.44681%, rgba(210, 105, 30, 0.25) 57.44681%, rgba(210, 105, 30, 0.25) 59.57447%, rgba(210, 105, 30, 0.5) 59.57447%, rgba(210, 105, 30, 0.5) 65.95745%, rgba(210, 105, 30, 0.25) 65.95745%, rgba(210, 105, 30, 0.25) 68.08511%, rgba(210, 105, 30, 0.5) 68.08511%, rgba(210, 105, 30, 0.5) 74.46809%, rgba(210, 105, 30, 0.25) 74.46809%, rgba(210, 105, 30, 0.25) 76.59574%, rgba(210, 105, 30, 0.5) 76.59574%, rgba(210, 105, 30, 0.5) 82.97872%, rgba(210, 105, 30, 0.25) 82.97872%, rgba(210, 105, 30, 0.25) 85.10638%, rgba(210, 105, 30, 0.5) 85.10638%, rgba(210, 105, 30, 0.5) 91.48936%, rgba(210, 105, 30, 0.25) 91.48936%, rgba(210, 105, 30, 0.25) 93.61702%, rgba(210, 105, 30, 0.5) 93.61702%, rgba(210, 105, 30, 0.5) 100%);
}
}
@media (min-width: 1200px) {
body {
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(210, 105, 30, 0.5)), color-stop(3.79747%, rgba(210, 105, 30, 0.5)), color-stop(3.79747%, rgba(210, 105, 30, 0.25)), color-stop(5.06329%, rgba(210, 105, 30, 0.25)), color-stop(5.06329%, rgba(210, 105, 30, 0.5)), color-stop(16.4557%, rgba(210, 105, 30, 0.5)), color-stop(16.4557%, rgba(210, 105, 30, 0.25)), color-stop(17.72152%, rgba(210, 105, 30, 0.25)), color-stop(17.72152%, rgba(210, 105, 30, 0.5)), color-stop(36.70886%, rgba(210, 105, 30, 0.5)), color-stop(36.70886%, rgba(210, 105, 30, 0.25)), color-stop(37.97468%, rgba(210, 105, 30, 0.25)), color-stop(37.97468%, rgba(210, 105, 30, 0.5)), color-stop(64.55696%, rgba(210, 105, 30, 0.5)), color-stop(64.55696%, rgba(210, 105, 30, 0.25)), color-stop(65.82278%, rgba(210, 105, 30, 0.25)), color-stop(65.82278%, rgba(210, 105, 30, 0.5)), color-stop(100%, rgba(210, 105, 30, 0.5)), color-stop(100%, rgba(210, 105, 30, 0.25)), color-stop(101.26582%, rgba(210, 105, 30, 0.25)));
background-image: -webkit-linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 3.79747%, rgba(210, 105, 30, 0.25) 3.79747%, rgba(210, 105, 30, 0.25) 5.06329%, rgba(210, 105, 30, 0.5) 5.06329%, rgba(210, 105, 30, 0.5) 16.4557%, rgba(210, 105, 30, 0.25) 16.4557%, rgba(210, 105, 30, 0.25) 17.72152%, rgba(210, 105, 30, 0.5) 17.72152%, rgba(210, 105, 30, 0.5) 36.70886%, rgba(210, 105, 30, 0.25) 36.70886%, rgba(210, 105, 30, 0.25) 37.97468%, rgba(210, 105, 30, 0.5) 37.97468%, rgba(210, 105, 30, 0.5) 64.55696%, rgba(210, 105, 30, 0.25) 64.55696%, rgba(210, 105, 30, 0.25) 65.82278%, rgba(210, 105, 30, 0.5) 65.82278%, rgba(210, 105, 30, 0.5) 100%, rgba(210, 105, 30, 0.25) 100%, rgba(210, 105, 30, 0.25) 101.26582%);
background-image: -moz-linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 3.79747%, rgba(210, 105, 30, 0.25) 3.79747%, rgba(210, 105, 30, 0.25) 5.06329%, rgba(210, 105, 30, 0.5) 5.06329%, rgba(210, 105, 30, 0.5) 16.4557%, rgba(210, 105, 30, 0.25) 16.4557%, rgba(210, 105, 30, 0.25) 17.72152%, rgba(210, 105, 30, 0.5) 17.72152%, rgba(210, 105, 30, 0.5) 36.70886%, rgba(210, 105, 30, 0.25) 36.70886%, rgba(210, 105, 30, 0.25) 37.97468%, rgba(210, 105, 30, 0.5) 37.97468%, rgba(210, 105, 30, 0.5) 64.55696%, rgba(210, 105, 30, 0.25) 64.55696%, rgba(210, 105, 30, 0.25) 65.82278%, rgba(210, 105, 30, 0.5) 65.82278%, rgba(210, 105, 30, 0.5) 100%, rgba(210, 105, 30, 0.25) 100%, rgba(210, 105, 30, 0.25) 101.26582%);
background-image: -o-linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 3.79747%, rgba(210, 105, 30, 0.25) 3.79747%, rgba(210, 105, 30, 0.25) 5.06329%, rgba(210, 105, 30, 0.5) 5.06329%, rgba(210, 105, 30, 0.5) 16.4557%, rgba(210, 105, 30, 0.25) 16.4557%, rgba(210, 105, 30, 0.25) 17.72152%, rgba(210, 105, 30, 0.5) 17.72152%, rgba(210, 105, 30, 0.5) 36.70886%, rgba(210, 105, 30, 0.25) 36.70886%, rgba(210, 105, 30, 0.25) 37.97468%, rgba(210, 105, 30, 0.5) 37.97468%, rgba(210, 105, 30, 0.5) 64.55696%, rgba(210, 105, 30, 0.25) 64.55696%, rgba(210, 105, 30, 0.25) 65.82278%, rgba(210, 105, 30, 0.5) 65.82278%, rgba(210, 105, 30, 0.5) 100%, rgba(210, 105, 30, 0.25) 100%, rgba(210, 105, 30, 0.25) 101.26582%);
background-image: linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 3.79747%, rgba(210, 105, 30, 0.25) 3.79747%, rgba(210, 105, 30, 0.25) 5.06329%, rgba(210, 105, 30, 0.5) 5.06329%, rgba(210, 105, 30, 0.5) 16.4557%, rgba(210, 105, 30, 0.25) 16.4557%, rgba(210, 105, 30, 0.25) 17.72152%, rgba(210, 105, 30, 0.5) 17.72152%, rgba(210, 105, 30, 0.5) 36.70886%, rgba(210, 105, 30, 0.25) 36.70886%, rgba(210, 105, 30, 0.25) 37.97468%, rgba(210, 105, 30, 0.5) 37.97468%, rgba(210, 105, 30, 0.5) 64.55696%, rgba(210, 105, 30, 0.25) 64.55696%, rgba(210, 105, 30, 0.25) 65.82278%, rgba(210, 105, 30, 0.5) 65.82278%, rgba(210, 105, 30, 0.5) 100%, rgba(210, 105, 30, 0.25) 100%, rgba(210, 105, 30, 0.25) 101.26582%);
}
}
div {
height: 50px;
}
#foo {
background: red;
height: 30px;
width: 42.85714%;
clear: right;
float: right;
margin-right: 0;
}
@media (min-width: 700px) {
#foo {
width: 7.14286%;
clear: right;
float: right;
margin-right: 0;
clear: none;
}
}
@media (min-width: 900px) {
#foo {
width: 14.89362%;
clear: right;
float: right;
margin-right: 0;
}
}
@media (min-width: 1200px) {
#foo {
width: 18.98734%;
clear: right;
float: left;
margin-left: 17.72152%;
}
}
#bar {
background: green;
height: 20px;
width: 42.85714%;
clear: right;
float: left;
margin-left: 0;
margin-right: 14.28571%;
clear: left;
}
@media (min-width: 700px) {
#bar {
width: 73.80952%;
clear: right;
float: left;
margin-left: 16.66667%;
clear: none;
}
}
@media (min-width: 900px) {
#bar {
width: 65.95745%;
clear: right;
float: left;
clear: none;
}
}
@media (min-width: 1200px) {
#bar {
width: 3.79747%;
clear: right;
float: left;
margin-left: 0;
margin-right: 1.26582%;
margin-left: -37.97468%;
}
}
#baz {
background: purple;
width: 42.85714%;
clear: right;
float: left;
margin-left: 0;
margin-right: 14.28571%;
}
@media (min-width: 700px) {
#baz {
width: 14.28571%;
float: right;
margin-left: -100%;
margin-right: 78.57143%;
clear: none;
}
}
@media (min-width: 900px) {
#baz {
margin-right: 0;
width: 14.89362%;
clear: right;
float: left;
margin-left: 0;
margin-right: 2.12766%;
margin-left: -85.10638%;
clear: none;
}
}
@media (min-width: 1200px) {
#baz {
width: 34.17722%;
clear: right;
float: right;
margin-right: 0;
}
}
#qux {
background: yellow;
width: 42.85714%;
clear: right;
float: left;
margin-left: 0;
margin-right: 14.28571%;
clear: both;
}
@media (min-width: 700px) {
#qux {
width: 83.33333%;
clear: right;
float: right;
margin-right: 0;
}
}
@media (min-width: 900px) {
#qux {
width: 23.40426%;
clear: right;
float: left;
clear: both;
margin-left: 25.53191%;
}
}
@media (min-width: 1200px) {
#qux {
width: 11.39241%;
clear: right;
float: left;
clear: none;
margin-left: -32.91139%;
}
}
#waldo {
background: blue;
height: 70px;
width: 42.85714%;
clear: right;
float: right;
margin-right: 0;
}
@media (min-width: 700px) {
#waldo {
width: 14.28571%;
clear: right;
float: left;
margin-left: 0;
margin-right: 2.38095%;
clear: left;
}
}
@media (min-width: 900px) {
#waldo {
width: 23.40426%;
clear: right;
float: left;
margin-left: 0;
margin-right: 2.12766%;
margin-left: -51.06383%;
}
}
@media (min-width: 1200px) {
#waldo {
width: 26.58228%;
clear: right;
float: left;
clear: none;
margin-right: -100%;
margin-left: 0;
}
}
#garfield {
background: orange;
width: 100%;
clear: right;
float: right;
margin-right: 0;
}
@media (min-width: 700px) {
#garfield {
width: 100.0%;
clear: right;
float: right;
margin-right: 0;
}
}
@media (min-width: 900px) {
#garfield {
width: 40.42553%;
clear: right;
float: right;
margin-right: 0;
}
}
@media (min-width: 1200px) {
#garfield {
width: 46.83544%;
clear: right;
float: left;
clear: both;
margin-left: 17.72152%;
}
}
Raw
SassMeister-rendered.html
<!doctype html>
<html>
<head>
<title>Singularity HTML Demo</title>
<link rel="stylesheet" href="css/demo-float.css">
</head>
<body>
<div id="page">
<div id="foo"></div>
<div id="bar"></div>
<div id="baz"></div>
<div id="qux"></div>
<div id="waldo"></div>
<div id="garfield"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment