@fiskhandlarn/css-bootstrap-like-grid NPM

CSS Bootstrap-like grid

css-bootstrap-like-grid

Native CSS grid classes and SCSS mixins with (nearly) the same syntax as Bootstrap grid.

This library uses the same variables as Bootstrap ($grid-columns, $grid-gutter-width, $grid-breakpoints, $container-max-widths).

Install this package, with npm, in the root directory of your project.

$ npm install @fiskhandlarn/css-bootstrap-like-grid --save-dev

Import it in your SCSS:

@import '@fiskhandlarn/css-bootstrap-like-grid';

.container/make-container + make-container-max-widths
.container-fluid/make-container
.col-*, col-*-*/make-col (make-col-ready is not needed)
.row/make-row (usually not needed, can be set on a .col to force that .col down on the next row)
.col-start-*-*/make-col-start (used instead of offset-*-*/make-col-offset, the start number should be where the column should start and not the offset from the preceeding column)
.nest-parent (must be set on a .col that contains other (nested) .col's), pass true as second or third argument to make-col or make-col-start to make that column into a nest-parent
order-*-first, order-*-last, order-*-*,

Auto width columns (col, col-auto, col-*-auto)
Vertical alignment and horizontal alignment (since we don't have rows) (align-items-*, align-self-*, justify-content-*)
Offset classes (use start-* instead)
Margin utilities (m*-auto)
Nested content other than other columns

If CSS grid isn't supported this library uses a flex fallback. If you need to support these browsers you need to:

Add fallback-row-after-*/fallback-row-after-*-*/fallback-row-after-*-disable classes or use make-fallback-row-after/make-fallback-row-after-disable mixins on all columns preceeding columns using .row/make-row
Add fallback-col-offset-*/fallback-col-offset-*-* classes or use make-fallback-col-offset mixin everywhere .col-start-*-*/make-col-start is used (please note that the offset number should be used in the same manner as in Bootstrap)