Rename: grid-2-column-70-30-split about alps HOT 9 CLOSED

Thoughts on this, @tpitre?

from alps.

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

from alps.

@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.

from alps.

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

from alps.

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%;
      }
    }
  }
}

from alps.

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

from alps.

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.

from alps.

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.

from alps.

@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.

from alps.