Grid Work - Breaks, Transitions, Types

Grid-Work---Breaks,-Transitions,-Types.markdown

Grid Work - Breaks, Transitions, Types

Shows how different grids break differently, how to transition the grids at break using SCSS & Compass, and grids with/without gutters.

A Pen by ezos86 on CodePen.

License.

index.html

<h1>Grid Work - Breaks,Transitions, Types</h1>
<h2 class="center">4 Columns</h2>
<div class="col-md-3 red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio vel commodi dolores deserunt in ipsam quam cupiditate exercitationem, non, maiores eveniet modi. Molestiae aliquam, omnis vel vitae eos fugit. Totam!</div>
<div class="col-md-3 blue">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio vel commodi dolores deserunt in ipsam quam cupiditate exercitationem, non, maiores eveniet modi. Molestiae aliquam, omnis vel vitae eos fugit. Totam!</div>
<div class="col-md-3 green">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio vel commodi dolores deserunt in ipsam quam cupiditate exercitationem, non, maiores eveniet modi. Molestiae aliquam, omnis vel vitae eos fugit. Totam!</div>
<div class="col-md-3 green">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio vel commodi dolores deserunt in ipsam quam cupiditate exercitationem, non, maiores eveniet modi. Molestiae aliquam, omnis vel vitae eos fugit. Totam!</div>
<div></div>
<h2 class="center">3 Columns No Gutters</h2>
<div class="col-md-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit ipsam eum blanditiis sint nihil commodi laborum obcaecati debitis nesciunt, vel nisi pariatur a id minima in, perspiciatis eveniet amet esse!</div>
<div class="col-md-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit ipsam eum blanditiis sint nihil commodi laborum obcaecati debitis nesciunt, vel nisi pariatur a id minima in, perspiciatis eveniet amet esse!</div>
<div class="col-md-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit ipsam eum blanditiis sint nihil commodi laborum obcaecati debitis nesciunt, vel nisi pariatur a id minima in, perspiciatis eveniet amet esse!</div>
<div></div>
<h2 class="center">3 Columns with Gutters</h2>
<div class="col-md-4 none">
  <div class="inner-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit ipsam eum blanditiis sint nihil commodi laborum obcaecati debitis nesciunt, vel nisi pariatur a id minima in, perspiciatis eveniet amet esse!</div>
</div>
<div class="col-md-4 none">
  <div class="inner-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit ipsam eum blanditiis sint nihil commodi laborum obcaecati debitis nesciunt, vel nisi pariatur a id minima in, perspiciatis eveniet amet esse!</div>
</div>
<div class="col-md-4 none">
  <div class="inner-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit ipsam eum blanditiis sint nihil commodi laborum obcaecati debitis nesciunt, vel nisi pariatur a id minima in, perspiciatis eveniet amet esse!</div>
</div>

style.scss

@import "compass/css3";
/*Variables*/
$gutter-size:5px;



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

*:after,*:before{
  content:'';
  display:block;
  clear:both;
  position:relative;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
  background: #EFEFEF;
}

h1{
  text-align:center;
  background-color:#333;
  line-height:50px;
  color:#fff;
  box-shadow: 0 2px 1px 1px #000;
}
h2{
  text-align:center;
  margin-top:20px;
}

.col-md-4{
  width:33.3%;
  float:left;
  padding:20px;
  background-color:#fff;
  border:1px solid #ccc;
  @include transition();
}

.col-md-4:after{
  height:3px;
  width:100%;
  background-color:red;
}

.inner-4{
  width:100%;
  padding:20px;
  background-color:#333;
  color:#fff;
}

.col-md-3{
  width:25%;
  float:left;
}

.col-md-3:after{
  clear:both;
}

.none{
  background-color:initial;
  border:none;
  padding:$gutter-size;
}


@media (min-width:300px) and (max-width:600px){
  .col-md-4{
    width:100%;
    background-color:#fff;
    float:left;
    padding:10px;
  }
}