<commit_before>/**
*
* Grid
*
* Google Web Essentials
*
* R/GA 2014
* @author <NAME>
* @author <NAME>
*
**/

$mediumColCount: 3;
$mediumColWidth: 30.3%;
$mediumGutterWidth: 4.5%;

$wideColCount: 4;
$wideColWidth: 22.2%;
$wideGutterWidth: 3.7%;


.demo {
  margin-bottom: $lineHeight*2;
}

@mixin rule--col($mediaQuery) {
  .demo & {
    background: rgba(blue, .4);
  }

  min-height: $lineHeight*4;

  margin-bottom: $lineHeight;

  @if $mediaQuery == medium {
    float: left;
    width: $mediumColWidth;
    margin-right: $mediumGutterWidth;
  }

  @if $mediaQuery == wide {
    float: left;
    width: $wideColWidth;
    margin-right: $wideGutterWidth;
  }
}

@include medium {
  // Generating grid classes for medium view
  @for $i from 1 through $mediumColCount {
    .medium-#{$i} {
      @include rule--col(medium);
      width: ($mediumColWidth*$i) + ($mediumGutterWidth*($i + -1));
      @if $i == $mediumColCount { margin-right: 0; }
    }

    @if $i < $mediumColCount {
      .medium-push-#{$i} {
        @include rule--col(medium);
        margin-left: ($mediumColWidth*$i) + ($mediumGutterWidth*$i);
      }
    }
  }

  .medium-full {
    @include rule--col(medium);
    margin-right: 0;
    width: 100%;
  }

  .third {
    @include rule--col(medium);<commit_msg>Dynamically adding html classes on grid so we know whats going on<commit_after>/**
*
* Grid
*
* Google Web Essentials
*
* R/GA 2014
* @author <NAME>
* @author <NAME>
*
**/

$mediumColCount: 3;
$mediumColWidth: 30.3%;
$mediumGutterWidth: 4.5%;

$wideColCount: 4;
$wideColWidth: 22.2%;
$wideGutterWidth: 3.7%;


.demo {
  margin-bottom: $lineHeight*2;
}

@mixin rule--col($mediaQuery) {
  .demo & {
    background: rgba(blue, .4);
  }

  position: relative;
  min-height: $lineHeight*5;

  margin-bottom: $lineHeight;

  @if $mediaQuery == medium {
    float: left;
    width: $mediumColWidth;
    margin-right: $mediumGutterWidth;
  }

  @if $mediaQuery == wide {
    float: left;
    width: $wideColWidth;
    margin-right: $wideGutterWidth;
  }


  &:before,
  &:after {
    @include type--small;
    display: block;
    margin: 0 10px;
  }

  &:before {
    content: "HTML classes: ";
    font-weight: 700;
  }

  &:after {
    content: attr(class);
    word-spacing: 15px;
  }
}

@include medium {
  // Generating grid classes for medium view
  @for $i from 1 through $mediumColCount {
    .medium-#{$i} {
      @include rule--col(medium);
      width: ($mediumColWidth*$i) + ($mediumGutterWidth*($i + -1));
      @if $i == $mediumColCount { margin-right: 0; }
    }

    @if $i < $mediumColCount {
      .medium-push-#{$i} {
        @include rule--col(medium);
        margin-left: ($mediumColWidth*$i) + ($mediumGutterWidth*$i);
      }
    }
  }

  .medium-full {
    @include rule--col(medium);
    margin-right: 0;
    width: 100%;
  }

  .third {
    @include rule--col(medium);
{'fraction_non_alphanumeric': 0.17096999302163293, 'fraction_numerical': 0.0209351011863224, 'mean_word_length': 2.817576564580559, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6928086', 'n_tokens_mistral': 1133, 'n_tokens_neox': 1060, 'n_words': 230}