Star

Settings

Barebones expects you to store your project settings in a SASS map (read more about SASS maps). These values are used by the various helpers and mixins included in the project.

For example, the if-above() mixin sources it's values from the $breakpoints map, and text-color helper classes are generated for every color stored in the $colors map.

The file containing these maps is not included in the package to avoid collisions with your own settings. To use Barebones, you'll need to create your own settings file, using this template.

Misc

Allows you to specify class prefixing (by default Barebones classes aren't namespaced) and unit type (px, rems or ems).

$misc: (
	prefix: "bb-",
	units: px
);

Colors

Stores your colour palette in a organised way. Access using the colors($category, $value) function.

$colors: (
	brand: (
		primary: #157AFB,
		secondary: #FE5607,
		...
	),
	secondary: (
		orange: #F8B000,
		...
	),
	greyscale: (
		50: #FAFAFA,
		100: #F5F5F5,
		...
	),
	keyline: (
		light: #E5E5E5,
		...
	),
);
.element {
	background-color: colors(brand, primary);
}

Fonts

Specify font familys' and their respective weights. Access using fonts($family) and weights($family, $weight) functions.

$fonts: (
	primary: (
		family: Open Sans,
		weights: (
		 light: 100,
		 regular: 200,
		 semi-bold: 500
		)
	),
	secondary: (
		family: Futura PT,
		weights: (
			bold: 600,
		)
	)
);

Grid

Specify global grid settings. Access using grid($setting). Read more about the grid system and available settings here.

$grid: (
	columns: 12,
	gutter: 1/4,
);

Breakpoints

Specify global breakpoints. It's generally best to set these as device sizes, rather than target specific devices.

$breakpoints: (
	device-small: 320px,
	device-medium: 480px,
	...
);

Sizes

Used to keep spacing consistent throughout the project. Access using sizes($size).

$sizes: (
	quarter: 4px,
	half: 8px,
	base: 16px,
	...
);
.element {
	padding: sizes(quarter);
}

Layers

Stores z-indexes for different components so you can easily see the stacking order. Access using layers($component).

$layers: (
	modal: 5,
	backdrop: 2,
	navigation: 4,
	...
);
.modal {
	z-index: layers(modal);
}