Skip to content

Instantly share code, notes, and snippets.

@deponeWD

deponeWD/SassMeister-input-HTML.html

Created October 16, 2014 14:42
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/6c4bdb083c62296f54b3 to your computer and use it in GitHub Desktop.
Save deponeWD/6c4bdb083c62296f54b3 to your computer and use it in GitHub Desktop.
Download ZIP
Grid Example with Neat. (Generated by SassMeister.com)
Raw
SassMeister-input-HTML.html
<!DOCTYPE html>
<html>
<head>
<title>Grid Example &ndash; Bourbon Neat</title>
<meta charset="UTF-8">
<meta content="grid bourbon neat depone" 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; Neat</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://neat.bourbon.io" title="Link to the Neat-Website">Neat</a>.</p>
</footer>
</section>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.5)
// Compass (v1.0.1)
// Bourbon (v4.0.2)
// Neat (v1.6.0)
// ----
/* Neat Example */
/* Colors */
$standard: #575757;
$orange: #f7996c;
$green: #9acf8b;
$blue: #4bc7e7;
$white: #fff;
$lightgrey: #e9e9e9;
/* Neat */
@import "bourbon/bourbon";
@import "neat/neat";
$max-width: 940px;
/* Breakpoints */
$m: new-breakpoint(min-width 414px 10);
$l: new-breakpoint(min-width 668px 10);
body {
color: $standard;
font-family: Helvetiva, sans-serif;
line-height: 130%;
}
section#page {
@include outer-container;
padding-top: 2%;
overflow: hidden;
}
section#content {
@include row();
}
.project {
@include row();
}
.projects {
@include row();
}
div[class^="container-"], div[class*=" container-"] {
min-height: $gutter * 8;
margin-bottom: flex-gutter();
}
.container-a {
background-color: $orange;
display: block;
@include media($m) {
@include span-columns(10);
}
@include media($l) {
@include span-columns(6);
}
}
.container-b {
background-color: $green;
display: block;
@include media($m) {
@include span-columns(10);
}
@include media($l) {
@include span-columns(4);
@include omega;
}
}
.container-c {
background-color: $blue;
display: block;
@include media($m) {
@include span-columns(6 of 12);
@include omega(2n);
}
@include media($l) {
@include span-columns(4 of 12);
&:nth-child(2n) { // have a look at that omega reset: https://github.com/thoughtbot/neat/issues/107
clear: none;
margin-right: flex-gutter();
}
&:nth-child(2n+1) {
clear: none;
}
&:nth-child(3n) {
@include omega();
}
}
}
.container-*:last-child {
@include omega;
}
a,
a:visited {
border-bottom: 1px solid;
color: $standard;
text-decoration: none;
&:hover,
&:focus {
background-color: $lightgrey;
}
}
img {
height: auto;
width: 100%;
}
pre {
overflow-x: scroll;
}
Raw
SassMeister-output.css
/* Neat Example */
/* Colors */
/* Neat */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Breakpoints */
body {
color: #575757;
font-family: Helvetiva, sans-serif;
line-height: 130%;
}
section#page {
max-width: 940px;
margin-left: auto;
margin-right: auto;
padding-top: 2%;
overflow: hidden;
}
section#page:after {
content: "";
display: table;
clear: both;
}
section#content {
display: block;
}
section#content:after {
content: "";
display: table;
clear: both;
}
.project {
display: block;
}
.project:after {
content: "";
display: table;
clear: both;
}
.projects {
display: block;
}
.projects:after {
content: "";
display: table;
clear: both;
}
div[class^="container-"], div[class*=" container-"] {
min-height: 12.944em;
margin-bottom: 2.3576515979%;
}
.container-a {
background-color: #f7996c;
display: block;
}
@media screen and (min-width: 414px) {
.container-a {
float: left;
display: block;
margin-right: 2.8425855704%;
width: 100%;
}
.container-a:last-child {
margin-right: 0;
}
}
@media screen and (min-width: 668px) {
.container-a {
float: left;
display: block;
margin-right: 2.8425855704%;
width: 58.8629657719%;
}
.container-a:last-child {
margin-right: 0;
}
}
.container-b {
background-color: #9acf8b;
display: block;
}
@media screen and (min-width: 414px) {
.container-b {
float: left;
display: block;
margin-right: 2.8425855704%;
width: 100%;
}
.container-b:last-child {
margin-right: 0;
}
}
@media screen and (min-width: 668px) {
.container-b {
float: left;
display: block;
margin-right: 2.8425855704%;
width: 38.2944486578%;
margin-right: 0;
}
.container-b:last-child {
margin-right: 0;
}
}
.container-c {
background-color: #4bc7e7;
display: block;
}
@media screen and (min-width: 414px) {
.container-c {
float: left;
display: block;
margin-right: 2.3576515979%;
width: 48.821174201%;
}
.container-c:last-child {
margin-right: 0;
}
.container-c:nth-child(2n) {
margin-right: 0;
}
.container-c:nth-child(2n+1) {
clear: left;
}
}
@media screen and (min-width: 668px) {
.container-c {
float: left;
display: block;
margin-right: 2.3576515979%;
width: 31.7615656014%;
}
.container-c:last-child {
margin-right: 0;
}
.container-c:nth-child(2n) {
clear: none;
margin-right: 2.3576515979%;
}
.container-c:nth-child(2n+1) {
clear: none;
}
.container-c:nth-child(3n) {
margin-right: 0;
}
}
.container-*:last-child {
margin-right: 0;
}
a,
a:visited {
border-bottom: 1px 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; Bourbon Neat</title>
<meta charset="UTF-8">
<meta content="grid bourbon neat depone" 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; Neat</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://neat.bourbon.io" title="Link to the Neat-Website">Neat</a>.</p>
</footer>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment