Basic Grid System

basic-grid-system.markdown

Basic Grid System

Some SCSS to implement a very basic grid system. It is responsive over 2 breakpoints. Feel free to use this in your pens.

A Pen by Charles Ojukwu on CodePen.

License.

index.html

<header>
  <h1>Basic Grid System</h1>
  <p>Some SCSS to implement a very basic grid system. It is responsive over 2 breakpoints. Feel free to use this in your pens.</p>
</header>

<main class="container">
  <h2>Grid Examples</h2>
  <h3>Two Column Layout</h3>
  <div class="row">
    <div class="col-3">Left Sidebar</div>
    <div class="col-9">Main Content</div>
  </div>
  <div class="row">
    <div class="col-9">Main Content</div>
    <div class="col-3">Right Sidebar</div>
  </div>
  <h3>Three Column Layout</h3>
  <div class="row">
    <div class="col-3">Sidebar</div>
    <div class="col-6">Main Content</div>
    <div class="col-3">Sidebar</div>
  </div>
</main>

<footer>
</footer>

style.scss

$columns: 12;

*, *:before, *:after {
	box-sizing: border-box;
}

%clearfix {
  &:after, &:before {
    content: ' ';
    display: table;
  }
  &:after {
    clear: both;
  }
}

%container {
  padding: 0 0.5rem;
  margin: 0 auto;
}

%row {
  @extend %container;
  .row {
    @extend %clearfix;
  margin: 0 -0.5rem;
  padding: 0;
  }
}

.row {
  @extend %row;
}

.container {
  @extend %container;
}

%col {
  padding: 0.5rem;
}

@for $i from 1 through $columns {
  .col-#{$i} {
    @extend %col;
  }
}

@media screen and (min-width: 30rem) {
  @for $i from 1 through $columns {
    .col-#{$i} {
      float: left;
      width: 100% * ($i/$columns);
    }
  }
}