Responsive SASS/CSS Grid

CSS Grid - 12 Columns with Gutters - 15px

by Ben Graham

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section class="container">
  <div class="wrapper">
    <div class="one">
      <div class="gutter">
        <p>col-1</p>
      </div>
    </div>
    <div class="two">
      <div class="gutter">
        <p>col-2</p>
      </div>
    </div>
    <div class="three">
      <div class="gutter">
        <p>col-3</p>
      </div>
    </div>
    <div class="four">
      <div class="gutter">
        <p>col-4</p>
      </div>
    </div>
    <div class="five">
      <div class="gutter">
        <p>col-5</p>
      </div>
    </div>
    <div class="six">
      <div class="gutter">
        <p>col-6</p>
      </div>
    </div>
    <div class="seven">
      <div class="gutter">
        <p>col-7</p>
      </div>
    </div>
    <div class="eight">
      <div class="gutter">
        <p>col-8</p>
      </div>
    </div>
    <div class="nine">
      <div class="gutter">
        <p>col-9</p>
      </div>
    </div>
    <div class="ten">
      <div class="gutter">
        <p>col-10</p>
      </div>
    </div>
    <div class="eleven">
      <div class="gutter">
        <p>col-11</p>
      </div>
    </div>
    <div class="last">
      <div class="gutter">
        <p>col-12</p>
      </div>
    </div>
  </div>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Ben's Demo</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
     ...

SCSS

$grid-color: #fa0087;
.navbar {
 position: fixed;
 top:0px;
 width: 100%;;
 z-index:7
}
.gutter p {
 display:flex;
font-size: 12px;
font-size: 1.2rem;
justify-content:center;
align-items: center;
}
button.btn-success {
  position: absolute;
  left: 45%;
  bottom: 0;
	z-index: 333;
}

  .one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.ten,.eleven,.last  {
  display: none;
}
.wrapper{
  height: 100vh;
  z-index: 222;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-flex-direction: row;
  flex-direction: row;
  .one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.ten,.eleven,.last {
    display: flex;
    height: 100vh;
    width: 12%;
    border-left: .2rem solid $grid-color;
    border-right: .2rem solid $grid-color;
    -webkit-flex: 1;
    flex: 1;
		z-index:222;
  }
  .gutter {
    margin: 0px 15px;
		display: flex;
    height: 100vh;
    width: 12%;
    border-left: 1px inset $grid-color;
    border-right: 1px inset $grid-color;
    -webkit-flex: 1;
  justify-content: center;
  align-items:center;
    flex: 1;
  }
}
.container div.first {
	border-left: .4rem solid $grid-color;
	}
	.container div.last {
		border-right: .4rem solid $grid-color;	
	}

JavaScript

$("button.btn-success").click(function() {
  $(".wrapper div").toggle('fast');
});