Skip to content

Instantly share code, notes, and snippets.

@jdlehman
Created October 15, 2014 01:04
Show Gist options
  • Save jdlehman/4d2b0ed8df8653395acf to your computer and use it in GitHub Desktop.
Save jdlehman/4d2b0ed8df8653395acf to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="container">
<input type="checkbox" id="left" class="toggle-input show-left" />
<input type="checkbox" id="right" class="toggle-input show-right" />
<header>
<label for="left" class="toggle">show-left</label>
<label for="right" class="toggle">show-right</label>
<h1>header</h1>
</header>
<div class="left" id="left">left</div>
<div class="main">main</div>
<div class="right" id="right">right</div>
<footer>footer</footer>
</div>
// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// Breakpoint (v2.4.1)
// Susy (v2.0.0.beta.3)
// ----
@import "compass";
@import "compass/reset";
@import "susy";
@import "breakpoint";
// Small
// -----
$susy: (
columns: 4,
column-width: 4em,
gutter-position: inside,
);
$medium: layout(8);
$large: layout(12);
.container {
@include container($large);
overflow: hidden;
}
.left { @include span(3 at span(-3 wide) isolate); }
.main { @include span(full at 1 isolate); }
.right {
@include span(3 at 100% isolate);
margin-right: -200%;
}
.show-left {
&:checked {
~ .left { @include push(0); }
~ .main { @include push(3); }
}
}
.show-right {
&:checked {
~ .left { @include pull(6); }
~ .main { @include pull(3); }
~ .right { @include push(1); }
}
}
// Medium
// ------
@include susy-breakpoint(40em, $medium) {
.left { @include span(3 at 1 isolate); }
.main { @include span(5 at 4 isolate); }
.show-left {
&:checked {
~ .left { @include push(0); }
~ .main { @include push(3); }
}
}
.show-right {
&:checked {
~ .left { @include pull(3); }
~ .main { @include push(0); }
~ .right { @include push(5); }
}
}
[for="left"] { display: none; }
}
// Large
// ------
@include susy-breakpoint(60em, $large) {
.left { @include span(3 at 1 isolate); }
.main { @include span(6 at 4 isolate); }
.right { @include span(3 at 10 isolate); }
.show-left {
&:checked {
~ .main { @include push(3); }
}
}
.show-right {
&:checked {
~ .left { @include push(0); }
~ .main { @include push(3); }
~ .right { @include push(9); }
}
}
[for="right"] { display: none; }
}
// Styles
// ------
.toggle-input {
position: absolute;
opacity: 0;
z-index: -1;
}
.toggle {
cursor: pointer;
color: blue;
&:hover, &:focus, &:active {
color: red;
}
}
header, footer {
padding: 1em 0;
background-color: rgba(gray, .25);
text-align: center;
}
[for] {
position: relative;
z-index: 10;
padding: 0 1em;
}
[for="left"] { float: left; }
[for="right"] { float: right; }
.left, .main, .right {
@include transition(all 300ms);
padding-top: 1em;
padding-bottom: 1em;
height: 12em;
}
.left {
background: rgba(red, .25);
}
.right {
background: rgba(yellow, .5);
}
footer {
@include break;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
.container {
*zoom: 1;
max-width: 60em;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.container:after {
content: " ";
display: block;
clear: both;
}
.left {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 75%;
float: left;
margin-left: -75%;
margin-right: -100%;
padding-left: 2.5%;
padding-right: 2.5%;
}
.main {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
float: left;
margin-left: 0;
margin-right: -100%;
padding-left: 2.5%;
padding-right: 2.5%;
}
.right {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 75%;
float: left;
margin-left: 100%;
margin-right: -100%;
padding-left: 2.5%;
padding-right: 2.5%;
margin-right: -200%;
}
.show-left:checked ~ .left {
margin-left: 0%;
}
.show-left:checked ~ .main {
margin-left: 75%;
}
.show-right:checked ~ .left {
margin-left: -150%;
}
.show-right:checked ~ .main {
margin-left: -75%;
}
.show-right:checked ~ .right {
margin-left: 25%;
}
@media (min-width: 40em) {
.left {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 37.5%;
float: left;
margin-left: 0;
margin-right: -100%;
padding-left: 1.25%;
padding-right: 1.25%;
}
.main {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 62.5%;
float: left;
margin-left: 37.5%;
margin-right: -100%;
padding-left: 1.25%;
padding-right: 1.25%;
}
.show-left:checked ~ .left {
margin-left: 0%;
}
.show-left:checked ~ .main {
margin-left: 37.5%;
}
.show-right:checked ~ .left {
margin-left: -37.5%;
}
.show-right:checked ~ .main {
margin-left: 0%;
}
.show-right:checked ~ .right {
margin-left: 62.5%;
}
[for="left"] {
display: none;
}
}
@media (min-width: 60em) {
.left {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 25%;
float: left;
margin-left: 0;
margin-right: -100%;
padding-left: 0.83333%;
padding-right: 0.83333%;
}
.main {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 50%;
float: left;
margin-left: 25%;
margin-right: -100%;
padding-left: 0.83333%;
padding-right: 0.83333%;
}
.right {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 25%;
float: left;
margin-left: 75%;
margin-right: -100%;
padding-left: 0.83333%;
padding-right: 0.83333%;
}
.show-left:checked ~ .main {
margin-left: 25%;
}
.show-right:checked ~ .left {
margin-left: 0%;
}
.show-right:checked ~ .main {
margin-left: 25%;
}
.show-right:checked ~ .right {
margin-left: 75%;
}
[for="right"] {
display: none;
}
}
.toggle-input {
position: absolute;
opacity: 0;
z-index: -1;
}
.toggle {
cursor: pointer;
color: blue;
}
.toggle:hover, .toggle:focus, .toggle:active {
color: red;
}
header, footer {
padding: 1em 0;
background-color: rgba(128, 128, 128, 0.25);
text-align: center;
}
[for] {
position: relative;
z-index: 10;
padding: 0 1em;
}
[for="left"] {
float: left;
}
[for="right"] {
float: right;
}
.left, .main, .right {
-moz-transition: all 300ms;
-o-transition: all 300ms;
-webkit-transition: all 300ms;
transition: all 300ms;
padding-top: 1em;
padding-bottom: 1em;
height: 12em;
}
.left {
background: rgba(255, 0, 0, 0.25);
}
.right {
background: rgba(255, 255, 0, 0.5);
}
footer {
clear: both;
}
<div class="container">
<input type="checkbox" id="left" class="toggle-input show-left" />
<input type="checkbox" id="right" class="toggle-input show-right" />
<header>
<label for="left" class="toggle">show-left</label>
<label for="right" class="toggle">show-right</label>
<h1>header</h1>
</header>
<div class="left" id="left">left</div>
<div class="main">main</div>
<div class="right" id="right">right</div>
<footer>footer</footer>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment