flexbox-grid

Flexbox-grid is a CSS grid module based on flexbox. The goal is to have a light, simple, flexible and responsive grid layout to start a project quickly. This is basic for the moment but i'm going to improve it.

Since it is based on flexbox, it is only compatible with recent browsers. You can check the full compatibility table on caniuse.com.

Example

By default, a 12 columns grid is provided. We will see later how to customize it. For now, here is a simple example where we want a full width header, a 8/12 column for the main content and a 4/12 column for a sidebar and finally a full width footer :

<header class="header row">
  <div class="col">This is my header</div>
</header>
<section class="content row">
  <section class="main-content col-8">
    <p>This is my main content</p>
  </section>
  <aside class="sidebar col-4">
    <p>And this is my sidebar</p>
  </aside>
</section>
<footer class="footer row">
  <div class="col">
    This is my footer
  </div>
</footer>

Customize

In scss/mingrid.scss you can find variables. You can change values and compile the file into CSS using gulp by running "gulp compile" provided in the gulpfile.js or using your favorite tool.

Licence

You know what? I don't know how to select a licence for my project. I'm thinking about it. So for the moment there is no licence. Use it, copy it, tell everybody you made it. I don't care. But if you know how to improve my work, see a bug or whatever, please open an issue.