Skip to content

Instantly share code, notes, and snippets.

@sbrack8t

sbrack8t/SassMeister-input-HTML.html

Created April 2, 2014 13:35
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/9934244 to your computer and use it in GitHub Desktop.
Save sbrack8t/9934244 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<body>
<header>
<div class="branding">Branding</div>
<div class="nav">Navigation</div>
</header>
<div class="wrapper">
<article>
<header>Page Title</header>
<section class="main-content">
Main Content
<article class="entry">
<header class="entry__header">
<h3>Article Header</h3>
</header>
<div class="info">info block</div>
<div class="article__content">
Content
</div>
</article>
<article class="entry">
<header class="entry__header">
<h3>Article Header</h3>
</header>
<div class="info">info block</div>
<div class="article__content">
Content
</div>
</article>
<article class="entry gallery">
<div class="gall-layout">
<div>G-1</div>
<div>G-2</div>
<div>G-3</div>
<div>G-4</div>
</div>
</article>
</section>
<aside class="aside-content">
Sidebar
</aside>
</article>
</div>
</body>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v2.4.2)
// Susy (v2.1.1)
// ----
@import "compass";
@import "breakpoint";
@import "susy";
$bp-desktop: 62em;
// Visuals
body {
padding: 0;
margin: 0;
}
nav, header, article, footer, section, aside {
padding-top: 1em;
padding-bottom: 1em;
background: linear-gradient(rgba(orange,.125), rgba(orange,.125)), rgba(orange, .25);
background-clip: content-box, border-box;
box-shadow: inset 0 0 0 1px rgba(orange, .9);
}
@include border-box-sizing;
$susy: (
debug: (
image: show,
color: rgba(blue, .25),
toggle: top right,
),
);
$layout-small-4:(
container:auto,
columns: 4,
gutters: .25,
gutter-position: inside,
math: fluid,
);
.wrapper {
@include container(4 .1 show);
@include breakpoint($bp-desktop) {
@include container(90% (1 1 5 2 3) .25);
}
}
.main-content {
@include breakpoint($bp-desktop) {
@include span(3 at 1 of (1 1 5 2 3) nest){
.entry {
overflow:hidden;
margin-bottom: 1em;
// @include prefix(2 at 1);
}
.entry__header, .article__content {
@include span(1 at 3);
}
.info{
background: green;
text-align:right;
// @include pull(2 at 1);
@include span(2 at 1);
// @include pull(2 at 1);
}
.entry.gallery {
@include prefix(2 at 1);
}
.gall-layout {
@include container(4);
> div {
text-align: center;
@include gallery(2 of 4);
}
}
}
}
}
.entry {
background: red;
}
.aside-content {
@include breakpoint($bp-desktop) {
@include span(1 at 5 of (1 1 5 2 3));
@include pre(1 at 4 of (1 1 5 2 3));
}
}
Raw
SassMeister-output.css
body {
padding: 0;
margin: 0;
}
nav, header, article, footer, section, aside {
padding-top: 1em;
padding-bottom: 1em;
background: linear-gradient(rgba(255, 165, 0, 0.125), rgba(255, 165, 0, 0.125)), rgba(255, 165, 0, 0.25);
background-clip: content-box, border-box;
box-shadow: inset 0 0 0 1px rgba(255, 165, 0, 0.9);
}
*, *::before, *::after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
max-width: 100%;
margin-left: auto;
margin-right: auto;
background-image: -moz-linear-gradient(left, rgba(0, 0, 255, 0.25), rgba(77, 77, 255, 0.25) 90.90909%, rgba(0, 0, 0, 0) 90.90909%), -moz-linear-gradient(top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
background-image: -webkit-linear-gradient(left, rgba(0, 0, 255, 0.25), rgba(77, 77, 255, 0.25) 90.90909%, rgba(0, 0, 0, 0) 90.90909%), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
background-image: linear-gradient(to right, rgba(0, 0, 255, 0.25), rgba(77, 77, 255, 0.25) 90.90909%, rgba(0, 0, 0, 0) 90.90909%), linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
background-size: 25.5814%, 100% 24px;
background-origin: content-box, border-box;
background-clip: content-box, border-box;
background-position: left top;
}
.wrapper::after {
content: " ";
display: block;
clear: both;
}
@media (min-width: 62em) {
.wrapper {
max-width: 90%;
margin-left: auto;
margin-right: auto;
background-image: -moz-linear-gradient(left, rgba(0, 0, 255, 0.25), rgba(77, 77, 255, 0.25) 7.69231%, rgba(0, 0, 0, 0) 7.69231%, rgba(0, 0, 0, 0) 9.61538%, rgba(0, 0, 255, 0.25) 9.61538%, rgba(77, 77, 255, 0.25) 17.30769%, rgba(0, 0, 0, 0) 17.30769%, rgba(0, 0, 0, 0) 19.23077%, rgba(0, 0, 255, 0.25) 19.23077%, rgba(77, 77, 255, 0.25) 57.69231%, rgba(0, 0, 0, 0) 57.69231%, rgba(0, 0, 0, 0) 59.61538%, rgba(0, 0, 255, 0.25) 59.61538%, rgba(77, 77, 255, 0.25) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 76.92308%, rgba(0, 0, 255, 0.25) 76.92308%, rgba(77, 77, 255, 0.25)), -moz-linear-gradient(top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
background-image: -webkit-linear-gradient(left, rgba(0, 0, 255, 0.25), rgba(77, 77, 255, 0.25) 7.69231%, rgba(0, 0, 0, 0) 7.69231%, rgba(0, 0, 0, 0) 9.61538%, rgba(0, 0, 255, 0.25) 9.61538%, rgba(77, 77, 255, 0.25) 17.30769%, rgba(0, 0, 0, 0) 17.30769%, rgba(0, 0, 0, 0) 19.23077%, rgba(0, 0, 255, 0.25) 19.23077%, rgba(77, 77, 255, 0.25) 57.69231%, rgba(0, 0, 0, 0) 57.69231%, rgba(0, 0, 0, 0) 59.61538%, rgba(0, 0, 255, 0.25) 59.61538%, rgba(77, 77, 255, 0.25) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 76.92308%, rgba(0, 0, 255, 0.25) 76.92308%, rgba(77, 77, 255, 0.25)), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
background-image: linear-gradient(to right, rgba(0, 0, 255, 0.25), rgba(77, 77, 255, 0.25) 7.69231%, rgba(0, 0, 0, 0) 7.69231%, rgba(0, 0, 0, 0) 9.61538%, rgba(0, 0, 255, 0.25) 9.61538%, rgba(77, 77, 255, 0.25) 17.30769%, rgba(0, 0, 0, 0) 17.30769%, rgba(0, 0, 0, 0) 19.23077%, rgba(0, 0, 255, 0.25) 19.23077%, rgba(77, 77, 255, 0.25) 57.69231%, rgba(0, 0, 0, 0) 57.69231%, rgba(0, 0, 0, 0) 59.61538%, rgba(0, 0, 255, 0.25) 59.61538%, rgba(77, 77, 255, 0.25) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 76.92308%, rgba(0, 0, 255, 0.25) 76.92308%, rgba(77, 77, 255, 0.25)), linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
background-size: 100% 24px;
background-origin: content-box, border-box;
background-clip: content-box, border-box;
background-position: left top;
}
.wrapper::after {
content: " ";
display: block;
clear: both;
}
}
@media (min-width: 62em) {
.main-content {
width: 57.69231%;
float: left;
margin-right: 1.92308%;
}
.main-content .entry {
overflow: hidden;
margin-bottom: 1em;
}
.main-content .entry__header, .main-content .article__content {
width: 66.66667%;
float: right;
}
.main-content .info {
background: green;
text-align: right;
width: 30%;
float: left;
margin-right: 3.33333%;
}
.main-content .entry.gallery {
padding-left: 33.33333%;
}
.main-content .gall-layout {
max-width: 100%;
margin-left: auto;
margin-right: auto;
background-image: -moz-linear-gradient(left, rgba(0, 0, 255, 0.25), rgba(77, 77, 255, 0.25) 80%, rgba(0, 0, 0, 0) 80%), -moz-linear-gradient(top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
background-image: -webkit-linear-gradient(left, rgba(0, 0, 255, 0.25), rgba(77, 77, 255, 0.25) 80%, rgba(0, 0, 0, 0) 80%), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
background-image: linear-gradient(to right, rgba(0, 0, 255, 0.25), rgba(77, 77, 255, 0.25) 80%, rgba(0, 0, 0, 0) 80%), linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
background-size: 26.31579%, 100% 24px;
background-origin: content-box, border-box;
background-clip: content-box, border-box;
background-position: left top;
}
.main-content .gall-layout::after {
content: " ";
display: block;
clear: both;
}
.main-content .gall-layout > div {
text-align: center;
width: 47.36842%;
float: left;
}
.main-content .gall-layout > div:nth-child(2n + 1) {
margin-left: 0;
margin-right: -100%;
clear: both;
margin-left: 0;
}
.main-content .gall-layout > div:nth-child(2n + 2) {
margin-left: 52.63158%;
margin-right: -100%;
clear: none;
}
}
.entry {
background: red;
}
@media (min-width: 62em) {
.aside-content {
width: 23.07692%;
float: right;
margin-left: 17.30769%;
}
}
Raw
SassMeister-rendered.html
<body>
<header>
<div class="branding">Branding</div>
<div class="nav">Navigation</div>
</header>
<div class="wrapper">
<article>
<header>Page Title</header>
<section class="main-content">
Main Content
<article class="entry">
<header class="entry__header">
<h3>Article Header</h3>
</header>
<div class="info">info block</div>
<div class="article__content">
Content
</div>
</article>
<article class="entry">
<header class="entry__header">
<h3>Article Header</h3>
</header>
<div class="info">info block</div>
<div class="article__content">
Content
</div>
</article>
<article class="entry gallery">
<div class="gall-layout">
<div>G-1</div>
<div>G-2</div>
<div>G-3</div>
<div>G-4</div>
</div>
</article>
</section>
<aside class="aside-content">
Sidebar
</aside>
</article>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment