@veams/utility-grid
v1.0.1
Published
Using the simple Bourbon Neat grid system, `u-grid` is a mobile first class based grid system like Bootstrap or Foundation, but also flexible enough to just use mixins in your Sass or SCSS files
Downloads
13
Readme
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
);