Kayzen

Core

assets/modules/utilities/core

Files

  • _core.scss
  • core.js
  • README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/utilities/core

Module Overview

This module provides the utmost basic CSS for a webpage as well as all core JavaScripts which do not apply to other modules.

Customizing

The core module styles can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

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
));

JavaScript

The core.js file contains general JS tools, helpers and plugin initialisations.

Global Transition

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;

Get Breakpoint Value

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;
}

Plugin Inits

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:

  • assets/includes/Kayzen.smoothScroll.js
  • assets/includes/Kayzen.iframeHeight.js
  • assets/includes/Kayzen.scrollStats.js
  • assets/includes/Kayzen.masonryGrid.js
  • assets/includes/Kayzen.dataBg.js
  • assets/vendor/Stellar
  • assets/vendor/Owl-Carousel
  • assets/vendor/Magnific-Popup