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


Keywords
css, components, scss, responsive, spaces, flexbox, breakpoints, gutter
License
MIT

Documentation

Codacy Badge License PHP version npm version

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.