Skip to content

Instantly share code, notes, and snippets.

@yvesvanbroekhoven
Created April 24, 2014 09:53
Show Gist options
  • Save yvesvanbroekhoven/11248717 to your computer and use it in GitHub Desktop.
Save yvesvanbroekhoven/11248717 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="wrapper">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="two-third"></div>
<div class="one-third"></div>
<div class="centered">
<div class="c1"></div>
<div class="c2"></div>
</div>
</div>
// ----
// Sass (v3.3.5)
// Compass (v1.0.0.alpha.18)
// Susy (v)
// ----
@import "susy";
$susy: (
columns: 12,
gutter-position: split,
debug: (
image: show,
color: rgba(255,255,0, 0.5),
output: overlay,
toggle: top right,
),
);
.wrapper {
@include container;
border: 1px dotted black;
margin: 20px auto;
width: 80%;
div {
height: 50px;
}
}
.a1 {
@include span(full);
background-color: cyan;
}
.a2 {
@include span(6);
background-color: lightblue;
}
.a3 {
@include span(last 4);
background-color: lightblue;
}
.two-third {
@include span(8 wide);
background-color: cyan;
margin-right: 0;
}
.one-third {
@include span(4);
background-color: Aquamarine;
margin: 0;
}
.centered {
@include span(6);
@include push(3);
background-color: pink;
}
.c1 {
@include span(3 of 6);
background-color: Fuchsia;
}
.c2 {
@include span(3 of 6);
background-color: Fuchsia;
}
.wrapper {
max-width: 100%;
margin-left: auto;
margin-right: auto;
border: 1px dotted black;
margin: 20px auto;
width: 80%;
}
.wrapper::after {
content: " ";
display: block;
clear: both;
}
head {
display: block;
position: fixed;
right: 10px;
top: 10px;
z-index: 999;
color: #333;
background: rgba(255, 255, 255, 0.25);
}
head::before {
content: "|||";
display: block;
padding: 5px 10px;
font-family: sans-serif;
font-size: 16px;
font-weight: bold;
}
head:hover {
background: rgba(255, 255, 255, 0.5);
color: red;
}
head:hover ~ .wrapper, head:hover ~ body .wrapper {
position: relative;
}
head:hover ~ .wrapper::before, head:hover ~ body .wrapper::before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: " ";
z-index: 998;
background-image: linear-gradient(to right, transparent 10%, rgba(255, 255, 0, 0.5) 10%, rgba(255, 255, 77, 0.5) 90%, transparent 90%);
background-size: 8.33333%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
}
.wrapper div {
height: 50px;
}
.a1 {
width: 98.33333%;
float: left;
margin-left: 0.83333%;
margin-right: 0.83333%;
background-color: cyan;
}
.a2 {
width: 48.33333%;
float: left;
margin-left: 0.83333%;
margin-right: 0.83333%;
background-color: lightblue;
}
.a3 {
width: 31.66667%;
float: right;
margin-left: 0.83333%;
margin-right: 0.83333%;
background-color: lightblue;
}
.two-third {
width: 66.66667%;
float: left;
margin-left: 0.83333%;
margin-right: 0.83333%;
background-color: cyan;
margin-right: 0;
}
.one-third {
width: 31.66667%;
float: left;
margin-left: 0.83333%;
margin-right: 0.83333%;
background-color: Aquamarine;
margin: 0;
}
.centered {
width: 48.33333%;
float: left;
margin-left: 0.83333%;
margin-right: 0.83333%;
margin-left: 25.83333%;
background-color: pink;
}
.c1 {
width: 46.66667%;
float: left;
margin-left: 1.66667%;
margin-right: 1.66667%;
background-color: Fuchsia;
}
.c2 {
width: 46.66667%;
float: left;
margin-left: 1.66667%;
margin-right: 1.66667%;
background-color: Fuchsia;
}
<div class="wrapper">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="two-third"></div>
<div class="one-third"></div>
<div class="centered">
<div class="c1"></div>
<div class="c2"></div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment