Skip to content

Instantly share code, notes, and snippets.

@sbrack8t

sbrack8t/SassMeister-input-HTML.html

Created May 12, 2015 18:15
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 sbrack8t/3826fbdf90eb3692c092 to your computer and use it in GitHub Desktop.
Save sbrack8t/3826fbdf90eb3692c092 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header role="banner">
This is the Header
</header>
<div class="page-wrapper block">
<main role="main">
<div class="hero one">
Hero One
</div>
<div class="hero two">
Hero Two
</div>
<div class="test-space">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>
</main>
<aside class="block" role="complementary">
Sidebar Cotent
</aside>
</div>
</body>
</html>
<div></div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.3)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// Susy (v2.1.3)
// ----
@import "breakpoint";
@import "susy";
$susy: (
columns: 4,
gutters: 1,
math: fluid,
output: float,
container: 98%,
global-sizing:border-box,
gutter-position: after,
use-custom: (
rem: true,
),
);
$med_layout: layout( 12 .5 after fluid );
$test_layout: layout( 7 0 fluid );
$bp-med: 1000px;
$bp-large: 1280px;
$bp-mega: 1400px;
html{
height:100%;
}
body{
margin: 0;
padding: 0;
height:100%;
}
header{
height: 70px;
background: #ccc;
}
.block {
height:100%;
}
.item {
height:50px;
background:rgba(green, .5);
}
[role="main"] {
background: #ededed;
}
[role="complementary"] {
background: #848484;
}
.page-wrapper{
@include container();
height:100%;
@include breakpoint($bp-med) {
@include layout($med_layout);
@include container(90%);
}
@include breakpoint($bp-large) {
@include container(80%);
}
@include breakpoint($bp-mega) {
@include container(75%);
}
}
.test-space {
@include full;
}
@include breakpoint($bp-large){
main {
color:green;
@include span(7 of $med_layout);
height:100%;
}
.hero.one {
@include span(3 of 7);
background: orange;
}
.hero.two {
@include span(4 of 7 last);
background: orange;
}
[role="complementary"] {
color:green;
@include span(5 of $med_layout last);
}
.item {
@include span(1 of $test_layout)
}
}
Raw
SassMeister-output.css
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
header {
height: 70px;
background: #ccc;
}
.block {
height: 100%;
}
.item {
height: 50px;
background: rgba(0, 128, 0, 0.5);
}
[role="main"] {
background: #ededed;
}
[role="complementary"] {
background: #848484;
}
.page-wrapper {
max-width: 98%;
margin-left: auto;
margin-right: auto;
height: 100%;
}
.page-wrapper:after {
content: " ";
display: block;
clear: both;
}
@media (min-width: 1000px) {
.page-wrapper {
max-width: 90%;
margin-left: auto;
margin-right: auto;
}
.page-wrapper:after {
content: " ";
display: block;
clear: both;
}
}
@media (min-width: 1280px) {
.page-wrapper {
max-width: 80%;
margin-left: auto;
margin-right: auto;
}
.page-wrapper:after {
content: " ";
display: block;
clear: both;
}
}
@media (min-width: 1400px) {
.page-wrapper {
max-width: 75%;
margin-left: auto;
margin-right: auto;
}
.page-wrapper:after {
content: " ";
display: block;
clear: both;
}
}
.test-space {
clear: both;
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
}
@media (min-width: 1280px) {
main {
color: green;
width: 57.14286%;
float: left;
margin-right: 2.85714%;
height: 100%;
}
.hero.one {
width: 40%;
float: left;
margin-right: 5%;
background: orange;
}
.hero.two {
width: 55.0%;
float: right;
margin-right: 0;
background: orange;
}
[role="complementary"] {
color: green;
width: 40%;
float: right;
margin-right: 0;
}
.item {
width: 14.28571%;
float: left;
}
}
Raw
SassMeister-rendered.html
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header role="banner">
This is the Header
</header>
<div class="page-wrapper block">
<main role="main">
<div class="hero one">
Hero One
</div>
<div class="hero two">
Hero Two
</div>
<div class="test-space">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>
</main>
<aside class="block" role="complementary">
Sidebar Cotent
</aside>
</div>
</body>
</html>
<div></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment