Row level CSS classes to support Foundation alignment classes

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!

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!