Contents

$grater-large-container-width: 640px !default;
$grater-small-container-width: 300px !default;
$grater-column-width: 300px !default;
$grater-small-media-query: "all and (max-width: 660px)" !default;

// Grater container
.grater-container {
  width: $grater-large-container-width;
  margin: 0 auto;

  @media #{$grater-small-media-query} {
    width: $grater-small-container-width;
  }
}

// Grater row
.grater {
  // Columns
  > div {
    width: $grater-column-width;
    margin: 0 0 2em;

    // First column
    &:first-child {
      float: left;
    }

    // Second column
    &:last-child {
      float: right;
    }
  }

  // When the `reverse` class is added, the columns are switch
  &.reverse > div {
    &:first-child {
      float: right;
    }

    &:last-child {
      float: left;
    }
  }

  // Clearfix
  zoom: 1;

  &:before,
  &:after {
    content: "";
    display: table;
  }

  &:after {
    clear: both;
  }

  // Responsive
  @media #{$grater-small-media-query} {
    margin-bottom: 1em;

    > div {
      float: none !important; // Shut up. I know, I know
      margin: 0 auto 2em;
    }
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
grater-0.1.5	app/assets/stylesheets/grater.scss