mixin unitgs-set-grid-settings

This mixin is used to set the grid-settings and pre-calculate values that the grid will use.

It does not emit output, so you can call it whereever you want but before the grid-init.

Note: It must be called before the unitgs-init-grid (or any other grid mixin or function). If you will not call it, the unitgs-init-grid will call it without parameters, applying the default values.

Atention: Always set the grid settings through this mixin, otherwise you run the risk of getting an unstable grid.


@mixin unitgs-set-grid-settings(
	$number-of-columns: $unitgs-settings-number-of-columns,
	$number-of-active-columns: $unitgs-settings-number-of-active-columns,
	$font-size: $unitgs-settings-base-font-size,
	$line-height: $unitgs-settings-base-line-height,
	$gutter-width: $unitgs-settings-base-gutter-width,
	$use-last-right-margins: $unitgs-settings-use-last-right-margins,
	$use-clear: $unitgs-settings-use-clear



Defines the number of total columns of the grid.

Default value: $unitgs-settings-number-of-columns.


Defines the number of active columns for the grid.

Default value: $unitgs-settings-number-of-active-columns.

Note: Your design will always be relative to the number of active columns.


Base font-size, by which all the other values will relate to.

Insert the value in unitless values.

Example: 1.25. This will make the font 25% bigger than the browser's default font size. Normally we assume that the browser's default font size is 16px, but the user can always change it to his needs. Assuming a 16px browser's default font size, setting $font-size to 1.25 will set the font-size to 1.25em that would represent a font size of 20px.

Default value: $unitgs-settings-base-font-size.


Defines the ratio between the font-size and the line. This value will define the vertical rythm for the grid.

Example: 1.6. This will create a line height that is 60% bigger than the font size specified in the $font-size parameter.

Default value: $unitgs-settings-base-line-height.


Defines the size of the gutter relative to the $line-height. The gutter is divided by the left and right padding.

Atention: The gutters are elastic, not fluid, that means that they will always be in sync with the vertical rythm.

Example: $gutter-width: 1.2. Will create a gutter that is 20% bigger than the value set in the $line-height parameter.

Default value: $unitgs-settings-base-gutter-width.


Indicates if the last column uses a margin.

This is will force a right margin on the grid-units that are last in the row, this will prevent any content to float to the right of the grid unit.

Default value: $unitgs-settings-use-last-right-margins.


Indicates if the design uses the clear on the first and fullrow columns.

This will ensure that the column will be the first, forcing a clear left.

Default value: $unitgs-settings-use-clear


Lets declare a 14 columns grid, with 12 active columns (that means that you will have 12 columns to workwith and 1 column margin on eacd side).

@include unitgs-set-grid-settings(
	$number-of-columns: 14,
	$number-of-active-columns: 12)

Lets a standard 12 active columns grid, it will have no margins but the left gutter of the first column. <p class="note">If you want to include a margin, you will have to do it outside the grid with a wrapper.</p>

We will also define the default font size as 20px and a line height of 1.6, that will originate in the init mixin a font-size of 1.2em and a line-height of 1.2. Also we will include a smaller gutter of 0.8.

@include unitgs-set-grid-settings(
	$number-of-columns: 12,
	$number-of-active-columns: 12,
	$font-size: 20,
	$line-height: 1.2,
	$gutter-width: 0.8)

As you can see, it is very intuitive, just declare your intentions and the grid will obey! ;)