veams-utility-grid
v5.1.3
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
3
Readme
Grid
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 vu grid
SASS
Variables
- $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
Fields
Grid Row
- settings.gridPadding {
Boolean
} [false
] - Add the margin to the left. - settings.gridClasses {
String
} - Modifier classes likeis-equal-height
.
Grid Col
- colClasses {
String
} - Column and offset classes.
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
);