02. Settings

Zebra comes with a number of Sass variables which can be modified to control the output CSS. To take advantage of these customization options, you must include the /src/sass/ folder in your Sass project, where you can then compile the modified files into CSS.

The default settings variables are all stored within /src/sass/_zebra-settings.scss, any overwriting that you wish to do on your own project should be made in /src/sass/_zebra-custom.scss.

Setting	Type	Default	Description
$zeb-enable-responsive	boolean	true
$zeb-mobile-first	boolean	true
$zeb-media-widths	list	435, 500, 599, 768, 1024
$zeb-media-width-names	list	xs, s, m, l, xl
$zeb-media-unit	string	px
$zeb-enable-browser-reset	boolean	true
$zeb-box-sizing	boolean	true
$zeb-site-width	number	1280
$zeb-site-unit	string	px
$zeb-enable-reset-font	boolean	true
$zeb-reset-font-size	number	18px
$zeb-enable-hidden	boolean	true
$zeb-columns	list	5, 8, 12
$zeb-format--col	string	"-"
$zeb-enable-offset	boolean	false
$zeb-enable-push	boolean	false
$zeb-enable-pull	boolean	false
$zeb-enabled-bg-extends	boolean	true
$zeb-bg-extends-width	number	$zeb-site-width
$zeb-bg-ext-unit	string	px
$zeb-enable-padding	boolean	true
$zeb-enable-margin	boolean	true
$zeb-spacings	list	10, 25
$zeb-spacing-unit	string	px
$zeb-enable-grids	boolean	true
$zeb-safe-grid-classes	boolean	false
$zeb-grid-columns	list	1, 2, 3, 4
$zeb-enable-gutters	boolean	true
$zeb-gutter-sizes	list	10, 25
$zeb-gutter-round-down	boolean	false
$zeb-gutter-unit	string	px

Debug settings	Type	Default	Description
$zeb-print-settings	boolean	false