Skip to content

Instantly share code, notes, and snippets.

@macbleser
Last active August 29, 2015 14:02
Show Gist options
  • Save macbleser/c53cc54e10201cf37a2a to your computer and use it in GitHub Desktop.
Save macbleser/c53cc54e10201cf37a2a to your computer and use it in GitHub Desktop.
Foundation Grid Columns Mixin
//
// Grid Columns
//
// A mixin to help make Foundation's grid-column mixin easier
// to use when specifying multiple media quries/screen sizes
@mixin grid-columns(
// Mobile First Media Queries
$small-up-screens: false,
$medium-up-screens: false,
$large-up-screens: false,
$xlarge-up-screens: false,
$xxlarge-up-screens: false,
// Specific Range Media Queries
$small-only-screens: false,
$medium-only-screens: false,
$large-only-screens: false,
$xlarge-only-screens: false,
$xxlarge-only-screens: false ){
//
// Mobile First Media Queries
//
// Small and up screens
@if $small-up-screens {
@include grid-column($small-up-screens);
}
// Medium and up screens
@if $medium-up-screens {
@media #{$medium-up} {
@include grid-column($medium-up-screens);
}
}
// Large and up screens
@if $large-up-screens {
@media #{$large-up} {
@include grid-column($large-up-screens);
}
}
// XLarge and up screens
@if $xlarge-up-screens {
@media #{$xlarge-up} {
@include grid-column($xlarge-up-screens);
}
}
// XXLarge and up screens
@if $xxlarge-up-screens {
@media #{$xxlarge-up} {
@include grid-column($xxlarge-up-screens);
}
}
//
// Specific Range Media Queries
//
// Small only screens
@if $small-only-screens {
@media #{$small-only} {
@include grid-column($small-only-screens);
}
}
// Medium only screens
@if $medium-only-screens {
@media #{$medium-only} {
@include grid-column($medium-only-screens);
}
}
// Large only screens
@if $large-only-screens {
@media #{$large-only} {
@include grid-column($large-only-screens);
}
}
// XLarge only screens
@if $xlarge-only-screens {
@media #{$xlarge-only} {
@include grid-column($xlarge-only-screens);
}
}
// XXLarge only screens
@if $xxlarge-only-screens {
@media #{$xxlarge-only} {
@include grid-column($xxlarge-only-screens);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment