Skip to content

Instantly share code, notes, and snippets.

@deponeWD

deponeWD/SassMeister-input-HTML.html

Last active August 29, 2015 14:07
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 deponeWD/10122a38d31a16f07b42 to your computer and use it in GitHub Desktop.
Save deponeWD/10122a38d31a16f07b42 to your computer and use it in GitHub Desktop.
Download ZIP
Grid Example with Susy. (Generated by SassMeister.com)
Raw
SassMeister-input-HTML.html
<!DOCTYPE html>
<html>
<head>
<title>Grid Example &ndash; Susy</title>
<meta charset="UTF-8">
<meta content="grid susy depone sass" name="keywords" />
<meta content="Daniel Ehniss" name="author" />
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<section id="page">
<header>
<h1>Grid example &ndash; Susy</h1>
</header>
<section id="content">
<div class="project">
<div class="container-a">&nbsp;</div>
<div class="container-b">&nbsp;</div>
</div>
<div class="projects">
<div class="container-c">&nbsp;</div>
<div class="container-c">&nbsp;</div>
<div class="container-c">&nbsp;</div>
<div class="container-c">&nbsp;</div>
<div class="container-c">&nbsp;</div>
<div class="container-c">&nbsp;</div>
</div>
</section>
<footer>
<p>This Example is built with <a href="http://susy.oddbird.net" title="Link to the Susy-Website">Susy</a>.</p>
</footer>
</section>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// Susy (v2.1.3)
// ----
/* Susy Example */
/* Colors */
$standard: #575757;
$orange: #f7996c;
$green: #9acf8b;
$blue: #4bc7e7;
$white: #fff;
$lightgrey: #e9e9e9;
/* Susy */
@import "susy";
$ten: (
container: auto,
columns: 10,
gutters: .199, // achieve the same gutter as the other layout
);
$twelve: (
container: auto,
columns: 12,
gutters: .25,
);
$main-font-size: 16;
/* Breakpoints */
$view-variants: (
s: 320,
m: 441,
l: 668
);
@mixin breakpoint($view-variant) {
$min-width: #{map-get($view-variants, $view-variant) / $main-font-size}rem;
@media (min-width: $min-width) { @content ; }
}
/*
** rem-Wert ausrechnen lassen
*/
@mixin px-rem($property, $value) {
#{$property}: #{$value / $main-font-size}rem;
}
@function calc-rem($target-px) {
@return ($target-px / $main-font-size) * 1rem;
}
/*
** Setting border-box
*/
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
color: $standard;
font: #{$main-font-size}px/1.3 Executive, Helvetica, Arial, sans-serif;
}
section#page {
@include container(calc-rem(940));
@include px-rem(padding-top,32);
overflow: hidden;
}
.project {
@include container;
}
.projects {
@include container;
}
div[class^="container-"], div[class*=" container-"] {
@include px-rem(height,200);
margin-bottom: gutter(12);
}
.container-a {
background-color: $orange;
display: block;
@include breakpoint(l) {
@include span(6 of $ten);
}
}
.container-b {
background-color: $green;
display: block;
@include breakpoint(l) {
@include span(last 4 of $ten);
}
}
.container-c {
background-color: $blue;
display: block;
@include breakpoint(m) {
@include span(6 of $twelve);
&:nth-child(2n) {
@include span(last 6 of $twelve); // define last element inline
}
}
@include breakpoint(l) {
@include span(4 of $twelve);
&:nth-child(2n) {
@include span(4 of $twelve); // override the definition of last
}
&:nth-child(3n) {
@include span(last 4 of $twelve);
}
}
}
a,
a:visited {
border-bottom: calc-rem(1) solid;
color: $standard;
text-decoration: none;
&:hover,
&:focus {
background-color: $lightgrey;
}
}
img {
height: auto;
width: 100%;
}
pre {
overflow-x: scroll;
}
Raw
SassMeister-output.css
/* Susy Example */
/* Colors */
/* Susy */
/* Breakpoints */
/*
** rem-Wert ausrechnen lassen
*/
/*
** Setting border-box
*/
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
color: #575757;
font: 16px/1.3 Executive, Helvetica, Arial, sans-serif;
}
section#page {
max-width: 58.75rem;
margin-left: auto;
margin-right: auto;
padding-top: 2rem;
overflow: hidden;
}
section#page:after {
content: " ";
display: block;
clear: both;
}
.project {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.project:after {
content: " ";
display: block;
clear: both;
}
.projects {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.projects:after {
content: " ";
display: block;
clear: both;
}
div[class^="container-"], div[class*=" container-"] {
height: 12.5rem;
margin-bottom: 1.69492%;
}
.container-a {
background-color: #f7996c;
display: block;
}
@media (min-width: 41.75rem) {
.container-a {
width: 59.32491%;
float: left;
margin-right: 1.68773%;
}
}
.container-b {
background-color: #9acf8b;
display: block;
}
@media (min-width: 41.75rem) {
.container-b {
width: 38.98736%;
float: right;
margin-right: 0;
}
}
.container-c {
background-color: #4bc7e7;
display: block;
}
@media (min-width: 27.5625rem) {
.container-c {
width: 49.15254%;
float: left;
margin-right: 1.69492%;
}
.container-c:nth-child(2n) {
width: 49.15254%;
float: right;
margin-right: 0;
}
}
@media (min-width: 41.75rem) {
.container-c {
width: 32.20339%;
float: left;
margin-right: 1.69492%;
}
.container-c:nth-child(2n) {
width: 32.20339%;
float: left;
margin-right: 1.69492%;
}
.container-c:nth-child(3n) {
width: 32.20339%;
float: right;
margin-right: 0;
}
}
a,
a:visited {
border-bottom: 0.0625rem solid;
color: #575757;
text-decoration: none;
}
a:hover, a:focus,
a:visited:hover,
a:visited:focus {
background-color: #e9e9e9;
}
img {
height: auto;
width: 100%;
}
pre {
overflow-x: scroll;
}
Raw
SassMeister-rendered.html
<!DOCTYPE html>
<html>
<head>
<title>Grid Example &ndash; Susy</title>
<meta charset="UTF-8">
<meta content="grid susy depone sass" name="keywords" />
<meta content="Daniel Ehniss" name="author" />
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<section id="page">
<header>
<h1>Grid example &ndash; Susy</h1>
</header>
<section id="content">
<div class="project">
<div class="container-a">&nbsp;</div>
<div class="container-b">&nbsp;</div>
</div>
<div class="projects">
<div class="container-c">&nbsp;</div>
<div class="container-c">&nbsp;</div>
<div class="container-c">&nbsp;</div>
<div class="container-c">&nbsp;</div>
<div class="container-c">&nbsp;</div>
<div class="container-c">&nbsp;</div>
</div>
</section>
<footer>
<p>This Example is built with <a href="http://susy.oddbird.net" title="Link to the Susy-Website">Susy</a>.</p>
</footer>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment