Skip to content

Instantly share code, notes, and snippets.

@Snugug

Snugug/SassMeister-input-HTML.html

Created February 21, 2014 15:54
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 Snugug/9136779 to your computer and use it in GitHub Desktop.
Save Snugug/9136779 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Clearing trouble</title> <!-- 70chars max -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="container">
<section class="contact"></section>
<div class="follow-flow">
<section class="follow"></section>
<section class="newsletter"></section>
</div>
<section class="thanks"></section>
<section class="liner"></section>
</div>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.0.rc.4)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v2.4.1)
// Singularity.gs (v1.2.0.rc.6)
// Toolkit (v2.0.0.alpha.10)
// ----
@import 'compass';
@import 'toolkit/kickstart';
@import 'breakpoint';
@import 'singularitygs';
@include add-grid(6);
@include add-grid(9 at 675px);
@include add-grid(12 at 850px);
@include add-grid(15 at 1075px);
@include add-grid(18 at 1200px);
@include add-gutter(1/3);
@include sgs-change('output', 'isolation');
body,
html {
height:100%;
padding:0;
margin:0;
@include background-grid;
}
.container {
max-width:750px;
margin: 0 auto;
}
.contact {
background-color:red;
height:10em;
@include breakpoint(675px 849px) {
@include isolation-span(5,1,'left');
}
@include breakpoint(850px 1074px) {
@include isolation-span(6,1,'left');
}
@include breakpoint(1075px 1199px) {
@include isolation-span(5,1);
}
@include breakpoint(1200px) {
@include isolation-span(6,1);
}
}
.follow {
background-color:green;
height:5em;
@include breakpoint(675px 849px) {
@include isolation-span(4,6,'right');
}
@include breakpoint(850px 1074px) {
@include isolation-span(6,7,'right');
}
@include breakpoint(1075px 1199px) {
@include isolation-span(5,6,'none');
}
@include breakpoint(1200px) {
width: 100%;
margin: 0;
clear: none;
float: right;
}
}
.newsletter {
background-color:yellow;
height:5em;
@include breakpoint(675px 849px) {
@include isolation-span(4,6,'right');
}
@include breakpoint(850px 1074px) {
@include isolation-span(6,7,'right');
}
@include breakpoint(1075px 1199px) {
@include isolation-span(5,6,'none');
}
@include breakpoint(1200px) {
width: 100%;
margin: 0;
clear: right;
float: left;
}
}
.thanks {
background-color:blue;
height:10em;
@include breakpoint(675px 849px) {
@include isolation-span(9,1,'both');
}
@include breakpoint(850px 1074px) {
@include isolation-span(12,1,'both');
}
@include breakpoint(1075px 1199px) {
@include isolation-span(5,11, 'none');
}
@include breakpoint(1200px) {
@include isolation-span(6,13,'none');
}
}
.liner {
background-color:brown;
height:10em;
@include breakpoint(675px 849px) {
@include isolation-span(9, 1, 'both');
}
@include breakpoint(850px 1074px) {
@include isolation-span(12, 1, 'both');
}
@include breakpoint(1075px 1199px) {
@include isolation-span(15, 1, 'both');
}
@include breakpoint(1200px) {
@include isolation-span(18, 1, 'both');
}
}
.follow-flow {
@include breakpoint(1200px) {
@include isolation-span(6,7, 'none');
}
}
Raw
SassMeister-output.css
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
img, video {
max-width: 100%;
height: auto;
}
body,
html {
height: 100%;
padding: 0;
margin: 0;
}
.container {
max-width: 750px;
margin: 0 auto;
}
.contact {
background-color: red;
height: 10em;
}
@media (min-width: 675px) and (max-width: 849px) {
.contact {
width: 54.2857142857%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: "left";
}
}
@media (min-width: 850px) and (max-width: 1074px) {
.contact {
width: 48.9361702128%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: "left";
}
}
@media (min-width: 1075px) and (max-width: 1199px) {
.contact {
width: 32.2033898305%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
}
}
@media (min-width: 1200px) {
.contact {
width: 32.3943661972%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
}
}
.follow {
background-color: green;
height: 5em;
}
@media (min-width: 675px) and (max-width: 849px) {
.follow {
width: 42.8571428571%;
float: right;
margin-left: 0;
margin-right: 0;
clear: "right";
}
}
@media (min-width: 850px) and (max-width: 1074px) {
.follow {
width: 48.9361702128%;
float: right;
margin-left: 0;
margin-right: 0;
clear: "right";
}
}
@media (min-width: 1075px) and (max-width: 1199px) {
.follow {
width: 32.2033898305%;
float: left;
margin-right: -100%;
margin-left: 33.8983050847%;
clear: "none";
}
}
@media (min-width: 1200px) {
.follow {
width: 100%;
margin: 0;
clear: none;
float: right;
}
}
.newsletter {
background-color: yellow;
height: 5em;
}
@media (min-width: 675px) and (max-width: 849px) {
.newsletter {
width: 42.8571428571%;
float: right;
margin-left: 0;
margin-right: 0;
clear: "right";
}
}
@media (min-width: 850px) and (max-width: 1074px) {
.newsletter {
width: 48.9361702128%;
float: right;
margin-left: 0;
margin-right: 0;
clear: "right";
}
}
@media (min-width: 1075px) and (max-width: 1199px) {
.newsletter {
width: 32.2033898305%;
float: left;
margin-right: -100%;
margin-left: 33.8983050847%;
clear: "none";
}
}
@media (min-width: 1200px) {
.newsletter {
width: 100%;
margin: 0;
clear: right;
float: left;
}
}
.thanks {
background-color: blue;
height: 10em;
}
@media (min-width: 675px) and (max-width: 849px) {
.thanks {
width: 100%;
float: right;
margin-left: 0;
margin-right: 0;
clear: "both";
}
}
@media (min-width: 850px) and (max-width: 1074px) {
.thanks {
width: 100%;
float: right;
margin-left: 0;
margin-right: 0;
clear: "both";
}
}
@media (min-width: 1075px) and (max-width: 1199px) {
.thanks {
width: 32.2033898305%;
float: right;
margin-left: 0;
margin-right: 0;
clear: "none";
}
}
@media (min-width: 1200px) {
.thanks {
width: 32.3943661972%;
float: right;
margin-left: 0;
margin-right: 0;
clear: "none";
}
}
.liner {
background-color: brown;
height: 10em;
}
@media (min-width: 675px) and (max-width: 849px) {
.liner {
width: 100%;
float: right;
margin-left: 0;
margin-right: 0;
clear: "both";
}
}
@media (min-width: 850px) and (max-width: 1074px) {
.liner {
width: 100%;
float: right;
margin-left: 0;
margin-right: 0;
clear: "both";
}
}
@media (min-width: 1075px) and (max-width: 1199px) {
.liner {
width: 100%;
float: right;
margin-left: 0;
margin-right: 0;
clear: "both";
}
}
@media (min-width: 1200px) {
.liner {
width: 100%;
float: right;
margin-left: 0;
margin-right: 0;
clear: "both";
}
}
@media (min-width: 1200px) {
.follow-flow {
width: 32.3943661972%;
float: left;
margin-right: -100%;
margin-left: 33.8028169014%;
clear: "none";
}
}
Raw
SassMeister-rendered.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Clearing trouble</title> <!-- 70chars max -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="container">
<section class="contact"></section>
<div class="follow-flow">
<section class="follow"></section>
<section class="newsletter"></section>
</div>
<section class="thanks"></section>
<section class="liner"></section>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment