Menu icon Foundation
Include multiple column mixins

Hey there,

Is it possible to include multiple grid column size mixins to support multiple device widths?

For example, to keep my markup clean, I have this:

<header>
    <a href="#"><img src="logo.jpg" alt="My awesome logo" /></a>
    <nav>
        <ul>
            <li><a href="#">Best Link Ever</a></li>
        </ul>
    </nav>
</header>

My scss looks like this:

header { @include grid-row();
    
    a { @include grid-column(8); }
    
    nav { @include grid-column(4, true); }
}

While this is awesome, I would like to be able to do this:

header { @include grid-row();
    
    a, nav { @include grid-column(small-12); }
    
    a { @include grid-column(large-8); }
    
    nav { @include grid-column(large-4); }
}

Is there anything like this currently possible, or planned for the future?

Thanks!
-Alex

mixinsgridcolumnsextend

Hey there,

Is it possible to include multiple grid column size mixins to support multiple device widths?

For example, to keep my markup clean, I have this:

<header>
    <a href="#"><img src="logo.jpg" alt="My awesome logo" /></a>
    <nav>
        <ul>
            <li><a href="#">Best Link Ever</a></li>
        </ul>
    </nav>
</header>

My scss looks like this:

header { @include grid-row();
    
    a { @include grid-column(8); }
    
    nav { @include grid-column(4, true); }
}

While this is awesome, I would like to be able to do this:

header { @include grid-row();
    
    a, nav { @include grid-column(small-12); }
    
    a { @include grid-column(large-8); }
    
    nav { @include grid-column(large-4); }
}

Is there anything like this currently possible, or planned for the future?

Thanks!
-Alex


Ghaida Zahran gave the most helpful answer for this post
Ghaida Zahran over 5 years ago

While the technique is correct in Ben's code, the method isn't compatible with how Foundation works. Foundation is built Mobile First meaning you'll need to write your mobile styles without media queries like so:

header { 
  @include grid-row();
  nav { @include grid-column(12); }
}
@media #{$medium-up} {
  header { 
    @include grid-row();
    nav { @include grid-column(8); }
  }  

You'll notice a couple of things here:

  • Mobile is the default: The mobile styles are written outside media queries.
  • Use medium-up Media Sizes: Use the "-up" sizes to define your media queries. This will allow larger sizes to inherit from the smaller ones. We provided the "-only" media queries to help with QA issues, not to build out layouts.

Here's detailed info on Foundation's media queries:
http://foundation.zurb.com/docs/media-queries.html

Ben Lamb over 5 years ago

Hi,

I hit this limitation as well. One solution seems to be the use of media queries to specify the different column sizes - I have not tested this properly but seems to work:

header { @include grid-row();

    a, nav {
        @media #{$small-only} {
            @include grid-column(12);
        }
    }

    a { @include grid-column(8); }

    nav { @include grid-column(4); }
}

Alex Wright over 5 years ago

Hey Ben,

Thanks for the reply, I appreciate it.
I hadn't thought of that, but it does make sense - that will definitely work for what I need.

Cheers!
-Alex

Brian Eder over 5 years ago

(PLEASE SEE QUESTION BELOW CODE)

Hi Alex and Ben,

Thanks for taking the time to post this... the question and the solution both. Finding this thread helped me over a similar hurdle. It seems though every time I learn one new technique I recognize another I need to get a grasp of in to tweak something a bit more.

Here's a grid I'm using at the moment showing the main content and sidebar below.

#main { @include grid-row();
  #container {
    @media #{$small-only} {
      @include grid-column(12);
    }
    @media #{$medium-only}, #{$large-only} {
      @include grid-column(8);
    }  
  }
  #primary {
    @media #{$small-only} {
      @include no-bullets;
      @include grid-column(12);
      .widgetcontainer {
      @include panel();
      }
    }
    @media #{$medium-only}, #{$large-only} {
      @include no-bullets;
      @include grid-column(4);
      .widgetcontainer {
      @include panel();
      }
    }
  }
  #secondary {
    @media #{$small-only} {
      @include no-bullets;
      @include grid-column(12);
      .widgetcontainer {
      @include panel();
      }
    }
    @media #{$medium-only}, #{$large-only} {
      @include no-bullets;
      @include grid-column(4);
      .widgetcontainer {
      @include panel();
      }
    }
  }
}

Where I'm a bit stuck is that it seems (unless I'm misunderstanding the documentation) that with @media #($medium-only) I can refine the breakpoints for the upper and lower bounds where I want more control.

// $medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";

Unfortunately every way I 've attempted to implement this I end up with a Syntax error. I'm hoping someone can help me with the proper code to fix something like this below if I wanted to change it so that medium-only's upper bound continued to break for a column width of 8 and medium-only's lower bound would break for a column width of 12 (or the full row)?

@media #{$medium-only} {
@include grid-column(8);
}

Thank you!
~Brian

Ghaida Zahran over 5 years ago

While the technique is correct in Ben's code, the method isn't compatible with how Foundation works. Foundation is built Mobile First meaning you'll need to write your mobile styles without media queries like so:

header { 
  @include grid-row();
  nav { @include grid-column(12); }
}
@media #{$medium-up} {
  header { 
    @include grid-row();
    nav { @include grid-column(8); }
  }  

You'll notice a couple of things here:

  • Mobile is the default: The mobile styles are written outside media queries.
  • Use medium-up Media Sizes: Use the "-up" sizes to define your media queries. This will allow larger sizes to inherit from the smaller ones. We provided the "-only" media queries to help with QA issues, not to build out layouts.

Here's detailed info on Foundation's media queries:
http://foundation.zurb.com/docs/media-queries.html

Brian Eder over 5 years ago

Thank you Ghaida, that's a big help! I don't think I would have caught that.

Mac Bleser about 5 years ago

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