ava-michaelf / bare-bones

One heck of a css flex-based grid system for developing responsive projects

Bare Bones

Screw floats, so equip your website with a flex-based CSS layout for that perfect responsive design we all know and love.

How To Use

For in-depth documentation, head over to the docs.

Bare Bones uses CSS's flex property, giving you the ability of a flex item to alter its dimensions to consume the space around it.

The grid system is comprised of a percent-based column layout, classes prefixed with .flex-c-. To ensure a cohesive layout, create a .flex-row class and embed as many columns as desired so long as they add up to 100.

Example:

<div class="flex-wrap">
  <div class="flex-row">
    <div class="flex-c-33">33%</div>
    <div class="flex-c-33">33%</div>
    <div class="flex-c-33">33%</div>
  </div>
</div>

Contributors

Bare Bones was developed by Michael Ferrell and with small but impactful tweaks by Dylan Grafmyre.