Row level CSS classes to support Foundation alignment classes

My workaround for now is to add align-self-middle, etc. to each cell. I just think with the new flex grid implementation and the previous flex implementation, those row level utilities would be nice to access.

• This reply was modified 7 years ago by Andres.

Hi @andrespr,

Unfortunately this is not currently an available option in Mesh. But this is a great feature request that I strongly agree would be a helpful addition.

I’ve added an issue to our GitHub, https://github.com/linchpin/mesh/issues/188, so progress toward this specific improvement may be tracked there.

Thanks!

Hey, a bit late to the party here, but this is still relevant as the Mesh plugin doesn’t seem to have been updated since this post was last discussed.

If you’re using the latest version of Foundation, which as of this time is 6.4, then just add the following to your SCSS:

/** FIXES FOR MESH PLUGIN **/
/* Mesh uses the old columns and cells - the following code just applies the new xy-grid classes to these old classes */
.row {
  @include xy-grid();
}

.columns {
  &.small-12 {
    @include xy-cell(12);
  }
  @include breakpoint(medium) {

    &.medium-1 {
      @include xy-cell(1);
    }
    &.medium-2 {
      @include xy-cell(2);
    }
    &.medium-3 {
      @include xy-cell(3);
    }
    &.medium-4 {
      @include xy-cell(4);
    }
    &.medium-5 {
      @include xy-cell(5);
    }
    &.medium-6 {
      @include xy-cell(6);
    }
    &.medium-7 {
      @include xy-cell(7);
    }
    &.medium-8 {
      @include xy-cell(8);
    }
    &.medium-9 {
      @include xy-cell(9);
    }
    &.medium-10 {
      @include xy-cell(10);
    }
    &.medium-11 {
      @include xy-cell(11);
    }
    &.medium-12 {
      @include xy-cell(12);
    }
  }
}

This will add the correct grid-x classes to rows and cell-xy classes to columns. It won’t mess with your existing 6.4 markup. Probably not the best practice in the long run as a lot of extra css is generated, but it’s a simple fix until the plugin has an update.

Cheers!

Hi @andrespr,

Sorry for the long delay, but we rolled out an update today that includes a new field on Mesh sections for Row Class. With the update, you’ll notice that the pre-existing field for CSS Class on a section is now known as “Section Class”, while we have also introduced a few new fields for “Section ID” and “Row Class”.

@dogdogma – As far as the xy-grid is concerned, we have plans for a larger update in Mesh to be able to select one of their grid systems.

Wow @maxinacube! Thank you! I will give it a try soon, and I really appreciate this feature and the update!

@dogdogma I had a note to revisit your comment. With Mesh 1.2.5 we have native support for the Flex and XY grids in Foundation 6.4.X

Thanks for the update @aware

Congrats on the plugin update – the addition of XY grid, background image and centered cells has made this plugin absolutely awesome!

I usually use ACF to create flexible content areas to achieve more advanced layouts, but now I can do everything easier and better with Mesh, and the client will still understand how to update and add content.

Great work!

Thank you so much @dogdogma, glad the change is helping you out. If you have a chance. Please leave a rating/review, it would really help the team out as we try to plan out future updates and we try to get more users.