Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<div class="page">
<header>
<h1>Hello I'm The Header</h1>
</header>
<div class="hero">
<div class="one">
<h2>I'm by myself</h2>
</div>
<div class="two">
<div><h3>I'm 1</h3></div>
<div><h3>I'm 2</h3></div>
<div><h3>I'm 3</h3></div>
<div><h3>I'm 4</h3></div>
</div>
</div>
<div class="authors-stories-view">
<div class="cols view-story-image"><h2>I'm 1</h2></div>
<div class="cols view-story-content"><h2>I'm 2</h2></div>
</div>
</div>
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// Susy (v2.1.3)
// ----
@import "susy";
$susy: (
flow: ltr, // ltr | rtl
output: float, // float | isolate
math: fluid, // fluid | static (requires column-width)
column-width: 40px, // false | value
container: auto, // length or % | auto
container-position: center, // left | center | right | <length> [*2] (grid padding)
last-flow: to,
columns: 12,
gutters: 1,
gutter-position: after, // before | after | split | inside | inside-static (requires column-width)
global-box-sizing: content-box, // content-box | border-box (affects inside/inside-static)
debug: (
image: hide,
color: rgba(#66f, .25),
output: background, // background | overlay
toggle: top right,
),
use-custom: (
background-image: true, // look for background-image mixin
background-options: false, // look for background-size, -origin and -clip and other compass/bourbon mixins
box-sizing: true, // look for custom bix sizing mixin
clearfix: false, // true = look for internal clearfix before using micro clearfix
rem: true, // look for rem mixin
)
);
body {
font-family: helvetica;
}
header {
height: 150px;
background: #2F94B2;
margin-bottom: 10px;
h1 {
margin: 10px;
}
}
.hero {
height: 100px;
margin-bottom: 10px;
h3, h2 {
margin: 10px;
}
.one {
background: #FF739C;
height: 100%;
}
.two {
height: 100%;
div {
height: 100%;
background: #CCC136;
}
}
}
.content {
h3 {
margin: 10px;
}
div {
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
}
div:nth-child(3n),
.cols {
background: #2F94B2;
}
div:nth-child(3n+1) {
background: #FF7311;
}
div:nth-child(3n+2) {
background: #5DD9FF;
}
}
//// GRID
.page {
@include container;
}
header {
@include full;
}
.hero {
clear: both;
.one {
@include span(first 4);
}
.two {
@include span(last 8 nest);
div:nth-child(4n+1) {
clear: both;
@include span(2 at 1 of 8);
}
div:nth-child(4n+2) {
@include span(2 at 3 of 8);
}
div:nth-child(4n+3) {
@include span(2 at 5 of 8);
}
div:nth-child(4n) {
@include span(last 2 of 8);
}
div:nth-child(4) {
@include span(last 2 of 8);
}
}
}
.content {
div {
@include gallery(4);
}
}
.cols {
background: #2F94B2;
}
$col_layout: layout(12 2 fluid float inside);
// 48 grid for author stories view.
// Author's stories View layout.
.authors-stories-view {
.view-story-image {
@include span(3 of $col_layout);
@include post(25%);
}
.view-story-content {
@include span(9 $col_layout last);
}
}
body {
font-family: helvetica;
}
header {
height: 150px;
background: #2F94B2;
margin-bottom: 10px;
}
header h1 {
margin: 10px;
}
.hero {
height: 100px;
margin-bottom: 10px;
}
.hero h3, .hero h2 {
margin: 10px;
}
.hero .one {
background: #FF739C;
height: 100%;
}
.hero .two {
height: 100%;
}
.hero .two div {
height: 100%;
background: #CCC136;
}
.content h3 {
margin: 10px;
}
.content div {
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
}
.content div:nth-child(3n),
.content .cols {
background: #2F94B2;
}
.content div:nth-child(3n+1) {
background: #FF7311;
}
.content div:nth-child(3n+2) {
background: #5DD9FF;
}
.page {
max-width: 920px;
margin-left: auto;
margin-right: auto;
}
.page:after {
content: " ";
display: block;
clear: both;
}
header {
clear: both;
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
}
.hero {
clear: both;
}
.hero .one {
width: 30.43478%;
float: left;
margin-right: 4.34783%;
}
.hero .two {
width: 65.21739%;
float: right;
margin-right: 0;
}
.hero .two div:nth-child(4n+1) {
clear: both;
width: 20%;
float: left;
margin-right: 6.66667%;
}
.hero .two div:nth-child(4n+2) {
width: 20%;
float: left;
margin-right: 6.66667%;
}
.hero .two div:nth-child(4n+3) {
width: 20%;
float: left;
margin-right: 6.66667%;
}
.hero .two div:nth-child(4n) {
width: 20%;
float: right;
margin-right: 0;
}
.hero .two div:nth-child(4) {
width: 20%;
float: right;
margin-right: 0;
}
.content div {
width: 30.43478%;
float: left;
}
.content div:nth-child(3n + 1) {
margin-left: 0;
margin-right: -100%;
clear: both;
margin-left: 0;
}
.content div:nth-child(3n + 2) {
margin-left: 34.78261%;
margin-right: -100%;
clear: none;
}
.content div:nth-child(3n + 3) {
margin-left: 69.56522%;
margin-right: -100%;
clear: none;
}
.cols {
background: #2F94B2;
}
.authors-stories-view .view-story-image {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 25%;
float: left;
padding-left: 2.77778%;
padding-right: 2.77778%;
margin-right: 25%;
}
.authors-stories-view .view-story-content {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 75%;
float: right;
padding-left: 2.77778%;
padding-right: 2.77778%;
}
<div class="page">
<header>
<h1>Hello I'm The Header</h1>
</header>
<div class="hero">
<div class="one">
<h2>I'm by myself</h2>
</div>
<div class="two">
<div><h3>I'm 1</h3></div>
<div><h3>I'm 2</h3></div>
<div><h3>I'm 3</h3></div>
<div><h3>I'm 4</h3></div>
</div>
</div>
<div class="authors-stories-view">
<div class="cols view-story-image"><h2>I'm 1</h2></div>
<div class="cols view-story-content"><h2>I'm 2</h2></div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment