generateFlexGrid($name = 'sm', $columns = 12)
    $classSelector = \' + 'flex-' + $name + \'
    [class*={$classSelector}]
        padding 0 10px
    for $x in 1..$columns
        .flex-{$name}-{$x}
            flex 0 0 round(1% * (($x / $columns) * 100), 2)

.flex-row
    display flex
    flex-wrap wrap
    margin 0 auto
    max-width $large-screen

// automatically calculate size (can be overwritten by any classes below this)
.flex-auto
    flex 1
    padding 0 10px

// for small screens/default size
generateFlexGrid()

// for medium sized screens
@media (min-width $medium-screen)
    generateFlexGrid('md')

// for larger screens
@media (min-width $large-screen)
    generateFlexGrid('lg')

generateFlexGrid($name = 'sm', $columns = 12)
    $classSelector = \' + 'flex-' + $name + \'
    [class*={$classSelector}]
        padding 0 10px
    for $x in 1..$columns
        .flex-{$name}-{$x}
            flex 0 0 round(1% * (($x / $columns) * 100), 2)

.flex-row
    display flex
    flex-wrap wrap
    margin 0 auto
    max-width $large-screen

// automatically calculate size (can be overwritten by any classes below this)
.flex-auto
    flex 1
    padding 0 10px

// pull content to the right
.flex-pull-row-right
    justify-content flex-end

// pull content to the center
.flex-pull-row-center
    align-items center
    justify-content center

// TODO: Add column layouts

// for small screens/default size
generateFlexGrid()

// for medium sized screens
@media (min-width $medium-screen)
    generateFlexGrid('md')

// for larger screens
@media (min-width $large-screen)
    generateFlexGrid('lg')

Add helper classes for flexbox grid layouts
Add helper classes for flexbox grid layouts
