Um simples framework para grids com flexbox

//HTML
<div class="row-flex">
    <div class="s6 m6 l6 xl6"> col 1 </div>
    <div class="s6 m6 l6 xl6"> col 2 </div>
<div>

//STYLE
.s6, m6, l6, xl6 {
    flex-basis: 50%;
}

Simples e leve

O princípio do gridflex é a simplicidade e a leveza. Contém apenas estilos básicos capazes de criar qualquer tipo de site responsivo usando flexbox.

Poderoso e rápido

Já baixou bootstrap e acabou usando somente o sistema de grid? o Gridflex tem a proposta de auxiliar somente na dolorosa tarefa de tornar sites responsivos, nada mais que isso.

Moderno e compatível

Veja a compatibilidade do flexbox nos navegadores aqui

4 níveis de grid

s1
s1
s1
s1
s1
s1
s1
s1
s1
s1
s1
s1
m1
m1
m1
m1
m1
m1
m1
m1
m1
m1
m1
m1
l1
l1
l1
l1
l1
l1
l1
l1
l1
l1
l1
l1
xl1
xl1
xl1
xl1
xl1
xl1
xl1
xl1
xl1
xl1
xl1
xl1

Breakpoints

s small

@media screen and (max-width: 600px)

m medium

@media screen and (min-width: 601px)

l large

@media screen and (min-width: 992px)

xl extra large

@media screen and (min-width: 1600px)

Exemplo

//HTML
<div class="row-flex">
    <div class="s12 m4 l4 xl4"> s12 m2 l4 xl3 </div>
    <div class="s12 m4 l4 xl4"> s12 m2 l4 xl3 </div>
    <div class="s12 m4 l4 xl4"> s12 m2 l4 xl3 </div>
<div>

class="s12 m2 l4 xl3"
class="s12 m2 l4 xl3"
class="s12 m2 l4 xl3"

Offsets

offset-l11
offset-l10
offset-l9
offset-l8
offset-l7
offset-l6
offset-l5
offset-l4
offset-l3
offset-l2
offset-l1

Align contents

xleft-ytop
xcenter-ytop
xright-ytop
xleft-ycenter
xcenter-ycenter
xcenter-ycenter
xleft-ybottom
xleft-ybottom
xleft-ybottom

Isso é tudo, o resto é por conta da sua criatividade ;)