Menu icon Foundation

Developer | Boston, MA

My Posts

No Content

My Comments

Mac Bleser commented on Alex Wright's post about 5 years

I'm a little late to this thread, but figured I'd post up my technique for working using the grid-column mixin with multiple media queries.

Below is a mixin that I wrote to allow me to easily specify the column widths at different screen sizes. I named the mixin "grid-columns" (note the pluralization), but the name could be changed it to whatever makes sense to you.

Most of the time when using this mixin I don't pass in the named variables because I mainly use the first 3 options in that order (small-up, medium-up, large-up).

Example usage:
I want my class "custom-grid-class" to be 12 on columns small and up screens (the base), 6 columns on medium and up screens, and 4 columns on large and up screens.

// With this mixin it is simple
.custom-grid-class {
  @include grid-columns(12,4,4);
  // which is the same as
  // @include grid-columns(
  //    $small-up-screens: 12, 
  //    $medium-up-screens: 6, 
  //    $large-up-screens: 4 
  // );
}

// Without this mixin it is repetitive
.custom-grid-class {
  @include grid-column(12);

  @media #{$medium-up} {
    @include grid-column(6);
  }

  @media #{$large-up} {
    @include grid-column(4);
  }
}

The mixin:
view as a gist

//
// 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);
    }
  }
}

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Alex Wright's post about 5 years

I'm a little late to this thread, but figured I'd post up my technique for working using the grid-column mixin with multiple media queries.

Below is a mixin that I wrote to allow me to easily specify the column widths at different screen sizes. I named the mixin "grid-columns" (note the pluralization), but the name could be changed it to whatever makes sense to you.

Most of the time when using this mixin I don't pass in the named variables because I mainly use the first 3 options in that order (small-up, medium-up, large-up).

Example usage:
I want my class "custom-grid-class" to be 12 on columns small and up screens (the base), 6 columns on medium and up screens, and 4 columns on large and up screens.

// With this mixin it is simple
.custom-grid-class {
  @include grid-columns(12,4,4);
  // which is the same as
  // @include grid-columns(
  //    $small-up-screens: 12, 
  //    $medium-up-screens: 6, 
  //    $large-up-screens: 4 
  // );
}

// Without this mixin it is repetitive
.custom-grid-class {
  @include grid-column(12);

  @media #{$medium-up} {
    @include grid-column(6);
  }

  @media #{$large-up} {
    @include grid-column(4);
  }
}

The mixin:
view as a gist

//
// 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);
    }
  }
}

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content