Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<div class="container">
<div class="small">
Small
</div>
<div class="large">
Large
</div>
<div class="tiny">
Tiny
</div>
<div class="medium">
Medium
</div>
</div>
// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// Susy (v2.1.3)
// ----
@import "breakpoint";
@import "susy";
$susy: (
gutters: .0618,
debug: (
image: show,
color: rgba(orange,.1),
output: background
)
);
$small: (
columns: 1 1.618,
container: 100%
);
$medium: (
columns: 1 1.618 1 1.618,
container: 100%,
output: isolate
);
$large: (
columns: 1 2.618 0.618 1.618,
container: 1200px,
output: isolate,
);
@include layout($small);
div {
box-sizing: border-box;
}
.container {
@include container;
@include show-grid;
@include susy-breakpoint(720px, $medium) {
@include show-grid;
}
@include susy-breakpoint(1200px, $large) {
@include show-grid;
}
min-height: 96vh;
font-size: 2em;
div {
padding: .5em;
text-align: center;
}
}
.small {
@include span(1 first);
@include susy-breakpoint(720px, $medium) {
@include span(1 at 1);
}
@include susy-breakpoint(1200px, $large) {
@include span(1 at 1);
}
}
.large {
@include span(1 last);
@include susy-breakpoint(720px, $medium) {
@include span(1 at 2);
}
@include susy-breakpoint(1200px, $large) {
@include span(1 at 2);
}
}
.tiny {
@include span(1 first);
@include susy-breakpoint(720px, $medium) {
@include span(1 at 3);
}
@include susy-breakpoint(1200px, $large) {
@include span(1 at 3);
}
}
.medium {
@include span(1 last);
@include susy-breakpoint(720px, $medium) {
@include span(1 at 4);
}
@include susy-breakpoint(1200px, $large) {
@include span(1 at 4);
}
}
div {
box-sizing: border-box;
}
.container {
max-width: 100%;
margin-left: auto;
margin-right: auto;
background-image: linear-gradient(to right, rgba(255, 165, 0, 0.1), rgba(255, 192, 77, 0.1) 37.31622%, transparent 37.31622%, transparent 39.62236%, rgba(255, 165, 0, 0.1) 39.62236%, rgba(255, 192, 77, 0.1));
background-origin: content-box;
background-clip: content-box;
background-position: left top;
background-image: linear-gradient(to right, rgba(255, 165, 0, 0.1), rgba(255, 192, 77, 0.1) 37.31622%, transparent 37.31622%, transparent 39.62236%, rgba(255, 165, 0, 0.1) 39.62236%, rgba(255, 192, 77, 0.1));
background-origin: content-box;
background-clip: content-box;
background-position: left top;
min-height: 96vh;
font-size: 2em;
}
.container:after {
content: " ";
display: block;
clear: both;
}
@media (min-width: 720px) {
.container {
background-image: linear-gradient(to right, rgba(255, 165, 0, 0.1), rgba(255, 192, 77, 0.1) 18.44542%, transparent 18.44542%, transparent 19.58535%, rgba(255, 165, 0, 0.1) 19.58535%, rgba(255, 192, 77, 0.1) 49.43004%, transparent 49.43004%, transparent 50.56996%, rgba(255, 165, 0, 0.1) 50.56996%, rgba(255, 192, 77, 0.1) 69.01538%, transparent 69.01538%, transparent 70.15531%, rgba(255, 165, 0, 0.1) 70.15531%, rgba(255, 192, 77, 0.1));
background-origin: content-box;
background-clip: content-box;
background-position: left top;
}
}
@media (min-width: 1200px) {
.container {
background-image: linear-gradient(to right, rgba(255, 165, 0, 0.1), rgba(255, 192, 77, 0.1) 16.55794%, transparent 16.55794%, transparent 17.58122%, rgba(255, 165, 0, 0.1) 17.58122%, rgba(255, 192, 77, 0.1) 60.92989%, transparent 60.92989%, transparent 61.95317%, rgba(255, 165, 0, 0.1) 61.95317%, rgba(255, 192, 77, 0.1) 72.18598%, transparent 72.18598%, transparent 73.20926%, rgba(255, 165, 0, 0.1) 73.20926%, rgba(255, 192, 77, 0.1));
background-origin: content-box;
background-clip: content-box;
background-position: left top;
}
}
.container div {
padding: .5em;
text-align: center;
}
.small {
width: 37.31622%;
float: left;
margin-right: 2.30614%;
}
@media (min-width: 720px) {
.small {
width: 18.44542%;
float: left;
margin-left: 0;
margin-right: -100%;
}
}
@media (min-width: 1200px) {
.small {
width: 16.55794%;
float: left;
margin-left: 0;
margin-right: -100%;
}
}
.large {
width: 60.37764%;
float: right;
margin-right: 0;
}
@media (min-width: 720px) {
.large {
width: 29.84469%;
float: left;
margin-left: 19.58535%;
margin-right: -100%;
}
}
@media (min-width: 1200px) {
.large {
width: 43.34868%;
float: left;
margin-left: 17.58122%;
margin-right: -100%;
}
}
.tiny {
width: 37.31622%;
float: left;
margin-right: 2.30614%;
}
@media (min-width: 720px) {
.tiny {
width: 18.44542%;
float: left;
margin-left: 50.56996%;
margin-right: -100%;
}
}
@media (min-width: 1200px) {
.tiny {
width: 10.2328%;
float: left;
margin-left: 61.95317%;
margin-right: -100%;
}
}
.medium {
width: 60.37764%;
float: right;
margin-right: 0;
}
@media (min-width: 720px) {
.medium {
width: 29.84469%;
float: left;
margin-left: 70.15531%;
margin-right: -100%;
}
}
@media (min-width: 1200px) {
.medium {
width: 26.79074%;
float: left;
margin-left: 73.20926%;
margin-right: -100%;
}
}
<div class="container">
<div class="small">
Small
</div>
<div class="large">
Large
</div>
<div class="tiny">
Tiny
</div>
<div class="medium">
Medium
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.