Alfredo Ramos

Alfredo Ramos

Personal GitHub page

Simple Grid System

  • development

A Simple SASS Grid System.

Build Status Latest Stable Version Code Quality License

Links:

Normal grid

<div class="container">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-11"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-10"></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8"></div>
</div>
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-7"></div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-7"></div>
<div class="col-md-5"></div>
</div>
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-9"></div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-10"></div>
<div class="col-md-2"></div>
</div>
<div class="row">
<div class="col-md-11"></div>
<div class="col-md-1"></div>
</div>
</div>

Offset grid

<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3 offset-md-auto"></div>
</div>
</div>

Order swap

<div class="container">
<div class="row">
<div class="col-md-4 order-md-12"></div>
<div class="col-md-8 order-md-1"></div>
</div>
</div>

Nested grids

<div class="container">
<div class="row center-md">
<div class="col-md-10">
<div class="row">
<div class="col-md-9 order-md-12"></div>
<div class="col-md-3 order-md-1"></div>
</div>
</div>
</div>
</div>

Mixed: mobile and desktop

<div class="container">
<div class="row">
<div class="col-xs-6 col-md-8"></div>
<div class="col-xs-6 col-md-4"></div>
</div>
</div>

Auto width

<div class="container">
<div class="row">
<div class="col-xs"></div>
<div class="col-xs"></div>
<div class="col-xs"></div>
<div class="col-xs"></div>
<div class="col-xs"></div>
</div>
</div>

Mixed: mobile and desktop alignment

<div class="container">
<div class="row top-sm middle-md bottom-lg">
<div class="col-xs"></div>
<div class="col-xs"></div>
<div class="col-xs"></div>
</div>
</div>

Responsive embedding

<div class="media">
<iframe class="media-item" src="https://www.youtube-nocookie.com/embed/SkVqJ1SGeL0?rel=0" allowfullscreen></iframe>
</div>
  • Last modified at