CSS Architecture

• CSS is built and mainted with the Sass preproccessor language using a modular pattern to maintain an organized file structure.
• The CSS class naming naming convention is based off of the BEM methodology to help accurately define and organize each CSS element.
• Flexbox layout mode is used to arrange the elements on the page and we avoid using the traditional float and block model.  We use a Flexbox Polyfill created by Jonathan Neal to help improve the layout on older browsers that we do not support.
• Our spacing measurments are, as much as possible, defined using em or rem units so that they scale properly with the base text size.
• We utilize a mobile-first approach, which means the default size assumes a viewport of 0 and up. As a result, all of the media queries are built with min-width as opposed to max-width.

Breakpoints

The breakpoints are referenced as generic categories to avoid designing around specific devices or screen sizes. The breakpoint names are also generic to allow for future breakpoint, or tweakpoint, additions.

@media (min-width: 600px) {
    // breakpoint specific style goes here
}

The following breakpoints and tweakpoints are used throughout our digital projects