Skip to content

Instantly share code, notes, and snippets.

@fafaradesigns

fafaradesigns/SassMeister-input-HTML.html

Last active August 29, 2015 14:09
Show Gist options
  • Save fafaradesigns/c35e0a39a5d2ac8a90ac to your computer and use it in GitHub Desktop.
Save fafaradesigns/c35e0a39a5d2ac8a90ac to your computer and use it in GitHub Desktop.
Download ZIP
susy layouts - em to percent
Raw
SassMeister-input-HTML.html
<body>
<header>header</header>
<nav>navigation</nav>
<article>article</article>
<footer>footer</footer>
</body>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// Susy (v2.1.3)
// ----
@import "breakpoint";
@import "susy";
//visuals
//-------------------
$pink: rgb(255, 0, 128);
html {
background: white;
}
header, nav, article, footer {
padding-top: 1em;
padding-bottom: 1em;
font-family: monospace, serif;
background:
linear-gradient(rgba($pink, .125), rgba($pink, .125), rgba($pink, .25));
background-clip: content-box, border-box;
box-shadow: 0 0 0 1px rgba($pink, .25) inset;
}
$susy: (
flow: ltr,
math: fluid,
output: float,
gutter-position: inside,
container: auto,
container-position: center,
columns: 12,
gutters: .25,
column-width: 4em,
global-box-sizing: border-box,
last-flow: to,
debug: (
image: hide,
color: rgba($pink, .25),
output: background,
toggle: top right,
),
use-custom: (
background-image: true,
background-options: false,
box-sizing: true,
clearfix: false,
rem: true,
)
);
@include border-box-sizing;
body {
@include container(show);
}
header {
//@include span(25em);
@include span(25%);
}
nav {
@include span(first 3);
}
article {
@include span(last 2);
}
footer {
@include full;
}
Raw
SassMeister-output.css
html {
background: white;
}
header, nav, article, footer {
padding-top: 1em;
padding-bottom: 1em;
font-family: monospace, serif;
background: linear-gradient(rgba(255, 0, 128, 0.125), rgba(255, 0, 128, 0.125), rgba(255, 0, 128, 0.25));
background-clip: content-box, border-box;
box-shadow: 0 0 0 1px rgba(255, 0, 128, 0.25) inset;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
max-width: 60em;
margin-left: auto;
margin-right: auto;
background-image: linear-gradient(to right, rgba(255, 0, 128, 0.25), rgba(255, 77, 166, 0.25));
background-size: 8.3333333333%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
}
body:after {
content: " ";
display: block;
clear: both;
}
header {
width: 25%;
float: left;
padding-left: 0.8333333333%;
padding-right: 0.8333333333%;
}
nav {
width: 25%;
float: left;
padding-left: 0.8333333333%;
padding-right: 0.8333333333%;
}
article {
width: 16.6666666667%;
float: right;
padding-left: 0.8333333333%;
padding-right: 0.8333333333%;
}
footer {
clear: both;
width: 100%;
float: left;
padding-left: 0.8333333333%;
padding-right: 0.8333333333%;
}
Raw
SassMeister-rendered.html
<body>
<header>header</header>
<nav>navigation</nav>
<article>article</article>
<footer>footer</footer>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment