Custom settings
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!
Borders
The border radius can be set to a base value. The default value is
$border-radius: 0;
and is defined in _settings.base.scss
.
Breakpoints
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)';
Font
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;
Grid
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%';