This module provides the utmost basic CSS for a webpage as well as all core JavaScripts which do not apply to other modules.
The core module styles can be customized using the following options:
Property Name | Default Value | Description |
---|---|---|
output-JSON |
true |
This allows the config to be accessed in the JavaScript. |
background |
color('greyscale', 'grey-1') |
The background to be applied to the main body element. |
font-family |
typography('typefaces', 'primary') |
The font family to be applied to the main body element. |
text-color |
typography('colors', 'base') |
The text color to be applied to the main body element. |
font-size |
typography('sizes', 'base') |
The font size to be applied to the main body element. |
line-height |
1.4 |
The line height to be applied to the main body element. |
margin |
2rem |
The base margin width for your project. |
radius |
0.4em |
The base radius for your project. |
oval-radius |
1.5em |
The global radius to use for oval elements. |
transition |
0.4s |
The base transition duration to use for your project. |
To change one of the above values, pass your new value(s) to the core()
mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).
@include core(( 'margin' : 1em, 'transition' : 0.6s ));
The core.js
file contains general JS tools, helpers and plugin initialisations.
The Modular framework allows you to access any Sass configuration value in your JavaScript. You can use the coreTransition
variable anywhere in your JavaScript to use the transition
value set in _core.scss
. Note that the value is converted from seconds to miliseconds, so a value of 0.4s
would become 400ms
. This is made possible from the below line found in core.js
:
window['coreTransition'] = _modules['core']['transition'].slice(0,-1) * 1000;
You can use the breakpoint()
function anywhere in your Javascript to fetch any breakpoint value from the Grid module:
if(breakpoint('min-width', 'break-3')) { // do something }
This is made possible using the Modular framework, and the below function found in core.js
which uses the Window.matchMedia()
web API:
function breakpoint(media, value) { return window.matchMedia('(' + media + ':' + _modules['grid']['breakpoints'][value] + ')').matches; }
The core.js
file also contans general plugin initialisations which do not relate to any other modules, and should only be touched if you know what you're doing (you shouldn't need to edit them). For reference the following files/plugins are called in core.js
: