NimbleCSS

Simple grid system

Download this project as a .zip file Download this project as a tar.gz file

Welcome to NimbleCSS

In practice, very often required to build the project from the centering of the base layer, and for the location of the content to use the grid. For tasks that just use a grid of four columns, I propose to use my NimbleCSS.

Advantages

4 column layout,
readable code,
first-mobile,
without js,
pure css,
1.2 KB

Description

NimbleCSS is a convenient system for positioning content on the page by using the base layer and the grid. The maximum available default number of columns is four. The behavior of the elements depends on the width of the screen, there are control points 320px, 480px, 768px, 992px and 1200px. You can change the width of your browser, in order to clearly see the NimbleCSS in action. By default, the width of the base layer on the desktop-version is 80%.

How it use

Shape the structure you need, depending on the task in progress:

<div class="row">
  <div class="block col-4 demo_example"><h3>Examples</h3>Example of implementation №1:</div>
</div>
<div class="row">
  <div class="block col-4">This row is always holds 4 columns, independently of the width of the screen width.</div>
</div>
<div class="row">
  <div class="block col-4 demo_example">Example of implementation №2:</div>
</div>
<div class="row">
  <div class="block col-2">The two columns on the left...</div>
  <div class="block col-2">The two columns on the right...</div>
</div>
<div class="row">
  <div class="block col-4 demo_example">Example of implementation №3:</div>
</div>
<div class="row">
  <div class="block col-1">1 column to the left</div>
  <div class="block col-3">3 column to the right</div>
</div>

Add the contents of the file nimblecss.css in your stylesheet file.

Examples

Example of implementation №1:

This row is always holds 4 columns, independently of the width of the screen width.

Example of implementation №2:

The two columns on the left, when the screen width is less than 480px - occupies all width of the screen

The two columns on the right, when the screen width is less than 480px - occupies all width of the screen

Example of implementation №3:

1 column to the left

3 column to the right

Contact with me

Having trouble with NimbleCSS? It is unlikely. But if you still have any questions, write to me on e-mail: mail@shilgen.ru