Some Grids ^v1.1.3

The size of the compiled css in expanded style 3.44kb

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

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

Simple Example

Code

<div class="demo">
						  <div class="box float">
						    <div class="sgrid-3">
						      <div class="demo-item">.sgrid-3 column</div>
						    </div>
						    <div class="sgrid-3">
						      <div class="demo-item">.sgrid-3 column</div>
						    </div>
						    <div class="sgrid-3">
						      <div class="demo-item">.sgrid-3 column</div>
						    </div>
						    <div class="sgrid-3">
						      <div class="demo-item">.sgrid-3 column</div>
						    </div>
						  </div>
						</div>

Nesting 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).

Code

<div class="demo">
						  <div class="box float">
						    <div class="sgrid-9">
						      <div class="demo-item">
						        <p>float-type .sgrid-9 column</p>
						        <div class="box inline">
						          <div class="sgrid-3">
						            <div class="demo-item demo-item--sub">
						              inline-type .sgrid-3 column
						            </div>
						          </div>
						          <div class="sgrid-3">
						            <div class="demo-item demo-item--sub">
						              inline-type .sgrid-3 column
						            </div>
						          </div>
						          <div class="sgrid-3">
						            <div class="demo-item demo-item--sub">
						              inline-type .sgrid-3 column
						            </div>
						          </div>
						          <div class="sgrid-3">
						            <div class="demo-item demo-item--sub">
						              inline-type .sgrid-3 column
						            </div>
						          </div>
						          <div class="sgrid-2">
						            <div class="demo-item demo-item--sub">
						              inline-type .sgrid-2 column
						            </div>
						          </div>
						          <div class="sgrid-4">
						            <div class="demo-item demo-item--sub">
						              inline-type .sgrid-4 column
						            </div>
						          </div>
						          <div class="sgrid-5">
						            <div class="demo-item demo-item--sub">
						              inline-type .sgrid-5 column
						            </div>
						          </div>
						          <div class="sgrid-1">
						            <div class="demo-item demo-item--sub">
						              .sgrid-1
						            </div>
						          </div>
						          <div class="sgrid-6">
						            <div class="demo-item demo-item--sub">
						              inline-type .sgrid-6 column
						            </div>
						          </div>
						          <div class="sgrid-6">
						            <div class="demo-item demo-item--sub">
						              inline-type .sgrid-6 column
						            </div>
						          </div>
						        </div>
						      </div>
						    </div>
						    <div class="sgrid-3">
						      <div class="demo-item">float-type.sgrid-3 column</div>
						    </div>
						  </div>
						</div>

- parent column    - nested column

I recommend nest:

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

Move columns

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.

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.

Code

<div class="demo">
						  <div class="box float">
						    <div class="sgrid-4 pre-4">
						      <div class="demo-item">.sgrid-4 .pre-4</div>
						    </div>
						    <div class="sgrid-4">
						      <div class="demo-item">.sgrid-4</div>
						    </div>
						  </div>
						  <div class="box float">
						    <div class="sgrid-4 post-6">
						      <div class="demo-item">.sgrid-4 .post-6</div>
						    </div>
						    <div class="sgrid-2">
						      <div class="demo-item">.sgrid-2</div>
						    </div>
						  </div>
						</div>

Simple, Awesome & Fast

What about Flex-type? Nothing special, but use this type in modern projects.