Invisible CSS library

Getting Started

Install: 
npm i @anovi/invisible

If you use CSS only connect this styles to your page:

@anovi/invisible/dist/invisible.css
@anovi/invisible/dist/invisible.min.css

Then, set up variables: 

:root {
  --font-size: 16px;         /* Basic font-size */
  --line-height: 1.25rem;    /* Basic line-height */
  --grid-unit-lines: 2;      /* Amount of grid units per row of basic text */
  --grid-gutter-width: 30px; /* Grid gutter width */
}

If you use stylus, import the library:

@anovi/invisible/index.styl

Then, set up Stylus variables. 

$grid-columns = 12
$grid-gutter-width = 30px

$grid-breakpoints = {
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
}

$container-max-widths = {
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
}

Grid

Equal-width

For example, here are two grid layouts that apply to every device and viewport, from xs to xl. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.

1 of 2
2 of 2
1 of 3
2 of 3
3 of 3

Equal-width columns can be broken into multiple lines, but there was a Safari flexbox bug that prevented this from working without an explicit flex-basis or border. There are workarounds for older browser versions, but they shouldn’t be necessary if you’re up-to-date.

Column
Column
Column
Column

Setting one column width

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.

1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3

Variable width content

Use col-{breakpoint}-auto classes to size columns based on the natural width of their content.

1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3

Mix and match

Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Aligment

One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns

Horizontal alignment

One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns

No gutters

.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4

Column breaks

Breaking columns to a new line in flexbox requires a small hack: add an element with width: 100% wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple .rows, but not every implementation method can account for this.

.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3

Order classes

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers.

First, but unordered
Second, but last
Third, but first

Offset classes

Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3
.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

Nesting

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6

Spacing

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Where sides is one of:

mt, pt - for classes that set margin-top or padding-top
mb, pb - for classes that set margin-bottom or padding-bottom
ml, pl - for classes that set margin-left or padding-left
mr, pr - for classes that set margin-right or padding-right
mx, px - for classes that set both *-left and *-right
my, py - for classes that set both *-top and *-bottom

0 - for classes that eliminate the margin or padding by setting it to 0
01 - (by default) for classes that set the margin or padding to 1 grid unit
1 - (by default) for classes that set the margin or padding to 1 line-height
2 - (by default) for classes that set the margin or padding to 2 line-height
3 - (by default) for classes that set the margin or padding to 3 line-height
4 - (by default) for classes that set the margin or padding to 4 line-height
auto - for classes that set the margin to auto

Sizing

Includes support for 25%, 50%, 75%, 100%, and auto by default. Modify those values as you need to generate different utilities here. Use like this .w-25, .h-50 and so on.

This:

<div class="w-25 p-01" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-01" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-01" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-01" style="background-color: #eee;">Width 100%</div>
<div class="w-auto p-01" style="background-color: #eee;">Width auto</div>

…will result to this:

Width 25%
Width 50%
Width 75%
Width 100%
Width auto

There is also max-width classes:

.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }