UTILITY

U-GRID

Each variation will be presented in the following sections.

4 Columns Collapsed

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam consectetur corporis cum, deleniti dignissimos ducimus ea eligendi, fugiat fugit illum molestias natus necessitatibus perferendis quasi quidem reiciendis similique ullam voluptatum!

3 Columns

Custom Setup with Offset (see 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 in Beta => http://neat.bourbon.io/ => bower i neat#v2.0.0.beta.1 --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: http://thoughtbot.github.io/neat-docs/2-0-0-beta-1/

Installation

Installation with Veams

veams install vu grid

Installation with Bower

bower install veams-utility-grid --save

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.gridCollapsed {Boolean} - Delete the margin to the left.
settings.gridClasses {String} - Modifier classes like is-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-p: 480px; $bp-mobile-l: 600px; $bp-mobile-xl: 657px; $bp-tablet-p: 768px; $bp-tablet-l: 1024px; $bp-desktop-m: 1230px; $bp-desktop-l: $max-width;

// Breakpoints Map $bp: ( ‘mobile-s’: $bp-mobile-s, ‘mobile-p’: $bp-mobile-p, ‘mobile-l’: $bp-mobile-l, ‘mobile-xl’: $bp-mobile-xl, ‘tablet-p’: $bp-tablet-p, ‘tablet-l’: $bp-tablet-l, ‘desktop-m’: $bp-desktop-m, ‘desktop-l’: $bp-desktop-l );

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

{
	"variations": {
		"4-grid": {
			"docs": {
				"variationName": "4 Columns Collapsed"
			},
			"settings": {
				"gridCollapsed": true,
				"colClasses": "is-col-mobile-s-6 is-col-mobile-l-3"
			},
			"content": {
				"repeats": 4
			}
		},
		"3-grid": {
			"docs": {
				"variationName": "3 Columns"
			},
			"settings": {
				"colClasses": "is-col-mobile-s-12 is-col-mobile-l-4"
			},
			"content": {
				"repeats": 3
			}
		},
		"custom-example": {
			"docs": {
				"variationName": "Custom Setup with Offset (see README)"
			},
			"settings": {
				"colClasses": "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-6 is-col-tablet-l-offset-0"
			},
			"content": {
				"repeats": 1
			}
		}
	}
}

u-grid-usage

{{! WrapWith START: Grid Row }}
{{#wrapWith "u-grid-row" settings=this.settings}}
	{{#times content.repeats}}
		{{! WrapWith START: Col }}
		{{#wrapWith "u-grid-col" colClasses=../settings.colClasses }}
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam consectetur corporis cum, deleniti dignissimos ducimus ea eligendi, fugiat fugit illum molestias natus necessitatibus perferendis quasi quidem reiciendis similique ullam voluptatum!
		{{/wrapWith}}
	{{! WrapWith END: Col }}
	{{/times}}
{{/wrapWith}}
{{! WrapWith END: Grid Row }}

u-grid-row.hbs

<div class="u-grid-row{{#if options.settings.gridCollapsed}} is-collapsed{{/if}}{{#if options.settings.gridRowClasses}} {{options.settings.gridRowClasses}}{{/if}}">
	{{{yield}}}
</div>

u-grid-col.hbs

<div class="u-grid-col{{#if options.colClasses}} {{options.colClasses}}{{/if}}">
	{{{yield}}}
</div>

_u-grid.scss

/* ===================================================
UTILITY: GRID
=================================================== */

/* ---------------------------------------------------
Global Variables
--------------------------------------------------- */
$grid-defaults: (
	columns: 12,
	gutter: 52px
) !default;
$grid-breakpoints-defaults: (
	'mobile-s': 320px,
	'mobile-xl': 657px,
	'tablet-p': 768px,
	'tablet-l': 1024px,
	'desktop': 1440px
) !default;
$grid-class-col: 'is-col' !default;
$grid-offset: 'offset' !default;
$neat-grid: $grid-defaults;
$grid-breakpoints: $grid-breakpoints-defaults;

/* ---------------------------------------------------
Mixin
--------------------------------------------------- */

/**
 * Generate a set of grid column classes using a namespace
 *
 * .#{ $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)
 */
@mixin grid-sizes( $namespace ) {
	// Run the loop for as many columns as specified
	@for $i from 1 through map-get($neat-grid, columns) {
		.#{$grid-class-col}-#{$namespace}-#{$i} {
			@include grid-column($i);
		}
	}

	// Offset classes
	@for $i from 0 through map-get($neat-grid, columns) {
		// Don't include the .off class for the last column
		@if ($i != map-get($neat-grid, columns)) {
			.#{$grid-class-col}-#{$namespace}-#{$grid-offset}-#{$i} {
				@include grid-push($i);
			}
		}
	}
}

/* ---------------------------------------------------
Grid Row
--------------------------------------------------- */
.is-grid-row,
.u-grid-row {
	@include grid-container();
	width: 100%;

	/*
	Modifiers
	----------------------- */
	&.is-collapsed {
		@include grid-collapse();
	}

	&.is-equal-height {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* ---------------------------------------------------
Grid Col
--------------------------------------------------- */
/**
 * Build the grid for each namespace, wrap the col width/offset measurements in their breakpoint media query
 */
@each $val in $grid-breakpoints {
	@if length($val) == 1 {
		$namespace: nth($val, 1);
		@include grid-sizes($namespace);
	} @else {

		$namespace: nth($val, 1);
		$size: nth($val, 2);

		@include bp("#{$size}", $min-width: true) {
			@include grid-sizes($namespace);
		}
	}
}

4 Columns Collapsed

<div class="u-grid-row is-collapsed">
	<div class="u-grid-col is-col-mobile-s-6 is-col-mobile-l-3">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam consectetur corporis cum, deleniti dignissimos ducimus ea eligendi, fugiat fugit illum molestias natus necessitatibus perferendis quasi quidem reiciendis similique ullam voluptatum!
	</div>
	<div class="u-grid-col is-col-mobile-s-6 is-col-mobile-l-3">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam consectetur corporis cum, deleniti dignissimos ducimus ea eligendi, fugiat fugit illum molestias natus necessitatibus perferendis quasi quidem reiciendis similique ullam voluptatum!
	</div>
	<div class="u-grid-col is-col-mobile-s-6 is-col-mobile-l-3">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam consectetur corporis cum, deleniti dignissimos ducimus ea eligendi, fugiat fugit illum molestias natus necessitatibus perferendis quasi quidem reiciendis similique ullam voluptatum!
	</div>
	<div class="u-grid-col is-col-mobile-s-6 is-col-mobile-l-3">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam consectetur corporis cum, deleniti dignissimos ducimus ea eligendi, fugiat fugit illum molestias natus necessitatibus perferendis quasi quidem reiciendis similique ullam voluptatum!
	</div>
</div>

3 Columns

<div class="u-grid-row">
	<div class="u-grid-col is-col-mobile-s-12 is-col-mobile-l-4">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam consectetur corporis cum, deleniti dignissimos ducimus ea eligendi, fugiat fugit illum molestias natus necessitatibus perferendis quasi quidem reiciendis similique ullam voluptatum!
	</div>
	<div class="u-grid-col is-col-mobile-s-12 is-col-mobile-l-4">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam consectetur corporis cum, deleniti dignissimos ducimus ea eligendi, fugiat fugit illum molestias natus necessitatibus perferendis quasi quidem reiciendis similique ullam voluptatum!
	</div>
	<div class="u-grid-col is-col-mobile-s-12 is-col-mobile-l-4">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam consectetur corporis cum, deleniti dignissimos ducimus ea eligendi, fugiat fugit illum molestias natus necessitatibus perferendis quasi quidem reiciendis similique ullam voluptatum!
	</div>
</div>

Custom Setup with Offset (see README)

<div class="u-grid-row">
	<div class="u-grid-col 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-6 is-col-tablet-l-offset-0">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam consectetur corporis cum, deleniti dignissimos ducimus ea eligendi, fugiat fugit illum molestias natus necessitatibus perferendis quasi quidem reiciendis similique ullam voluptatum!
	</div>
</div>

Veams

Go To Github

UTILITY

U-GRID

Demo Section

4 Columns Collapsed

3 Columns

Custom Setup with Offset (see README)

Technical Details

Grid

Requirements

Documentation

Installation

Installation with Veams

Installation with Bower

SASS

Variables

CSS Output

Modifier Classes

Usage Examples

Fields

Grid Row

Grid Col

Example

u-grid-usage

u-grid-row.hbs

u-grid-col.hbs

_u-grid.scss

4 Columns Collapsed

3 Columns

Custom Setup with Offset (see README)