Configuration

If the dependencies are all in place, Basecoat should work out-of-the-box. For easier customization, a lot of visual styles are defined in a variables scss file that can be overriden.

Variables

Override the values in the _variables.scss file to customize the colors, type, grid, breakpoints, and more. To make debugging easier and more consistent, it is recommended that you create a custom scss file where you can override these variables and set more of your own.

Container widths

Container widths are the width of the primary content containers. There are two different containers to that can be used together based on the type of content that is being contained, see layout#containers for more info.

Breakpoints

Basecoat is structured and styled mobile first. This means that all styles and markup are built for small screens by default (with no media query overrides). As the browser window size gets wider, breakpoints can be used to override the default mobile style to one that takes advantage of more screen real estate. For example, making a single column small screen layout split into to two columns and then three columns.