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
and is defined in
The Atomia Pattern Library stylesheet is built on a few key breakpoints defined in
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
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: