Rename: grid-2-column-70-30-split

[designerbrent]

Rename this to something in the "layout" family, like layout-2-column-70-30-split.

[designerbrent]

Thoughts on this, @tpitre?

[designerbrent]

How does Grid and Layout differ? In looking at the code, I see the grid is specific classes. Maybe these shouldn't be combined?

[tpitre]

@designerbrent I'm open to it, but it deviates a little from our current naming convention. In more recent projects, I've moved from naming column layouts from g-- or grid-- to layout--. If we do it fro this one, we might as well do it for all.

[tpitre]

Grids have columns and sometimes rows. Layout containers keep content centered within a maximum width and don't ever split content up.

[tpitre]

Layout

.layout-container {
  max-width: $max-width;
  margin: 0 auto;
  position: relative;
  padding-left: $pad;
  padding-right: $pad;
  width: 100%;
  @include media('>large') {
    padding-left: $pad;
    padding-right: $pad;
  }
  @include media('>xxlarge') {
    padding-left: 0;
    padding-right: 0;
  }
}

Grid

.g-2up--35-65--at-medium {
  @include media('>medium') {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    > .gi {
      float: left;
      align-items: stretch;
      display: flex;
      &:first-child {
        width: 35%;
      }
      &:last-child {
        width: 65%;
      }
    }
  }
}

[designerbrent]

I'm fine with leaving it, but just want to understand the difference between the two. This probably should get annotated.

[tpitre]

Ok, sounds good. I have the Layout classes commented here in the code, and each grid class has their own description, but an annotation on the ALPS side could help as well. We could also set up individual templates or one template illustrating each of these grid variations.

[designerbrent]

Alright, I think I'm clearer now. So layout is our outer holder containers, like 100, 70/30 and 30/70, while grid is what goes inside of those containers, like 70/30, 30/70, 50/50, 33/34/33, etc? This makes sense.

Pulling them into an example pattern would be helpful, I think.

[tpitre]

@designerbrent That's correct. Those "shifter" classes are for mainly page layout and wouldn't necessarily work well when nested within another column. There's nothing stopping you from using the grid containers to create a page layout, but it I reserved the layout classes specifically for that.