Skip to content

Instantly share code, notes, and snippets.

@WillsonSmith
Last active December 17, 2015 08:09
Show Gist options
  • Save WillsonSmith/5578380 to your computer and use it in GitHub Desktop.
Save WillsonSmith/5578380 to your computer and use it in GitHub Desktop.
A nothing-fancy, tiny grid sass file.
@mixin breakpoint($point) {
@if $point == papa-bear {
@media (max-width: 1600px) { @content; }
}
@else if $point == mama-bear {
@media (max-width: 1250px) { @content; }
}
@else if $point == baby-bear {
@media (max-width: 650px) { @content; }
}
}
//Chris Coyier breakpoints
*, *:before, *:after{
box-sizing: border-box;
}
.grid-full{
width: 100%;
}
.grid-1-2{
float: left;
width: 50%;
}
.grid-1-3{
float: left;
width: 33.33333%;
}
.grid-1-4{
float: left;
width: 25%;
}
.grid-1-8{
float: left;
width: 12.5%;
}
/*Start responsive breaks*/
.break-full{
@include breakpoint(baby-bear){
float: none;
width: 100%;
}
}
.break-1-2{
@include breakpoint(baby-bear){
width: 50%;
}
}
.break-1-3{
@include breakpoint(baby-bear){
width: 33.33333%;
}
}
.break-1-4{
@include breakpoint(baby-bear){
width: 25%;
}
}
/*End responsive breaks*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment