Some settings can be defined per theme. Because we've built our new style with SCSS, it's super simple to change a few variables and get a whole new theme.

We've got a few master variables, (as seen here), and then we've used those to initialize local variables for each component - so you have plenty of opportunity to customize everything!

The border radius can be set to a base value. The default value is

$border-radius: 0;

and is defined in _settings.base.scss.

The Atomia Pattern Library stylesheet is built on a few key breakpoints defined in _settings.base.scss.

These values can be overriden in your theme config file:

$bp-xs: 'only screen and (max-width: 360px)';

$bp-s: 'only screen and (max-width: 480px)';

$bp-m: 'only screen and (max-width: 760px)';

$bp-l: 'only screen and (max-width: 1024px)';

$bp-xl: 'only screen and (max-width: 1200px)';

Fonts are defined in _settings.base.scss as well:

$font-main: 'Open Sans', Helvetica, Arial, sans-serif;

$font-forms: 'Open Sans', Helvetica, Arial, sans-serif;

$font-title: 'Open Sans', Helvetica, Arial, sans-serif;

The grid included is defined in _settings.base.scss.

For usage of the grid, see Grid under the Layout section.

The configurable variables are the number of columns and the gutter spacing between them:

$grid-columns: '6';

$grid-gutter: '2%';