This is not a CSS Framework

not-a-css-framework.scss

/*
  This is not a CSS Framework
  ===========================

  This is a handful of Sass mixins that get you everything you need
  from a CSS grid framework while minimizing dependencies, overrides, and complexity.

  Use it if you want, but my point is that many projects
  don't need anything as complex as Bootstrap or Neat.
  Don't assume you need a framework at all.
  Think about what makes sense for your project
  and maybe just roll your own.
*/

/*
  Variables
  ---------

  I use a handful of layout variables in the mixins below.
*/
$gutter: 20px;
$sm-gutter: 5px;

$sm-screen: 0;
$md-screen: 600px;
$lg-screen: 960px;
$xl-screen: 1200px;


/*
  Container
  ---------

  The container mixin limits the maximum width of an element
  and horizontally centers it once it reaches that width.
  It may optionally add padding to the left and right sides.

  #### Arguments

  `$max-width`:
  Centers the element horizontally
  and contrains width once this width is reached.

  `$side-padding`:
  _optional_
  Padds the left and right of the element with this value.

  #### Example

    @scss
    .l-main {
      @include container($lg-screen, $gutter);
    }
*/

@mixin container($max-width, $side-padding: null) {
  max-width: $max-width;
  margin-left: auto;
  margin-right: auto;

  @if $side-padding {
    padding-right: $side-padding;
    padding-left: $side-padding;
  }
}

/*
  Row & Column
  ------------

  Together these two mixins enable us to position elements horizontally into columns.

  To work properly, columns must have an ancestor row element.

  #### Example

    @html
    <div class="l-main">
      <div class="l-content"></div>
      <div class="l-sidebar"></div>
    </div>

    @scss
    .l-main { @include row; }
    .l-content { @include col(2/3); }
    .l-sidebar { @include col(1/3); }

  Both mixins take an optional variable `$spacing` argument
  to customize the gutter between columns.
  This optional argument defaults to the global `$gutter` variable;

  ### Row

  #### Arguments

  `$spacing`:
  _optional_
  Override the spacing between each column. Must match `$spacing` of contained columns. Defaults to global `$gutter` variable.
*/

@mixin row($spacing: $gutter) {
  @include clearfix;
  margin-right: -$spacing;
}

/*
  ### Column

  #### Arguments
  `$wdith`:
  Sets the width of the column. Pass in as a fraction (`1/3`) or decimal ('.333').

  `$spacing`:
  _optional_
  Override the spacing between each column. Must match `$spacing of parent row. Defaults to global `$gutter` variable.
*/

@mixin column($width, $spacing: $gutter) {
  float: left;
  padding-right: $spacing;
  width: #{($width * 100)}%;
}

/*
  Media
  -----

  A little helper to simplify the media query directive.

  #### Arguments

  `$min-width`:
  The minimum width at which the contained rules aill apply.

  #### Example

    @scss
    h1 {
      font-size: 27px;

      @include media($lg-screen) {
        font-size: 34px;
      }
    }

*/

@mixin media($min-width) {
  @media screen and (min-width: #{$min-width + ($gutter * 2)}) {
    @content;
  }
}

/*
  Cheat classes
  -------------

  Give some thought to wether or not you need to use
  non-semantic layout classes like these.

  One the one hand, they let you write fewer lines of CSS.
  Fewer lines => fewer bugs.
  On the other hand, they polute your markup with your presentation
  and implimentation details of your CSS framework (or non-framework).

  I tend to use these in cases where I would otherwise have
  to select an element *just* to apply a single property or mixin.
*/

.row { @include row; }
.col-1of2 { @include column(1/2); }
.col-1of3 { @include column(1/3); }
.col-2of3 { @include column(2/3); }
.col-1of4 { @include column(1/4); }
.col-3of4 { @include column(3/4); }
.col-1of5 { @include column(1/5); }
.col-2of5 { @include column(2/5); }
.col-3of5 { @include column(3/5); }
.col-4of5 { @include column(4/5); }
.col-1of6 { @include column(1/6); }
.col-5of6 { @include column(5/6); }

.form-row { @include row($sm-gutter); }
.form-col-1of2 { @include column(1/2, $sm-gutter); }
.form-col-1of3 { @include column(1/3, $sm-gutter); }
.form-col-2of3 { @include column(2/3, $sm-gutter); }
.form-col-1of4 { @include column(1/4, $sm-gutter); }
.form-col-3of4 { @include column(3/4, $sm-gutter); }
.form-col-1of5 { @include column(1/5, $sm-gutter); }
.form-col-2of5 { @include column(2/5, $sm-gutter); }
.form-col-3of5 { @include column(3/5, $sm-gutter); }
.form-col-4of5 { @include column(4/5, $sm-gutter); }
.form-col-1of6 { @include column(1/6, $sm-gutter); }
.form-col-5of6 { @include column(5/6, $sm-gutter); }