Novicell Flexbox Grid ⚡

Table of contents

Overwritable CSS Custom Properties and media-queries

The following CSS Custom Properties can be overwritten inside your project. See README.MD on how to do it.

/* Gutters and padding */
--flexbox-grid-section-margin: 50px;
--flexbox-grid-container-width: 1200px;
--flexbox-grid-container-spacing: 40px;
--flexbox-grid-half-gutter-width: 15px;
--flexbox-grid-half-gutter-width--mobile: 15px;

/* Media Queries (definition has to be outside any kind of blocks - see https://github.com/postcss/postcss-custom-media) */
@custom-media --viewport-ms-min (min-width: 576px);
@custom-media --viewport-sm-min (min-width: 768px);
@custom-media --viewport-md-min (min-width: 992px);
@custom-media --viewport-lg-min (min-width: 1200px);
@custom-media --viewport-xl-min (min-width: 1400px);

Sections, rows and containers

These classes can be used to contain your columns and structure your content.

Example

Reverse columns with .row--reverse

.col-xs-4 (1)
.col-xs-4 (2)
.col-xs-4 (3)
Containers (resize window to see behavior)

.container
.container .container--fluid
.grid-section

column inside section 1
column inside section 1
column inside section 2


Available classes

<!-- Sections -->
<div class="grid-section"></div>

<!-- Containers -->
<div class="container"></div>
<div class="container container--fluid"></div>

<!-- Rows-->
<div class="row"></div>
<div class="row row--reverse"></div>

Columns

Columns are used to size and align your content. Colums are structured in a grid of 12 spaces per row.

Comes in breakpoints xs, ms, sm, md, lg & xl

Example


Responsive columns
.col-xs-12 .col-sm-8 .col-lg-6
Column offset
.col-xs-6. col-xs-offset-3
.col-xs-3 .col-xs-offset-1
.col-xs-3 .col-xs-offset-1
Auto colums
.col-xs-4
.col-xs

.col-xs .col-xs--nogrow

.col-xs .col-xs--nogrow

This columns has a lot of text that will force the element to grow in size.

.col-xs .col-xs--nogrow

.col-xs .col-xs--nogrow

This columns has a lot of text that will force the element to grow in size. It won't fit next to the other column.
Auto colums with breakpoint (resize to see behavior)
.col-xs-12 .col-md
.col-xs-12 .col-md
.col-xs-12 .col-md
.col-xs-12 .col-md

Available classes

<!-- Sizes -->
<div class="col-xs-1"></div>
<div class="col-xs-2"></div>
<div class="col-xs-3"></div>
<div class="col-xs-4"></div>
<!-- Continues up to 12 -->

<!-- Offset -->
<div class="col-xs-offset-1"></div>
<div class="col-xs-offset-2"></div>
<div class="col-xs-offset-3"></div>
<div class="col-xs-offset-4"></div>
<!-- Continues up to 12 -->

<!-- Auto colums -->
<div class="col-xs"></div>
<div class="col-ms"></div>
<div class="col-sm"></div>
<div class="col-md"></div>
<div class="col-lg"></div>
<div class="col-xl"></div>

<!-- Auto colums - No grow mode -->
<div class="col-xs--no-grow"></div>
<div class="col-ms--no-grow"></div>
<div class="col-sm--no-grow"></div>
<div class="col-md--no-grow"></div>
<div class="col-lg--no-grow"></div>
<div class="col-xl--no-grow"></div>