Skip to content

Instantly share code, notes, and snippets.

@lunas

lunas/SassMeister-input-HTML.html

Created February 27, 2014 13:40
Show Gist options
  • Save lunas/9250165 to your computer and use it in GitHub Desktop.
Save lunas/9250165 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<html>
<head>
</head>
<body>
<header>
<div class="row">
<div class="branding">
logo
</div>
<div class="menus">
<nav class="user">user menu</nav>
<nav class="main">main menu</nav>
</div>
</div>
</header>
<div class="banner">
<div class="headers">
<div class="header-first">header first</div>
<div class="header-second">header second</div>
</div>
</div>
<main>
<div class="title">Title</div>
<div class="messages">messages</div>
<div class="help">help</div>
<div class="content">
content content
</div>
</main>
<footer>
<div class="footer-first">
first footer
</div>
<div class="footer-second">
second footer
</div>
</footer>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.2.14)
// Compass (v0.12.2)
// Susy (v1.0.9)
// ----
@import "compass";
@import "compass/reset";
@import "susy";
$total-column: 12;
$columns-width: 4em;
$gutter-width: 1em;
$grid-patting: $gutter-width;
$container-style: magic;
header,
main,
footer{
@include container;
@include susy-grid-background;
border: 1px solid black;
}
.branding {
@include span-columns(4);
}
.menus {
@include span-columns(8 omega);
border: 1px solid green;
}
.row { @include container; }
.banner {
width: 100%;
background-color: rgba(44,98,132,1);
.headers {
@include container;
color: white;
div {
background-color: cyan;
}
.header-first { @include span-columns(6); }
.header-second { @include span-columns(6 omega); }
}
}
Raw
SassMeister-output.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block;
}
header,
main,
footer {
*zoom: 1;
max-width: 59em;
_width: 59em;
padding-left: 1em;
padding-right: 1em;
margin-left: auto;
margin-right: auto;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(0%, rgba(100, 100, 225, 0.25)), color-stop(6.7796610169%, rgba(100, 100, 225, 0.25)), color-stop(6.7796610169%, rgba(0, 0, 0, 0)), color-stop(8.4745762712%, rgba(0, 0, 0, 0)), color-stop(8.4745762712%, rgba(100, 100, 225, 0.25)), color-stop(15.2542372881%, rgba(100, 100, 225, 0.25)), color-stop(15.2542372881%, rgba(0, 0, 0, 0)), color-stop(16.9491525424%, rgba(0, 0, 0, 0)), color-stop(16.9491525424%, rgba(100, 100, 225, 0.25)), color-stop(23.7288135593%, rgba(100, 100, 225, 0.25)), color-stop(23.7288135593%, rgba(0, 0, 0, 0)), color-stop(25.4237288136%, rgba(0, 0, 0, 0)), color-stop(25.4237288136%, rgba(100, 100, 225, 0.25)), color-stop(32.2033898305%, rgba(100, 100, 225, 0.25)), color-stop(32.2033898305%, rgba(0, 0, 0, 0)), color-stop(33.8983050847%, rgba(0, 0, 0, 0)), color-stop(33.8983050847%, rgba(100, 100, 225, 0.25)), color-stop(40.6779661017%, rgba(100, 100, 225, 0.25)), color-stop(40.6779661017%, rgba(0, 0, 0, 0)), color-stop(42.3728813559%, rgba(0, 0, 0, 0)), color-stop(42.3728813559%, rgba(100, 100, 225, 0.25)), color-stop(49.1525423729%, rgba(100, 100, 225, 0.25)), color-stop(49.1525423729%, rgba(0, 0, 0, 0)), color-stop(50.8474576271%, rgba(0, 0, 0, 0)), color-stop(50.8474576271%, rgba(100, 100, 225, 0.25)), color-stop(57.6271186441%, rgba(100, 100, 225, 0.25)), color-stop(57.6271186441%, rgba(0, 0, 0, 0)), color-stop(59.3220338983%, rgba(0, 0, 0, 0)), color-stop(59.3220338983%, rgba(100, 100, 225, 0.25)), color-stop(66.1016949153%, rgba(100, 100, 225, 0.25)), color-stop(66.1016949153%, rgba(0, 0, 0, 0)), color-stop(67.7966101695%, rgba(0, 0, 0, 0)), color-stop(67.7966101695%, rgba(100, 100, 225, 0.25)), color-stop(74.5762711864%, rgba(100, 100, 225, 0.25)), color-stop(74.5762711864%, rgba(0, 0, 0, 0)), color-stop(76.2711864407%, rgba(0, 0, 0, 0)), color-stop(76.2711864407%, rgba(100, 100, 225, 0.25)), color-stop(83.0508474576%, rgba(100, 100, 225, 0.25)), color-stop(83.0508474576%, rgba(0, 0, 0, 0)), color-stop(84.7457627119%, rgba(0, 0, 0, 0)), color-stop(84.7457627119%, rgba(100, 100, 225, 0.25)), color-stop(91.5254237288%, rgba(100, 100, 225, 0.25)), color-stop(91.5254237288%, rgba(0, 0, 0, 0)), color-stop(93.2203389831%, rgba(0, 0, 0, 0)), color-stop(93.2203389831%, rgba(100, 100, 225, 0.25)), color-stop(100.0%, rgba(100, 100, 225, 0.25)), color-stop(100.0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(100, 100, 225, 0.25) 0%, rgba(100, 100, 225, 0.25) 6.7796610169%, rgba(0, 0, 0, 0) 6.7796610169%, rgba(0, 0, 0, 0) 8.4745762712%, rgba(100, 100, 225, 0.25) 8.4745762712%, rgba(100, 100, 225, 0.25) 15.2542372881%, rgba(0, 0, 0, 0) 15.2542372881%, rgba(0, 0, 0, 0) 16.9491525424%, rgba(100, 100, 225, 0.25) 16.9491525424%, rgba(100, 100, 225, 0.25) 23.7288135593%, rgba(0, 0, 0, 0) 23.7288135593%, rgba(0, 0, 0, 0) 25.4237288136%, rgba(100, 100, 225, 0.25) 25.4237288136%, rgba(100, 100, 225, 0.25) 32.2033898305%, rgba(0, 0, 0, 0) 32.2033898305%, rgba(0, 0, 0, 0) 33.8983050847%, rgba(100, 100, 225, 0.25) 33.8983050847%, rgba(100, 100, 225, 0.25) 40.6779661017%, rgba(0, 0, 0, 0) 40.6779661017%, rgba(0, 0, 0, 0) 42.3728813559%, rgba(100, 100, 225, 0.25) 42.3728813559%, rgba(100, 100, 225, 0.25) 49.1525423729%, rgba(0, 0, 0, 0) 49.1525423729%, rgba(0, 0, 0, 0) 50.8474576271%, rgba(100, 100, 225, 0.25) 50.8474576271%, rgba(100, 100, 225, 0.25) 57.6271186441%, rgba(0, 0, 0, 0) 57.6271186441%, rgba(0, 0, 0, 0) 59.3220338983%, rgba(100, 100, 225, 0.25) 59.3220338983%, rgba(100, 100, 225, 0.25) 66.1016949153%, rgba(0, 0, 0, 0) 66.1016949153%, rgba(0, 0, 0, 0) 67.7966101695%, rgba(100, 100, 225, 0.25) 67.7966101695%, rgba(100, 100, 225, 0.25) 74.5762711864%, rgba(0, 0, 0, 0) 74.5762711864%, rgba(0, 0, 0, 0) 76.2711864407%, rgba(100, 100, 225, 0.25) 76.2711864407%, rgba(100, 100, 225, 0.25) 83.0508474576%, rgba(0, 0, 0, 0) 83.0508474576%, rgba(0, 0, 0, 0) 84.7457627119%, rgba(100, 100, 225, 0.25) 84.7457627119%, rgba(100, 100, 225, 0.25) 91.5254237288%, rgba(0, 0, 0, 0) 91.5254237288%, rgba(0, 0, 0, 0) 93.2203389831%, rgba(100, 100, 225, 0.25) 93.2203389831%, rgba(100, 100, 225, 0.25) 100.0%, rgba(0, 0, 0, 0) 100.0%, rgba(0, 0, 0, 0) 100%);
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(100, 100, 225, 0.25) 0%, rgba(100, 100, 225, 0.25) 6.7796610169%, rgba(0, 0, 0, 0) 6.7796610169%, rgba(0, 0, 0, 0) 8.4745762712%, rgba(100, 100, 225, 0.25) 8.4745762712%, rgba(100, 100, 225, 0.25) 15.2542372881%, rgba(0, 0, 0, 0) 15.2542372881%, rgba(0, 0, 0, 0) 16.9491525424%, rgba(100, 100, 225, 0.25) 16.9491525424%, rgba(100, 100, 225, 0.25) 23.7288135593%, rgba(0, 0, 0, 0) 23.7288135593%, rgba(0, 0, 0, 0) 25.4237288136%, rgba(100, 100, 225, 0.25) 25.4237288136%, rgba(100, 100, 225, 0.25) 32.2033898305%, rgba(0, 0, 0, 0) 32.2033898305%, rgba(0, 0, 0, 0) 33.8983050847%, rgba(100, 100, 225, 0.25) 33.8983050847%, rgba(100, 100, 225, 0.25) 40.6779661017%, rgba(0, 0, 0, 0) 40.6779661017%, rgba(0, 0, 0, 0) 42.3728813559%, rgba(100, 100, 225, 0.25) 42.3728813559%, rgba(100, 100, 225, 0.25) 49.1525423729%, rgba(0, 0, 0, 0) 49.1525423729%, rgba(0, 0, 0, 0) 50.8474576271%, rgba(100, 100, 225, 0.25) 50.8474576271%, rgba(100, 100, 225, 0.25) 57.6271186441%, rgba(0, 0, 0, 0) 57.6271186441%, rgba(0, 0, 0, 0) 59.3220338983%, rgba(100, 100, 225, 0.25) 59.3220338983%, rgba(100, 100, 225, 0.25) 66.1016949153%, rgba(0, 0, 0, 0) 66.1016949153%, rgba(0, 0, 0, 0) 67.7966101695%, rgba(100, 100, 225, 0.25) 67.7966101695%, rgba(100, 100, 225, 0.25) 74.5762711864%, rgba(0, 0, 0, 0) 74.5762711864%, rgba(0, 0, 0, 0) 76.2711864407%, rgba(100, 100, 225, 0.25) 76.2711864407%, rgba(100, 100, 225, 0.25) 83.0508474576%, rgba(0, 0, 0, 0) 83.0508474576%, rgba(0, 0, 0, 0) 84.7457627119%, rgba(100, 100, 225, 0.25) 84.7457627119%, rgba(100, 100, 225, 0.25) 91.5254237288%, rgba(0, 0, 0, 0) 91.5254237288%, rgba(0, 0, 0, 0) 93.2203389831%, rgba(100, 100, 225, 0.25) 93.2203389831%, rgba(100, 100, 225, 0.25) 100.0%, rgba(0, 0, 0, 0) 100.0%, rgba(0, 0, 0, 0) 100%);
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(100, 100, 225, 0.25) 0%, rgba(100, 100, 225, 0.25) 6.7796610169%, rgba(0, 0, 0, 0) 6.7796610169%, rgba(0, 0, 0, 0) 8.4745762712%, rgba(100, 100, 225, 0.25) 8.4745762712%, rgba(100, 100, 225, 0.25) 15.2542372881%, rgba(0, 0, 0, 0) 15.2542372881%, rgba(0, 0, 0, 0) 16.9491525424%, rgba(100, 100, 225, 0.25) 16.9491525424%, rgba(100, 100, 225, 0.25) 23.7288135593%, rgba(0, 0, 0, 0) 23.7288135593%, rgba(0, 0, 0, 0) 25.4237288136%, rgba(100, 100, 225, 0.25) 25.4237288136%, rgba(100, 100, 225, 0.25) 32.2033898305%, rgba(0, 0, 0, 0) 32.2033898305%, rgba(0, 0, 0, 0) 33.8983050847%, rgba(100, 100, 225, 0.25) 33.8983050847%, rgba(100, 100, 225, 0.25) 40.6779661017%, rgba(0, 0, 0, 0) 40.6779661017%, rgba(0, 0, 0, 0) 42.3728813559%, rgba(100, 100, 225, 0.25) 42.3728813559%, rgba(100, 100, 225, 0.25) 49.1525423729%, rgba(0, 0, 0, 0) 49.1525423729%, rgba(0, 0, 0, 0) 50.8474576271%, rgba(100, 100, 225, 0.25) 50.8474576271%, rgba(100, 100, 225, 0.25) 57.6271186441%, rgba(0, 0, 0, 0) 57.6271186441%, rgba(0, 0, 0, 0) 59.3220338983%, rgba(100, 100, 225, 0.25) 59.3220338983%, rgba(100, 100, 225, 0.25) 66.1016949153%, rgba(0, 0, 0, 0) 66.1016949153%, rgba(0, 0, 0, 0) 67.7966101695%, rgba(100, 100, 225, 0.25) 67.7966101695%, rgba(100, 100, 225, 0.25) 74.5762711864%, rgba(0, 0, 0, 0) 74.5762711864%, rgba(0, 0, 0, 0) 76.2711864407%, rgba(100, 100, 225, 0.25) 76.2711864407%, rgba(100, 100, 225, 0.25) 83.0508474576%, rgba(0, 0, 0, 0) 83.0508474576%, rgba(0, 0, 0, 0) 84.7457627119%, rgba(100, 100, 225, 0.25) 84.7457627119%, rgba(100, 100, 225, 0.25) 91.5254237288%, rgba(0, 0, 0, 0) 91.5254237288%, rgba(0, 0, 0, 0) 93.2203389831%, rgba(100, 100, 225, 0.25) 93.2203389831%, rgba(100, 100, 225, 0.25) 100.0%, rgba(0, 0, 0, 0) 100.0%, rgba(0, 0, 0, 0) 100%);
background-image: linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(100, 100, 225, 0.25) 0%, rgba(100, 100, 225, 0.25) 6.7796610169%, rgba(0, 0, 0, 0) 6.7796610169%, rgba(0, 0, 0, 0) 8.4745762712%, rgba(100, 100, 225, 0.25) 8.4745762712%, rgba(100, 100, 225, 0.25) 15.2542372881%, rgba(0, 0, 0, 0) 15.2542372881%, rgba(0, 0, 0, 0) 16.9491525424%, rgba(100, 100, 225, 0.25) 16.9491525424%, rgba(100, 100, 225, 0.25) 23.7288135593%, rgba(0, 0, 0, 0) 23.7288135593%, rgba(0, 0, 0, 0) 25.4237288136%, rgba(100, 100, 225, 0.25) 25.4237288136%, rgba(100, 100, 225, 0.25) 32.2033898305%, rgba(0, 0, 0, 0) 32.2033898305%, rgba(0, 0, 0, 0) 33.8983050847%, rgba(100, 100, 225, 0.25) 33.8983050847%, rgba(100, 100, 225, 0.25) 40.6779661017%, rgba(0, 0, 0, 0) 40.6779661017%, rgba(0, 0, 0, 0) 42.3728813559%, rgba(100, 100, 225, 0.25) 42.3728813559%, rgba(100, 100, 225, 0.25) 49.1525423729%, rgba(0, 0, 0, 0) 49.1525423729%, rgba(0, 0, 0, 0) 50.8474576271%, rgba(100, 100, 225, 0.25) 50.8474576271%, rgba(100, 100, 225, 0.25) 57.6271186441%, rgba(0, 0, 0, 0) 57.6271186441%, rgba(0, 0, 0, 0) 59.3220338983%, rgba(100, 100, 225, 0.25) 59.3220338983%, rgba(100, 100, 225, 0.25) 66.1016949153%, rgba(0, 0, 0, 0) 66.1016949153%, rgba(0, 0, 0, 0) 67.7966101695%, rgba(100, 100, 225, 0.25) 67.7966101695%, rgba(100, 100, 225, 0.25) 74.5762711864%, rgba(0, 0, 0, 0) 74.5762711864%, rgba(0, 0, 0, 0) 76.2711864407%, rgba(100, 100, 225, 0.25) 76.2711864407%, rgba(100, 100, 225, 0.25) 83.0508474576%, rgba(0, 0, 0, 0) 83.0508474576%, rgba(0, 0, 0, 0) 84.7457627119%, rgba(100, 100, 225, 0.25) 84.7457627119%, rgba(100, 100, 225, 0.25) 91.5254237288%, rgba(0, 0, 0, 0) 91.5254237288%, rgba(0, 0, 0, 0) 93.2203389831%, rgba(100, 100, 225, 0.25) 93.2203389831%, rgba(100, 100, 225, 0.25) 100.0%, rgba(0, 0, 0, 0) 100.0%, rgba(0, 0, 0, 0) 100%);
background-position: left top;
-webkit-background-origin: content;
-moz-background-origin: content;
-ms-background-origin: content-box;
-o-background-origin: content-box;
background-origin: content-box;
-webkit-background-clip: content-box;
-moz-background-clip: content-box;
background-clip: content-box;
border: 1px solid black;
}
header:after,
main:after,
footer:after {
content: "";
display: table;
clear: both;
}
.branding {
width: 32.2033898305%;
float: left;
margin-right: 1.6949152542%;
display: inline;
}
.menus {
width: 66.1016949153%;
float: right;
margin-right: 0;
*margin-left: -1em;
display: inline;
border: 1px solid green;
}
.row {
*zoom: 1;
max-width: 59em;
_width: 59em;
padding-left: 1em;
padding-right: 1em;
margin-left: auto;
margin-right: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
.banner {
width: 100%;
background-color: #2c6284;
}
.banner .headers {
*zoom: 1;
max-width: 59em;
_width: 59em;
padding-left: 1em;
padding-right: 1em;
margin-left: auto;
margin-right: auto;
color: white;
}
.banner .headers:after {
content: "";
display: table;
clear: both;
}
.banner .headers div {
background-color: cyan;
}
.banner .headers .header-first {
width: 49.1525423729%;
float: left;
margin-right: 1.6949152542%;
display: inline;
}
.banner .headers .header-second {
width: 49.1525423729%;
float: right;
margin-right: 0;
*margin-left: -1em;
display: inline;
}
Raw
SassMeister-rendered.html
<html>
<head>
</head>
<body>
<header>
<div class="row">
<div class="branding">
logo
</div>
<div class="menus">
<nav class="user">user menu</nav>
<nav class="main">main menu</nav>
</div>
</div>
</header>
<div class="banner">
<div class="headers">
<div class="header-first">header first</div>
<div class="header-second">header second</div>
</div>
</div>
<main>
<div class="title">Title</div>
<div class="messages">messages</div>
<div class="help">help</div>
<div class="content">
content content
</div>
</main>
<footer>
<div class="footer-first">
first footer
</div>
<div class="footer-second">
second footer
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment