SimpletonGrid

How do I use it?

      
      <!-- .container is the main wrapper which can be centered with the .center helper class -->
      <div class="container center">
       
      <!-- rows are initiated with the .simple-row class and gutters can be applied with the .gutters helper class -->
        <div class="simple-row gutters">
        <!-- columns should be immediate children of rows and are created with the .simple-col class -->
          <div class="simple-col">1/4</div>
          <div class="simple-col">1/4</div>
          <div class="simple-col">1/4</div>
          <div class="simple-col">1/4</div>
        </div>
         
        <!-- Since the layout is determined by the number columns added and flexbox will distrubuite evenly, there are a few one-off classes for uneven columns -->
        <div class="simple-row gutters">
          <div class="simple-col-one-qt">25%</div>
          <div class="simple-col-one-qt">25%</div>
          <div class="simple-col-half">50%</div>
        </div>
         
        <div class="simple-row gutters">
          <div class="simple-col-one-qt">25%</div>
          <div class="simple-col-three-qt">75%</div>
        </div>
         
      </div>
      
    

• Simpleton comes with two helper classes: .center and .gutters
• .container is the main wrapper for your layout and is available in 3 sizes: .container-sm (960px) - .container (1200px) - .container-lg (1400px)
• .simple-col will always fill 100% of container unless a one-off class is used.
• BONUS: holy grail layout available with these classes: hg-left,  hg-center,  hg-right.