corbo

Introduction

I created Corbo because I often found myself frustrated with the layout possibilities offered by the different frameworks I was using. As a result, I often resorted to copy-pasting custom flexbox code I wrote from project to project, and it quickly became hard to maintain. I know there are other flexbox libraries out there, but none of them offered the features I needed whilst being dead simple. So that's why I wrote corbo, the definitive flexbox library. It can create any layout you want, you only need to use CSS classes (you don't have to write any CSS code), everything can be customized (but it doesn't have to be). And before you say anything, yes I know about that XKCD comic.

OK, are you ready to give it a shot?

Getting started

Installation

Install corbo via npm:

npm install --save corbo

and import it in your app if you use a module bundler (like Webpack, or Rollup).

import from 'corbo'

Components

With corbo, you define components using CSS classes. For example, this will define a simple row:

<div class="flex-row"></div>

There are only a handful components in corbo, but they will allow you to make the most complex layouts in the simplest way. Let's get started with the containers.

Row

A row is a simple container which stack its children in a row, forming columns.

<div class="flex-row"></div>

Inside a row, there is no CSS class to add to the row's children. Every child will stack in the row, taking only the space required by its content.

<div class="flex-row">
  <div></div>
  <div></div>
  <div></div>
</div>

However, if you want one or several of the row's children to take as much space as available, just add the flex-item class to them.

<div class="flex-row">
  <div></div>
  <div class="flex-item">flex-item</div>
  <div></div>
</div>

Column

A column is equivalent to a row, the only difference residing in items stacking vertically instead of horizontally. It is declared using the flex-column (or flex-col) class.

<div class="flex-col"></div>

Like rows' children, columns' children don't need any special class to work.

<div class="flex-col">
  <div></div>
  <div></div>
  <div></div>
</div>

As for a row container, if you need one of the column's children to take as much as possible, just add a flex-item class to it. However, as block elements have they height property set to auto by default, adding this class will have no effect if the column does not have a fixed height.

<div class="flex-col" style="height: 200px">
  <div></div>
  <div class="flex-item">flex-item</div>
  <div></div>
</div>

Grid

A grid is a component which allows you to have control over the size and the number of items per line to be displayed. Contrary to a row or a column, which just stack items on the same line, a grid will let you define how many items should be displayed before wrapping, and how much space they should take. It's perfect for designing a global layout, or displaying an image gallery. A grid is defined using the flex-grid-{GRID_SIZE}, where GRID_SIZE is the number of items each line will have.

<div class="flex-grid-3"></div>

Like a row or a column's children, a grid's children do not need any special CSS class. Each child will take 1/GRID_SIZE of the grid's available space.

<div class="flex-row flex-grid-3">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

You can create a grid of any size, by changing GRID_SIZE. The idea behind that is to avoid any useless mental calculation. If you have a design which features 3 columns, why would you need to create 3 col-4 columns? Many other CSS frameworks use a 12 columns grid, but some even use a 24 columns, like Ant Design. This is unnecessary, and makes your code harder to understand. If you want to use non-standard grid sizes, like 24, or even 100 if you need to think in percentages, you might need to customize corbo to generate the necessary code. Default sizes include 2, 3, 4, 12 columns.

<div class="flex-row flex-grid-4">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

If you need to have items of different sizes inside your grid, that's easy! Just add a flex-item-{ITEM_SIZE} where ITEM_SIZE is an integer between 1 and GRID_SIZE. The item on which you apply the class will logically take ITEM_SIZE/GRID_SIZE of the grid's available space. The flex-item-1 class corresponds to the default size for items on which you do no not specify a class.

<div class="flex-row flex-grid-3">
  <div class="flex-item-1">flex-item-1</div>
  <div class="flex-item-2">flex-item-2</div>
  <div class="flex-item-3">flex-item-3</div>
  <div class="flex-item-2">flex-item-2</div>
  <div class="flex-item-1">flex-item-1</div>
  <div class="flex-item-1">flex-item-1</div>
  <div class="flex-item-1">flex-item-1</div>
  <div class="flex-item-1">flex-item-1</div>
</div>

Spacing

You might want to add some spacing to your components. Corbo has helper classes that will help you add gutter to your row, grid or column. A spacing is applied using the flex-spacing-{SIZE} where size is an integer, creating a gutter of {SIZE}rem between items. Available spacing sizes are 1, 2 by default but you can add more through customization. Contrary to most CSS frameworks, the gutter is creating by setting a margin on items, leaving you complete control over the items' padding.

Spacing can be applied on rows:

<div class="flex-row flex-spacing-1">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="flex-row flex-spacing-2">
  <div></div>
  <div class="flex-item">flex-item</div>
  <div></div>
</div>

columns,

  <div class="flex-col flex-spacing-1">
  <div></div>
  <div></div>
  <div></div>
</div>

Or grids:

<div class="flex-grid-3 flex-spacing-1">
  <div class="flex-item-1">flex-item-1</div>
  <div class="flex-item-2">flex-item-2</div>
  <div class="flex-item-3">flex-item-3</div>
  <div class="flex-item-2">flex-item-2</div>
  <div class="flex-item-1">flex-item-1</div>
  <div class="flex-item-1">flex-item-1</div>
  <div class="flex-item-1">flex-item-1</div>
  <div class="flex-item-1">flex-item-1</div>
</div>

Alignment

Corbo also has helper classes to align items inside containers (rows, columns or grids). All items can be aligned along the main axis, and the cross axis. An alignment is defined using the flex-align-{MAIN_AXIS}[-{CROSS_AXIS}] class, where MAIN_AXIS can take any value among start, end, center, around, between and CROSS_AXIS, any value among start, end, center, stretch. If MAIN_AXIS and CROSS_AXIS are equal, the class can be shorthanded to flex-align-{MAIN_AXIS}.

⚠ Alignment properties affecting the vertical axis (cross axis of a row, or main axis of a column) might not have any effect if the container element does not have a custom height.

Here is a list of all available values:

• flex-start-start (or flex-start)
• flex-start-end
• flex-start-center
• flex-start-stretch
• flex-end-start
• flex-end-end (or flex-end)
• flex-end-center
• flex-end-stretch
• flex-center-start
• flex-center-end
• flex-center-center (or flex-center)
• flex-center-stretch
• flex-around-start
• flex-around-end
• flex-around-center
• flex-around-stretch
• flex-between-start
• flex-between-end
• flex-between-center
• flex-between-stretch

<div class="flex-row flex-align-around-start">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="flex-col flex-align-between-center" style="height: 200px">
  <div></div>
  <div></div>
  <div></div>
</div>

Responsive

Wrapping and the flex-item utility class help you create fluid layouts.

However, if you need a more fine-grained control, Corbo also features helper classes to control grids' responsive behaviour. They are declared using: flex-grid-{BREAKPOINT}-{SIZE} where BREAKPOINT is the name of the desired breakpoint.

By default, there are 5 breakpoints (this can be customized):

⚠ Responsive classes apply to all devices equal or bigger than the one matching the class you use.

Customization

Support

Inspiration