Layout Revision

[wylie]

This isn't really an issue, it's more of an enhancement. I just worked out a loop for two column layouts on a 10% grid and wanted to save it.

.l2 {
    @list: 1, 2, 3, 4, 5, 6, 7, 8, 9;
    @listLength: length(@list);

    .loop(@arrayLength, @index: 1) when (@index =< @arrayLength) {
        @arrayVal: extract(@list, @index);
        @pcnt: percentage(@arrayVal / 10);

        &-p@{arrayVal} {
            .extra-bits;
            .col:first-child {
                width: @pcnt;
            }
            .col {
                width: percentage((10 - @arrayVal) / 10);
            }
        }
        .loop(@arrayLength, (@index + 1));
    }
    .loop(@listLength);
}

[gjjones]

Has it been considered putting the sizing as .col modifiers, instead of hoisting up to the layout class? I feel like this would alleviate specificity and selector issues.

Specifically referring to this case where the specificity changes at lower breakpoints:

@media @mq-sm {
    [class*="l"][class*="-p"] {
        .col { /* I feel like this is higher than it should be */
        ...
            + .col { /* was 0 0 2 0, now is 0 0 4 0 */

[wylie]

It has been considered. The reason we aren't using things that way is because we add padding to the columns and remove it from the :first-child. I tried building this out with the sizing modifiers on the .col elements, but it added a bunch more CSS.

If we removed all the padding from the .col classes, or used [class*="col"] {} to target them, perhaps that would cut down on the extra CSS.

[wylie]

With our upcoming meeting this afternoon to talk about layouts and grids here is a new LESS loop that will create nice gridded columns up to whatever number you want.

@media @mq-md, @mq-lg, @mq-xl {
    .grid {
        @list: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12;
        @listLength: length(@list);

        .loop(@arrayLength, @index: 1) when (@index =< @arrayLength) {
            @arrayVal: extract(@list, @index);
            @pcnt: percentage(@arrayVal / @listLength);

            .col@{arrayVal} {
                display: block;
                float: left;
                width: @pcnt;
                padding: 0 15px;
            }
            .loop(@arrayLength, (@index + 1));
        }
        .loop(@listLength);
    }

    .grid {
        width: 100%;
        &:before,
        &:after {
            display: table;
            clear: both;

            content: '';
        }
    }
}

Since we want the columns to be 100% width on small devices I have wrapped the loop in media queries.

The padding on the columns is also equal on either side of the column rather than just on one side of all columns minus the :first-child.

---

Here is a JSFiddle of this: Here is a JSFiddle of this: https://jsfiddle.net/wylie/g08q1nzy/ And here is the output:

@media screen and (min-width: 600px) and (max-width: 995px), screen and (min-width: 996px) and (max-width: 1199px), screen and (min-width: 1200px) {
  .grid .col1 {
    display: block;
    float: left;
    width: 8.33333333%;
    padding: 0 15px;
  }
  .grid .col2 {
    display: block;
    float: left;
    width: 16.66666667%;
    padding: 0 15px;
  }
  .grid .col3 {
    display: block;
    float: left;
    width: 25%;
    padding: 0 15px;
  }
  .grid .col4 {
    display: block;
    float: left;
    width: 33.33333333%;
    padding: 0 15px;
  }
  .grid .col5 {
    display: block;
    float: left;
    width: 41.66666667%;
    padding: 0 15px;
  }
  .grid .col6 {
    display: block;
    float: left;
    width: 50%;
    padding: 0 15px;
  }
  .grid .col7 {
    display: block;
    float: left;
    width: 58.33333333%;
    padding: 0 15px;
  }
  .grid .col8 {
    display: block;
    float: left;
    width: 66.66666667%;
    padding: 0 15px;
  }
  .grid .col9 {
    display: block;
    float: left;
    width: 75%;
    padding: 0 15px;
  }
  .grid .col10 {
    display: block;
    float: left;
    width: 83.33333333%;
    padding: 0 15px;
  }
  .grid .col11 {
    display: block;
    float: left;
    width: 91.66666667%;
    padding: 0 15px;
  }
  .grid .col12 {
    display: block;
    float: left;
    width: 100%;
    padding: 0 15px;
  }
  .grid {
    width: 100%;
  }
  .grid:before,
  .grid:after {
    display: table;
    content: '';
    clear: both;
  }
}

This cuts down on our layout CSS quite a bit. We go from 897 lines to 83. I am sure we will add to that though, but still, we will be nowhere near 897 lines. /cc @gjjones