A small and simple CSS gutter to create rows and cells using the flexbox model.
Homepage Repository Packagist Sass
A simple CSS gutter to create rows and cells using the flexbox model.
This package is available for composer and also for node.
Install rows by running $ composer require bitandblack/rows
and $ composer update
.
Install rows by running $ npm install bitandblack-rows
.
Install rows by running $ yarn add bitandblack-rows
.
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.
Rows supports the use of breakpoints. Those are defined as:
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;
}
}
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
Add the class bb-row--gutter-disabled
if you don't want to have a gutter at a specific place.
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>
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>
You can easily change or remove the prefix if you want by changing the value of $bb-rows-namespace
.
Use $bb-rows-gutter
to define the size of your gutter.
The breakpoints are stored in $bb-rows-breakpoints
which you can override if you want to.
The default rows number is set to 12
. You can change this by overriding the $bb-rows-row-number
.
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
.
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.
Feel free to contact us under rows@bitandblack.com
.