stylint/styl/flex.styl

A linter for stylus

/**
 * Grid system, flexbox specs
*/


/**
 * @desc takes our gutter-medand total columns and builds us a grid
 */
col-width( $index )
    $first-value = floor( (100% / $columns) * $index )
    $second-value = unit( round( ($gutter-med / ($columns / $index) - $gutter-med) - 1, 3), 'px' )
    $final-value = s( 'calc(%s + %s)', $first-value, $second-value )
    return $final-value


/**
 * columns, duh.
 * all columns will have this class
 * so as to target them better without regex
 */
.col
    position relative

    @media $mob-plus
        &.last,
        &:last-child
            margin-right 0


// row = clearfix basically, no flexbox
.row,
.flex-row
    @extends $clearfix
    margin-left auto
    margin-right auto
    width 100%


// row + flexbox functionality
.flex-row
    flex-row()


/**
 * loops through all columns, outputs grid for all breakpoints
 * @TODO right now there are 4 main breakpoints. mob sm med big
         we could prolly live with 3.
 */
for i in ( 1 )..( $columns )
    // mobile grid
    @media $mob
        .mob-col-{i}
            width col-width( i )
        .mob-order-{i}
            order i

    // small tablet grid
    @media $sm
        .sm-col-{i}
            width col-width( i )
        .sm-order-{i}
            order i

    // tablet to small laptop/desktop grid
    @media $med
        .med-col-{i}
            width col-width( i )
        .med-order-{i}
            order i

    // big laptop and above
    @media $big-plus
        .big-col-{i}
            width col-width( i )
        .big-order-{i}
            order i

    /**
     * stuff below this point are height based queries
     */

    // below 800px tall
    @media $short
        .short-order-{i}
            order i

    // below 1000px tall
    @media $tall
        .tall-order-{i} // HA HA HA HA HA HA  GET IT
            order i

    // tablet and below 800px tall
    @media $short-tab
        .short-tab-order-{i}
            order i

    // tablet and below 1000px tall
    @media $tall-tab
        .tall-tab-order-{i}
            order i


// mobile only flexbox
@media $mob
    .mob-flex-row
        flex-row()


// all columns past mobile size float by default
@media $mob-plus
    .flex-row
        flex-direction horizontal
    .col
        float left
        margin-right $gutter-med
        &.reverse
            float right
            margin-left $gutter-med
            margin-right 0


// @TODO i feel like there must be a less verbose way of setting these
// small tablet overrides
@media $sm
    .sm-flex-row
        flex-row()
        flex-direction horizontal
    .sm-col-{$columns}
        margin-right 0 !important
        .title.exchange
            font-family $exchange


// big tablet overrides
@media $med
    .med-flex-row
        flex-row()
        flex-direction horizontal
    .med-col-{$columns}
        margin-right 0 !important
        .title.exchange
            font-family $exchange
root::
    what

// desktop overrides
@media $big-plus
    .big-flex-row
        flex-row()
        flex-direction horizontal
    .big-col-{$columns}
        margin-right 0 !important
        .title.exchange
            font-family $exchange