Skip to content

Instantly share code, notes, and snippets.

@tonyfinlay

tonyfinlay/SassMeister-input-HTML.html

Last active September 8, 2015 15:09
Show Gist options
  • Save tonyfinlay/d1e8f457486d9fbefe2c to your computer and use it in GitHub Desktop.
Save tonyfinlay/d1e8f457486d9fbefe2c to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<div class="main">
<div class="inner">
<div class="col">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
<div class="col">Col 5</div>
<div class="col">Col 6</div>
<div class="col">Col 7</div>
<div class="col">Col 8</div>
<div class="col">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
<div class="col">Col 5</div>
<div class="col">Col 6</div>
<div class="col">Col 7</div>
<div class="col">Col 8</div>
</div>
</div>
<div class="primary-sidebar">Sidebar</div>
<div class="secondary-sidebar">Sidebar</div>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// Breakpoint (v2.5.0)
// Singularity Extras (v1.0.0)
// ----
@import "breakpoint";
@import "singularitygs";
@import "singularity-extras";
$gutter-size: 5px;
$small: min-width 760px;
$medium: min-width 1000px;
$large: min-width 1200px;
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
div {
height: 100vh;
margin: 0;
padding: 0;
}
.inner{
position: relative;
@include add-grid(24);
@include grid-span(24, 1);
@include add-gutter($gutter-size);
}
.col{
@include grid-span(24, 1);
background:black;
background-clip:content-box;
padding-bottom: $gutter-size;
height: 25vh;
color: white;
@include breakpoint($small) {
background-color: purple;
&:nth-child(odd){@include grid-span(12, 1); clear: left;}
&:nth-child(even){@include grid-span(12, 13);}
}
@include breakpoint($medium) {
background-color: orange;
&:nth-child(3n+1){@include grid-span(8, 1); clear: left;}
&:nth-child(3n+2){@include grid-span(8, 9);}
&:nth-child(3n+3){@include grid-span(8, 17);}
}
@include breakpoint($large) {
background-color: aqua;
&:nth-child(4n+1){@include grid-span(6, 1); clear: left; margin-left: 0;}
&:nth-child(4n+2){@include grid-span(6, 7);}
&:nth-child(4n+3){@include grid-span(6, 13);}
&:nth-child(4n+4){@include grid-span(6, 19);}
}
}
@include add-grid(200px 1 150px);
@include add-gutter(10px);
@include sgs-change('output', 'calc');
.main {
@include grid-span(1, 2);
background: red;
}
.primary-sidebar {
background: green;
@include grid-span(1, 1);
}
.secondary-sidebar {
background: green;
@include grid-span(1, 3);
}
Raw
SassMeister-output.css
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
div {
height: 100vh;
margin: 0;
padding: 0;
}
.inner {
position: relative;
width: 100%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
}
.col {
width: 100%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
padding-right: 0;
background: black;
background-clip: content-box;
padding-bottom: 5px;
height: 25vh;
color: white;
}
@media (min-width: 760px) {
.col {
background-color: purple;
}
.col:nth-child(odd) {
width: 50%;
float: left;
margin-right: -100%;
clear: none;
padding-right: 5px;
clear: left;
}
.col:nth-child(even) {
width: 50%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
padding-right: 0;
}
}
@media (min-width: 1000px) {
.col {
background-color: orange;
}
.col:nth-child(3n+1) {
width: 33.33333%;
float: left;
margin-right: -100%;
clear: none;
padding-right: 5px;
clear: left;
}
.col:nth-child(3n+2) {
width: 33.33333%;
float: left;
margin-right: -100%;
margin-left: 33.33333%;
clear: none;
padding-right: 5px;
}
.col:nth-child(3n+3) {
width: 33.33333%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
padding-right: 0;
}
}
@media (min-width: 1200px) {
.col {
background-color: aqua;
}
.col:nth-child(4n+1) {
width: 25%;
float: left;
margin-right: -100%;
clear: none;
padding-right: 5px;
clear: left;
margin-left: 0;
}
.col:nth-child(4n+2) {
width: 25%;
float: left;
margin-right: -100%;
margin-left: 25%;
clear: none;
padding-right: 5px;
}
.col:nth-child(4n+3) {
width: 25%;
float: left;
margin-right: -100%;
margin-left: 50%;
clear: none;
padding-right: 5px;
}
.col:nth-child(4n+4) {
width: 25%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
padding-right: 0;
}
}
.main {
width: -webkit-calc((((100% - (350px + 20px)) / (1))) * 1);
width: calc((((100% - (350px + 20px)) / (1))) * 1);
float: left;
margin-right: -100%;
margin-left: -webkit-calc((200px + 10px));
margin-left: calc((200px + 10px));
background: red;
}
.primary-sidebar {
background: green;
width: 200px;
float: left;
margin-right: -100%;
margin-left: 0;
}
.secondary-sidebar {
background: green;
width: 150px;
float: right;
margin-left: 0;
margin-right: 0;
}
Raw
SassMeister-rendered.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<div class="main">
<div class="inner">
<div class="col">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
<div class="col">Col 5</div>
<div class="col">Col 6</div>
<div class="col">Col 7</div>
<div class="col">Col 8</div>
<div class="col">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
<div class="col">Col 5</div>
<div class="col">Col 6</div>
<div class="col">Col 7</div>
<div class="col">Col 8</div>
</div>
</div>
<div class="primary-sidebar">Sidebar</div>
<div class="secondary-sidebar">Sidebar</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment