mixin unitgs-set-grid-scale

Defines the scale over wich you want to set the grid.

For example, in a mobile first scenario, you probably want to have a grid scale for that size and other scales to higher dimensions.

To be applied only to the base container of the grid, normally the body.

Declaration

@mixin unitgs-set-grid-scale(
	$scale: undefined,
	$wrapper-tag: undefined
)

Parameters

$scale

Defines the scale that you want to set the grid with.

In the resulting css, the result is extremly simple, but don't do it yourself, the grid needs to keep track of the current scale to be able to make other dimensions calculations.

Default value: 1.

All the grid will be scaled apropriatly.

$wrapper-tag

Defines the top tag that wraps the grid. Normally is the body tag, but you can set what you want.

If you don’t want the grid to wrap the declaration for you, you can set it to none.

See the following examples:

@include unitgs-set-grid-scale();

Results in the following css:

body {
	font-size: 1em;
}

If we set the wrapper tag to none, and wrap it ourselfs like this:

body {
	@include unitgs-set-grid-scale($wrapper-tag: none);	
}

We get the same css result.

Default value: body.

You can change the default tag changing the value of $unitgs-settings-default-wrapper-tag so that you don’t have to set it all the time.

Example

Examples

For example, you migth want to have a base font size of 1.25em (20px) but you want to use 16px for mobile. You would do the following:

@include unitgs-set-grid-scale(0.8);

You can also indicate your own container:

@include unitgs-set-grid-scale(0.8, #main-container);

It will result in the following css:

#main-container {
	font-size: 0.8em;
}