Grid

Description

Bourbon Neat provides a simple grid system, which you can use in your projects.

With u-grid there is implemented a mobile first class based system which is like Bootstrap or Foundation, but you are also flexible enough to just use mixins in your Sass or SCSS files.

In general u-grid.scss generates a set of grid column classes using namespaces.

Requirements

Bourbon Neat => http://neat.bourbon.io/ => npm i bourbon-neat --save-dev
wrapWith helper => https://www.npmjs.com/package/mangony-hbs-helper-wrap-with => npm i mangony-hbs-helper-wrap-with --save-dev

Documentation

Bourbon Neat: https://neat.bourbon.io/

Installation

Installation with Veams

veams install u grid

Fields

Grid Row

Option	Type	Default	Description
settings.gridPadding	Boolean	[`false`]	Add the margin to the left.
settings.gridClasses	String		Modifier classes like `is-equal-height`.

Grid Col

Option	Type	Default	Description
colClasses	String		Column and offset classes.

SASS Options

Option	Type	Default	Description
$grid-visual	Boolean	[`false`]	You want to visualize the grid columns, then just set the value to `true`.
$grid-defaults	Object	[`(columns: 12, gutter: 52px)`]	Default values which will be used in Neat.
$grid-breakpoints-defaults	Object	[`('mobile-s': 320px, 'mobile-xl': 657px, 'tablet-p': 768px, 'tablet-l': 1024px, 'desktop': 1440px)`]	Default values which will be used in Neat.
$grid-class-col	String	[`is-col`]	Column class namespace.
$grid-offset	String	[`offset`]	Offset class namespace.

CSS Output

In combination with the Sass map for all major breakpoints, a specific mixin creates our markup classes which has the following structure:

.{$grid-class-col}-[namespace]-[number] - for a column that covers a specific number of columns (e.g. 1-12 by default)
.{$grid-class-col}-[namespace]-{$grid-offset}-[number] - for pushing a col a specific number of columns (e.g. 1-11 by default)

Modifier Classes

You can add the following modifiers to u-grid-row|is-grid-row:

is-collapsed - Delete the margin on the left (can be set via settings.gridCollapsed)
is-equal-height - Add flex box styles to support equal heights for the columns

Usage Examples

is-col-mobile-s-12 is-col-mobile-xl-6 is-col-tablet-p-4 is-col-tablet-p-offset-4 is-col-tablet-l-3 is-col-tablet-l-offset-0

Example

Example for overwrite u-grid default settings in _vars.scss:

/* ===================================================
BREAKPOINT SETTINGS
=================================================== */
// Breakpoints
$bp-mobile-s: 320px;
$bp-mobile-l: 600px;
$bp-tablet-s: 768px;
$bp-desktop: 1230px;
$bp-desktop-l: $max-width;

// Breakpoints Map
$bp: (
	'mobile-s': (
        columns: 12,
        gutter: 20px,
        media: 320px
    ),
    'mobile-l': (
        columns: 12,
        gutter: 20px,
        media: 657px
    ),
    'tablet-s': (
        columns: 12,
        gutter: 20px,
        media: 768px
    ),
    'desktop-l': (
        columns: 12,
        gutter: 20px,
        media: 1024px
    ),
    'desktop': (
        columns: 12,
        gutter: 20px,
        media: 1440px
    )
);

$grid-breakpoints-defaults: $bp;
$grid-defaults: (
	columns: 12,
	gutter: 36px
);

Veams/utility-grid