.main-wrap minxin question..

[JPOak]

I don't think this is a bug, not sure, but little things like this drive me nuts and I am wondering if anybody else has run into this.... For the full-width template shouldn't the output of the mixin FP uses equal the same as the below?

However, there are extra margins on our usage as a mixin on the grid. I tried to add grid-margin-x , but the same.

<div class="grid-container">
  <div class="grid-x">
    <div class="cell medium-12"><p>cell</p></div>
  </div>
</div>

[colin-marshall]

Looks like by default the xy-cell mixin has margin gutters. That's kind of confusing since when not using the mixin you have to add the grid-margin-x class in order to get margins. I guess it has to be setup this way in order to allow for the option to have padding or margin gutters.

/// Creates a cell for your grid.
///
/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.
/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters
/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.
/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.
/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
@mixin xy-cell(
  $size: full,
  $gutter-output: true,
  $gutters: $grid-margin-gutters,
  $gutter-type: margin,
  $gutter-position: right left,
  $breakpoint: null,
  $vertical: false
)

In FP, even if you set $gutter-output to false for .full-width .main-content, you'll still get gutters (larger ones) because it falls back to the margins from the non full-width layout because both templates use the .main-content class.

We should probably just have a .main-content-full-width class and a .main-content class instead of putting a .full width class on the .main-wrap to prevent overrides.

[JPOak]

@colin-marshall Thanks. At least I know it's not just my tired eyes. Little stuff like this drives me nuts and I end up spending a lot of time finding out the "whys." I actually tried to use "grid-margin-x" and it didn't do anything. I'll need to look at a solution for this or it will continue to drive me crazy as I do like to write grid inline sometimes. I need things to align.

[colin-marshall]

@JPOak what about the solution I proposed in the last sentence of my previous post? If you want to get rid of the margins just do what I suggested and change the mixin in .main-content-full-width to:

@include xy-cell(12, false);

[JPOak]

@colin-marshall Ah, that would work. Thanks!

[colin-marshall]

@JPOak no problem. I'm reopening this until I can put a PR in to change the class for full-width.