Rows

A simple CSS gutter to create rows and cells using the flexbox model.

Installation

This package is available for composer and also for node.

Composer

Install rows by running $ composer require bitandblack/rows and $ composer update.

NPM

Install rows by running $ npm install bitandblack-rows.

Yarn

Install rows by running $ yarn add bitandblack-rows.

Getting started

Rows uses 12 units each row per default.

Simply add the class bb-row to a HTML container tag. The cells should get the class bb-row__cell. For example:

<div class="bb-row">
    <div class="bb-row__cell"></div>
    <div class="bb-row__cell"></div>
    <div class="bb-row__cell"></div>
</div>

Think about using another container to center these rows.

Use one of the modifier classes (like bb-row__cell--cell2) to define how many units a cell will take. For example:

<div class="bb-row">
    <div class="bb-row__cell bb-row__cell--cell2">
        Uses 2 units.
    </div>
    <div class="bb-row__cell bb-row__cell--cell6">
        Uses 6 units.
    </div>
    <div class="bb-row__cell bb-row__cell--cell4">
        Uses 4 units.
    </div>
</div>

Use classes like bb-row__cell--rightMarginCell1 to define empty units to the left or to the right of a cell.

Use classes like bb-row__cell--order2 to define the sort order of cells in case you want to use breakpoints and sort differently then.

Breakpoints

Rows supports the use of breakpoints. Those are defined as:

• x-small: 480px
• small: 736px
• medium: 980px
• large: 1280px
• x-large: 1680px

Simply add them at the beginning of the modifiers class name. For example:

<div class="bb-row">
    <div class="bb-row__cell bb-row__cell--cell12 bb-row__cell--medium-cell6 bb-row__cell--large-cell4">
        Uses 12 units as base setting, 6 units in medium and 4 units in large.
    </div>
    <div class="bb-row__cell bb-row__cell--cell12 bb-row__cell--medium-cell3 bb-row__cell--large-cell4">
        Uses 12 units as base setting, 3 units in medium and 4 units in large.
    </div>
    <div class="bb-row__cell bb-row__cell--cell12 bb-row__cell--medium-cell3 bb-row__cell--large-cell4">
        Uses 12 units as base setting, 3 units in medium and 4 units in large.
    </div>
</div>

You can also use the breakpoints as functions in SCSS by writing bb-rows-breakpoint-up or bb-rows-breakpoint-down for example:

div {
    display: block;
    
    @include bb-rows-breakpoint-up(x-small) {
        display: none;
    }
}

Spaces

There's a smell of bootstrap in Rows: To define a margin or a padding dependent on a breakpoint, simply add something like bb-mt-medium-5. You can use

• bb-m to set a margin from 0 to 5
• bb-mx to set a margin-left and margin-right from 0 to 5
• bb-mt to set a margin-top from 0 to 5
• bb-mr to set a margin-right from 0 to 5
• bb-mb to set a margin-bottom from 0 to 5
• bb-ml to set a margin-left from 0 to 5
• bb-p to set a padding from 0 to 5
• bb-px to set a padding-left and padding-right from 0 to 5
• bb-pt to set a padding-top from 0 to 5
• bb-pr to set a padding-right from 0 to 5
• bb-pb to set a padding-bottom from 0 to 5
• bb-pl to set a padding-left from 0 to 5

Options

Gutter

Add the class bb-row--gutter-disabled if you don't want to have a gutter at a specific place.

Fit one row

If you have an unknown number of cells or a number which doesn't maches your number of columns, add the class bb-row--fit-row. The cells only need bb-row__cell then and will result with the same width in one row.

<div class="bb-row bb-row--fit-row">
    <div class="bb-row__cell">
        <div>Auto size, all cells in one row</div>
    </div>
    <div class="bb-row__cell">
        <div>Auto size, all cells in one row</div>
    </div>
    <div class="bb-row__cell">
        <div>Auto size, all cells in one row</div>
    </div>
    <div class="bb-row__cell">
        <div>Auto size, all cells in one row</div>
    </div>
    <div class="bb-row__cell">
        <div>Auto size, all cells in one row</div>
    </div>
</div>

Flexible width

Sometimes the cells need a flexible width. In this case add the class bb-row__cell--width-flexible.

<div class="bb-row">
    <div class="bb-row__cell bb-row__cell--width-flexible">
        <div>Auto width as wide as possible</div>
    </div>
    <div class="bb-row__cell">
        <div>Auto size fitting the content</div>
    </div>
</div>

Customization

Namespace

You can easily change or remove the prefix if you want by changing the value of $bb-rows-namespace.

Gutter

Use $bb-rows-gutter to define the size of your gutter.

Breakpoints

The breakpoints are stored in $bb-rows-breakpoints which you can override if you want to.

Rows number

The default rows number is set to 12. You can change this by overriding the $bb-rows-row-number.

Order classes

Per default the number of order classes will be the same as the number of rows. If you need more of them you can define that by overriding $bb-rows-order-number.

Spaces

All the space classes are using rem per default. The smallest unit is 1rem. You can change this by setting $bb-rows-spaces-unit to a different value.

Help

Feel free to contact us under rows@bitandblack.com.