SomeGrids ^{v 1.2.9}

demo page - http://mikaspell.github.io/SomeGrids/

This grid is made on different types of building columns , allowing automatic output elements using cms (eg output of goods in the category of online store) becomes simple as cheese =)

Sooooo, SomeGrids have display types:

• Inline
• Float
• Flex

aaand responsive ready on every type

The size of the compiled css in expanded style 3.44kb

Install

Installation is very simple:

bower install some-grids

Basic Grid HTML

<div class="wrapper">
  <div class="box float||inline||flex">
    <div class="sgrid-6">Something</div>
    <div class="sgrid-6">Something else</div>
  </div>
</div>

float or inline or flex

Pre-grid

Move columns to the right using .pre-* classes. Each class increases the left margin of a column by a whole column. For example, .pre-3 moves .sgrid-* over three columns.

<div class="wrapper">
  <div class="box float||inline||flex">
    <div class="sgrid-4 pre-2">Something</div>
    <div class="sgrid-3 pre-3">Something else</div>
  </div>
</div>

Work when not adaptive grids

Post-grid

And you may move columns to the left using .post-* classes. Also each class increases the right margin of a column by a whole column. For example, .post-5 moves .sgrid-* over five columns.

<div class="wrapper">
  <div class="box float||inline||flex">
    <div class="sgrid-1 post-5">Something</div>
    <div class="sgrid-4 post-2">Something else</div>
  </div>
</div>

Work when not adaptive grids

Nested columns

To nest your content with the default grid, add a new .box with columns type inline||float||flex and set of .sgrid-* columns within an existing .sgrid-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

I recommend nest:

• inline-columns to float-column
• float-columns to float-column

<div class="wrapper">
  <div class="box float">
    <div class="sgrid-3">Something</div>
    <div class="sgrid-9">
      Parent column .sgrid-9
      <div class="box inline">
        <div class="sgrid-6">Nested columns .sgrid-6</div>
        <div class="sgrid-6">Nested columns .sgrid-6</div>
      </div>
    </div>
  </div>
</div>

Adaptive ^NEW

Haven't description, but this work - checkout!!!

##Simple, Awesome & Fast

Oh, all this free as snow in your pants