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/81b62926d96646e12411 to your computer and use it in GitHub Desktop.
Save fafaradesigns/81b62926d96646e12411 to your computer and use it in GitHub Desktop.
Download ZIP
susy layout shorthand - 960 Grid System
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 "compass";
@import "breakpoint";
@import "susy";
@include layout(12 (60px 10px) split static);
body {
@include container(show);
}
Raw
SassMeister-output.css
body {
width: 840px;
margin-left: auto;
margin-right: auto;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI3LjE0Mjg2JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjcuMTQyODYlIiBzdG9wLWNvbG9yPSIjNjY2NmZmIiBzdG9wLW9wYWNpdHk9IjAuMjUiLz48c3RvcCBvZmZzZXQ9IjkyLjg1NzE0JSIgc3RvcC1jb2xvcj0iI2IzYjNmZiIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+PHN0b3Agb2Zmc2V0PSI5Mi44NTcxNCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(7.14286%, rgba(0, 0, 0, 0)), color-stop(7.14286%, rgba(102, 102, 255, 0.25)), color-stop(92.85714%, rgba(179, 179, 255, 0.25)), color-stop(92.85714%, rgba(0, 0, 0, 0))), -webkit-gradient(linear, 50% 0%, 50% 1, color-stop(100%, rgba(0, 0, 0, 0.5)), color-stop(100%, rgba(0, 0, 0, 0)));
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 7.14286%, rgba(102, 102, 255, 0.25) 7.14286%, rgba(179, 179, 255, 0.25) 92.85714%, rgba(0, 0, 0, 0) 92.85714%), -moz-linear-gradient(top, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0) 1px);
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 7.14286%, rgba(102, 102, 255, 0.25) 7.14286%, rgba(179, 179, 255, 0.25) 92.85714%, rgba(0, 0, 0, 0) 92.85714%), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0) 1px);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 7.14286%, rgba(102, 102, 255, 0.25) 7.14286%, rgba(179, 179, 255, 0.25) 92.85714%, rgba(0, 0, 0, 0) 92.85714%), linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 1px, rgba(0, 0, 0, 0) 1px);
background-size: 70px, 100% 24px;
background-origin: content-box, border-box;
background-clip: content-box, border-box;
background-position: left top;
}
body:after {
content: " ";
display: block;
clear: both;
}
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