Responsive and lightweight grid for your sites with initstyle

For now, initstyle is a simplest grid system based on Flexbox. Coming soon will be a css framework with components and classes.

Basic example

<div class="row">
  <div class="col xs-12 sm-4 md-3 lg-4">
    <div class="block"></div>
  </div>
  <div class="col xs-12 sm-8 md-4 lg-4">
    <div class="block"></div>
  </div>
  <div class="col xs-12 sm-12 md-5 lg-4">
    <div class="block"></div>
  </div>
  <div class="col xs-12 sm-7 md-4 lg-2">
    <div class="block"></div>
  </div>
  <div class="col xs-12 sm-5 md-5 lg-5">
    <div class="block"></div>
  </div>
  <div class="col xs-12 sm-12 md-3 lg-5">
    <div class="block"></div>
  </div>
</div>

Documentation

You must specify the four available sizes (lg > 992px, md <= 992px, sm <= 768px, xs <= 576px)

Example: xs-12 sm-12 md-5 lg-4

There should always be an element with class 'row' that surrounds the columns, which will always contain the 'col' class. 

<div class="row">
  <div class="col">
    col with full width
  </div>
  <div class="col xs-12 sm-6 md-7 lg-8">
    <div class="block"></div>
  </div>
  <div class="col xs-12 sm-6 md-5 lg-4">
    <div class="block"></div>
  </div>
</div>

Note: The grid system allows up to 12 columns across the page.

How to use

To use, just download and add the file to your project