Skip to content

Instantly share code, notes, and snippets.

@alienresident

alienresident/SassMeister-input-HTML.html

Created October 27, 2015 17:02
Show Gist options
  • Save alienresident/f2ac3e12cf0dbd50403f to your computer and use it in GitHub Desktop.
Save alienresident/f2ac3e12cf0dbd50403f to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<head>
<title>Responsive Grid Tests</title>
</head>
<body>
<div class="wrap">
<div class="full-bleed">
<div class="carousel">Carousel</div>
</div>
<div class="grid">
<main class="content"><h2>Content</h2></main>
<aside class="sidebar"><h2>Sidebar</h2></aside>
<div class="one-unit">1 Unit</div>
</div>
</div>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
@import "breakpoint";
@import "susy";
//////////////////////////////
// VARIABLES: For layout breakpoints
//////////////////////////////
// https://github.com/at-import/breakpoint/wiki/Respond-To
//$breakpoint-to-ems: true;
@include add-breakpoint("xx-large", (1120px));
@include add-breakpoint("x-large", (960px 1119px, 'no-query' true));
@include add-breakpoint("large", (768px 959px));
@include add-breakpoint("medium", (480px 767px));
@include add-breakpoint("small", (240px 479px));
$xx-large-layout: layout(1120px 14 1/4 fluid float split);
$x-large-layout: layout(960px 12 1/4 fluid float split);
$large-layout: layout(93.75% 9 1/4 fluid float split);
$medium-layout: layout(6 1/4 fluid float split);
$small-layout: layout(4 1/4 fluid float split);
$susy: (
//columns: 14,
//container: 1104px,
//container-position: center,
//gutters: 1/4,
global-box-sizing: border-box,
debug: (image: show,
color: rgba(red, .25),
output: background // background | overlay
)
);
@include border-box-sizing;
body {
font-family: helvetica;
overflow: hidden;
}
.grid {
height: 80vh;
background: rgba(#333,.5)
}
.content {
height: 40vh;
background: rgba(113, 218, 210, 0.8);
}
.sidebar {
height: 40vh;
background: rgba(250, 231, 179, 0.8);
}
.one-unit {
background: #0f0;
}
.full-bleed {
background: #f00;
}
h2 {
padding: 1rem 0;
text-align: center;
color: #555;
}
.carousel {
height: 10vh;
background: #ff0;
}
.wrap {
@include respond-to("small") {
@include layout($small-layout);
@include show-grid(4);
@include container();
.content, .sidebar {
@include span(4 of 4);
}
.one-unit {
@include span(1);
}
}
@include respond-to("medium") {
@include layout($medium-layout);
@include show-grid(6);
@include container();
.content{
@include span(4 of 6);
}
.sidebar {
@include span(2 of 6);
}
.one-unit {
@include span(1);
}
}
@include respond-to("large") {
@include layout($large-layout);
.grid {
@include show-grid(9);
@include container();
}
.carousel {
@include container();
}
.content {
@include span(6 of 9);
}
.sidebar {
@include span(3 of 9);
}
.one-unit {
@include span(1);
}
}
@include respond-to("x-large") {
@include layout($x-large-layout);
.grid {
@include show-grid(12);
@include container();
}
.content {
@include span(8 of 12);
}
.sidebar {
@include span(4 of 12);
}
.carousel {
@include container();
}
.one-unit {
@include span(1);
}
}
@include respond-to("xx-large") {
@include layout($xx-large-layout);
.grid {
@include show-grid(14);
@include container();
}
.carousel {
@include container();
}
.content {
@include span(10 of 14);
}
.sidebar {
@include span(4 of 14);
}
.one-unit {
@include span(1);
}
}
}
Raw
SassMeister-output.css
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: helvetica;
overflow: hidden;
}
.grid {
height: 80vh;
background: rgba(51, 51, 51, 0.5);
}
.content {
height: 40vh;
background: rgba(113, 218, 210, 0.8);
}
.sidebar {
height: 40vh;
background: rgba(250, 231, 179, 0.8);
}
.one-unit {
background: #0f0;
}
.full-bleed {
background: #f00;
}
h2 {
padding: 1rem 0;
text-align: center;
color: #555;
}
.carousel {
height: 10vh;
background: #ff0;
}
@media (min-width: 240px) and (max-width: 479px) {
.wrap {
background-image: linear-gradient(to right, transparent 10%, rgba(255, 0, 0, 0.25) 10%, rgba(255, 77, 77, 0.25) 90%, transparent 90%);
background-size: 25%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
max-width: 100%;
margin-left: auto;
margin-right: auto;
background-image: linear-gradient(to right, transparent 10%, rgba(255, 0, 0, 0.25) 10%, rgba(255, 77, 77, 0.25) 90%, transparent 90%);
background-size: 25%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
}
.wrap:after {
content: " ";
display: block;
clear: both;
}
.wrap .content, .wrap .sidebar {
width: 95%;
float: left;
margin-left: 2.5%;
margin-right: 2.5%;
}
.wrap .one-unit {
width: 20%;
float: left;
margin-left: 2.5%;
margin-right: 2.5%;
}
}
@media (min-width: 480px) and (max-width: 767px) {
.wrap {
background-image: linear-gradient(to right, transparent 10%, rgba(255, 0, 0, 0.25) 10%, rgba(255, 77, 77, 0.25) 90%, transparent 90%);
background-size: 16.66667%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
max-width: 100%;
margin-left: auto;
margin-right: auto;
background-image: linear-gradient(to right, transparent 10%, rgba(255, 0, 0, 0.25) 10%, rgba(255, 77, 77, 0.25) 90%, transparent 90%);
background-size: 16.66667%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
}
.wrap:after {
content: " ";
display: block;
clear: both;
}
.wrap .content {
width: 63.33333%;
float: left;
margin-left: 1.66667%;
margin-right: 1.66667%;
}
.wrap .sidebar {
width: 30%;
float: left;
margin-left: 1.66667%;
margin-right: 1.66667%;
}
.wrap .one-unit {
width: 13.33333%;
float: left;
margin-left: 1.66667%;
margin-right: 1.66667%;
}
}
@media (min-width: 768px) and (max-width: 959px) {
.wrap .grid {
background-image: linear-gradient(to right, transparent 10%, rgba(255, 0, 0, 0.25) 10%, rgba(255, 77, 77, 0.25) 90%, transparent 90%);
background-size: 11.11111%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
max-width: 93.75%;
margin-left: auto;
margin-right: auto;
background-image: linear-gradient(to right, transparent 10%, rgba(255, 0, 0, 0.25) 10%, rgba(255, 77, 77, 0.25) 90%, transparent 90%);
background-size: 11.11111%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
}
.wrap .grid:after {
content: " ";
display: block;
clear: both;
}
.wrap .carousel {
max-width: 93.75%;
margin-left: auto;
margin-right: auto;
background-image: linear-gradient(to right, transparent 10%, rgba(255, 0, 0, 0.25) 10%, rgba(255, 77, 77, 0.25) 90%, transparent 90%);
background-size: 11.11111%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
}
.wrap .carousel:after {
content: " ";
display: block;
clear: both;
}
.wrap .content {
width: 64.44444%;
float: left;
margin-left: 1.11111%;
margin-right: 1.11111%;
}
.wrap .sidebar {
width: 31.11111%;
float: left;
margin-left: 1.11111%;
margin-right: 1.11111%;
}
.wrap .one-unit {
width: 8.88889%;
float: left;
margin-left: 1.11111%;
margin-right: 1.11111%;
}
}
@media (min-width: 960px) and (max-width: 1119px) {
.wrap .grid {
background-image: linear-gradient(to right, transparent 10%, rgba(255, 0, 0, 0.25) 10%, rgba(255, 77, 77, 0.25) 90%, transparent 90%);
background-size: 8.33333%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
max-width: 960px;
margin-left: auto;
margin-right: auto;
background-image: linear-gradient(to right, transparent 10%, rgba(255, 0, 0, 0.25) 10%, rgba(255, 77, 77, 0.25) 90%, transparent 90%);
background-size: 8.33333%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
}
.wrap .grid:after {
content: " ";
display: block;
clear: both;
}
.wrap .content {
width: 65%;
float: left;
margin-left: 0.83333%;
margin-right: 0.83333%;
}
.wrap .sidebar {
width: 31.66667%;
float: left;
margin-left: 0.83333%;
margin-right: 0.83333%;
}
.wrap .carousel {
max-width: 960px;
margin-left: auto;
margin-right: auto;
background-image: linear-gradient(to right, transparent 10%, rgba(255, 0, 0, 0.25) 10%, rgba(255, 77, 77, 0.25) 90%, transparent 90%);
background-size: 8.33333%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
}
.wrap .carousel:after {
content: " ";
display: block;
clear: both;
}
.wrap .one-unit {
width: 6.66667%;
float: left;
margin-left: 0.83333%;
margin-right: 0.83333%;
}
}
@media (min-width: 1120px) {
.wrap .grid {
background-image: linear-gradient(to right, transparent 10%, rgba(255, 0, 0, 0.25) 10%, rgba(255, 77, 77, 0.25) 90%, transparent 90%);
background-size: 7.14286%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
max-width: 1120px;
margin-left: auto;
margin-right: auto;
background-image: linear-gradient(to right, transparent 10%, rgba(255, 0, 0, 0.25) 10%, rgba(255, 77, 77, 0.25) 90%, transparent 90%);
background-size: 7.14286%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
}
.wrap .grid:after {
content: " ";
display: block;
clear: both;
}
.wrap .carousel {
max-width: 1120px;
margin-left: auto;
margin-right: auto;
background-image: linear-gradient(to right, transparent 10%, rgba(255, 0, 0, 0.25) 10%, rgba(255, 77, 77, 0.25) 90%, transparent 90%);
background-size: 7.14286%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
}
.wrap .carousel:after {
content: " ";
display: block;
clear: both;
}
.wrap .content {
width: 70%;
float: left;
margin-left: 0.71429%;
margin-right: 0.71429%;
}
.wrap .sidebar {
width: 27.14286%;
float: left;
margin-left: 0.71429%;
margin-right: 0.71429%;
}
.wrap .one-unit {
width: 5.71429%;
float: left;
margin-left: 0.71429%;
margin-right: 0.71429%;
}
}
Raw
SassMeister-rendered.html
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<head>
<title>Responsive Grid Tests</title>
</head>
<body>
<div class="wrap">
<div class="full-bleed">
<div class="carousel">Carousel</div>
</div>
<div class="grid">
<main class="content"><h2>Content</h2></main>
<aside class="sidebar"><h2>Sidebar</h2></aside>
<div class="one-unit">1 Unit</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment