Skip to content

Instantly share code, notes, and snippets.

@jdlehman
Created July 24, 2014 21:49
Show Gist options
  • Save jdlehman/0a27b683e887a5eb7153 to your computer and use it in GitHub Desktop.
Save jdlehman/0a27b683e887a5eb7153 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="header">Signalman</div>
<div class="feature">card</div>
<div class="feature">card</div>
<div class="feature">card</div>
<div class="feature">card</div>
<div class="feature">card</div>
<div class="feature">card</div>
// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// Breakpoint (v2.4.2)
// Susy (v2.1.2)
// ----
@import "susy";
@import "breakpoint";
$susy: (
columns: 4,
gutter-position: split,
gutter: 1/16
);
$md: 500px;
$lg: 800px;
body {
@include container(1260px);
}
.feature {
@include span(4);
@include breakpoint($md) {
@include span(2);
}
@include breakpoint($lg) {
@include span(1);
}
margin-bottom: 1rem;
background-color: #aaa;
}
body {
max-width: 1260px;
margin-left: auto;
margin-right: auto;
}
body:after {
content: " ";
display: block;
clear: both;
}
.feature {
width: 95%;
float: left;
margin-left: 2.5%;
margin-right: 2.5%;
margin-bottom: 1rem;
background-color: #aaa;
}
@media (min-width: 500px) {
.feature {
width: 45%;
float: left;
margin-left: 2.5%;
margin-right: 2.5%;
}
}
@media (min-width: 800px) {
.feature {
width: 20%;
float: left;
margin-left: 2.5%;
margin-right: 2.5%;
}
}
<div class="header">Signalman</div>
<div class="feature">card</div>
<div class="feature">card</div>
<div class="feature">card</div>
<div class="feature">card</div>
<div class="feature">card</div>
<div class="feature">card</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment