Menu icon Foundation
Custom foundation-grid mixin use

Hi,

I've been using Foundation for a while and now I'm moving into more advanced stuff, mainly create my custom CSS stylesheets using the mixins and I've been having lots of fun with it. One thing I'd like to simplify though is how to create a custom grid system.

The easiest way is to include the foundation-grid mixin in the sass file, but that creates a class for every column. What I'd like to do is create a grid system only for the columns I need. For example in the project I'm working now, I only need the 3, 4, 6 and 12 columns, including the pull, push, offset, etc., like this

.small-3{}
.small-4{}
.small-6{}
.small-12{

.medium-3{}
.medium-4{}
.medium-6{}
.medium-12{}

.large-3{}
.large-4{}
.large-6{}
.large-12{}

         

Is there any way to do that using just the foundation-grid() mixin?.

customfoundation-gridmixin

Hi,

I've been using Foundation for a while and now I'm moving into more advanced stuff, mainly create my custom CSS stylesheets using the mixins and I've been having lots of fun with it. One thing I'd like to simplify though is how to create a custom grid system.

The easiest way is to include the foundation-grid mixin in the sass file, but that creates a class for every column. What I'd like to do is create a grid system only for the columns I need. For example in the project I'm working now, I only need the 3, 4, 6 and 12 columns, including the pull, push, offset, etc., like this

.small-3{}
.small-4{}
.small-6{}
.small-12{

.medium-3{}
.medium-4{}
.medium-6{}
.medium-12{}

.large-3{}
.large-4{}
.large-6{}
.large-12{}

         

Is there any way to do that using just the foundation-grid() mixin?.

Geoff Kimball almost 4 years ago

You might want to consider going all the way in the direction of a fully-semantic grid. So instead of using number-based classes, write plain classes like .content and .sidebar and then apply grid styles to them.

In the following example, I have three layout pieces: a container row, and two columns, named "main content" and "sidebar". Using the grid mixins and media queries, I apply grid styles to those classes, so they imitate the behavior of the built-in .row and .column classes.

.container {
  @include grid-row;
}

.main-content {
  @include grid-col;

  @include breakpoint(medium) {
    @include grid-col-size(8);
  }
}

.sidebar {
  @include grid-col;

  @include breakpoint(medium) {
    @include grid-col-size(4);
  }
}

Rodrigo Hernando almost 4 years ago

Hi Geoff and thanks for the prompt answer!!

Actually that's what I'm doing right now. I just wanted to know if there was an easier (lazier actually :D ) way of doing it.

I believe I'll end up creating a mixin with Foundation mixins in order to create my specific classes.

Thanks again for the answer.

Best,
Rodrigo.

Geoff Kimball almost 4 years ago

Nope, that's pretty much it! If you want to do the numbering approach, but not use all 12 numbers, I'd recommend taking a look at the source code for how grid classes are generated. Instead of going from 1 to 12, you could iterate through a list like (1, 3, 6, 9, 12) to only get a subset of the numbers.