SimpleCSS

A simple minimalistic CSS framework that uses flexbox grid.

Please, do not expect anything from the framework, cause I am not sure what I am doing.

Normalize.css

First of all, include normalize.css file from src in the project to normalize browser behavior. Refer to Normalize.css for more details.

Row, Column, Tower and Container

The whole flexbox system depends on the following four classes: container, tower, row, col.

'container' is a vertical flex-container. Originally it was a class to determine the width of the site, but later turned into flex only for one reason: sticky footer. The container should be used to create stick-footer only. It should appear right after body tag only and no where else.

In case we need vertical flex-container, we can use tower. It is a flex-container and if nested in another container will also act as flex item.

row is a horizontal flex-container, which can act as a container if nested.

item is flex-item only.

one, two, three ... twelve and any

The literal numbers one, two and such forms the basis of the flex items. any means there is no fixed basis, it will dynamically allocate the basis like a normal flexbox.

Sticky Footer

Based on the article Sticky Footer, the following will create sticky footer:

<div class="container">

  <header class="row">
  </header>

  <main class="u-flex">
  </main>

  <footer class="row">
  </footer>

</div>

Note the u-flex class on main tag. That class forces the main tag to use up all the empty space around, thus pushing the footer to bottom.