Go back to the main page

Bourbon Neat basic example including scss code

This article is over 2 years old. Proceed with caution.

Regards ♨ – Minimul

 

Based on the first example from the Bourbon Neat examples.

.html


<section class="zero">
 <code>@include outer-container;</code>
 <div id="alpha">
   <code>@include span-columns(6);</code>
 </div>
 <div id="beta">
   <code>@include span-columns(6);</code>
 </div>
</section>

.scss


.zero {
  @include outer-container;
  background: tint(blue, 95%);
  text-align: center;
  padding: 1em 0;
  > code {
    display: block;
    padding: em(12);
  }
  #alpha, #beta {
    @include span-columns(6);
    text-align: left;
    background: tint(blue, 70%);
    padding: 1em;
    > code {
      display: block;
      height: 100px;
    }
  }
}

Equals this:

 

Comment on this article?