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.
Allows you to specify class prefixing (by default Barebones classes aren't namespaced) and unit type (px, rems or ems).
Stores your colour palette in a organised way. Access using the colors($category, $value) function.
background-color: colors(brand, primary);
Specify font familys' and their respective weights. Access using fonts($family) and weights($family, $weight) functions.
family: Open Sans,
family: Futura PT,
Specify global grid settings. Access using grid($setting). Read more about the grid system and available settings here.
Specify global breakpoints. It's generally best to set these as device sizes, rather than target specific devices.
Used to keep spacing consistent throughout the project. Access using sizes($size).
Stores z-indexes for different components so you can easily see the stacking order. Access using layers($component).