ArmorDarks / ekzo

How to use

Install framework with NPM:

npm install ekzo --save

Import parts you would like to use, like:

@import 'node_modules/ekzo/tools/index';

@import 'node_modules/ekzo/settings.defaults/assets';
@import 'node_modules/ekzo/settings.defaults/framework';
@import 'node_modules/ekzo/settings.defaults/misc';
@import 'node_modules/ekzo/settings.defaults/options';
@import 'node_modules/ekzo/settings.defaults/responsive';
@import 'node_modules/ekzo/settings.defaults/themes';
@import 'node_modules/ekzo/settings.defaults/typography';

@import 'node_modules/ekzo/base/normalize';

@import 'node_modules/ekzo/generic/shared';
@import 'node_modules/ekzo/generic/headings';
@import 'node_modules/ekzo/generic/text';

@import 'node_modules/ekzo/objects/grid';

@import 'node_modules/ekzo/helpers/flex';
@import 'node_modules/ekzo/helpers/spacing';
@import 'node_modules/ekzo/helpers/typography';
@import 'node_modules/ekzo/helpers/widths';

Imports should be layered in following order:

• Tools
• Predefined variables
• Settings (or default settings)
• Base styles
• Generics
• Objects
• Components
• Helpers

Refer to Kotsu style.scss as an example.

Requirements

Sass 3.4.2 or higher.

Autoprefixer is highly advised.

Browsers support

_ie.scss provides graceful regression for IE9 and below:

• Grid, media and nav objects will fallback from flexbox to inline-block, table or float-based models.
• Flexbox alignment helpers will fallback to text-align and vertical-align to imitate intended alignment on inline-block-based grid, media and nav objects.
• ::placeholder and ::selection won't be styled nor displayed.

All this will help to maintain intended flow and alignment of elements as closely as possible, but some features will be limited, especially vertical alignment.

To use, include _ie.scss in stylesheet, which will be served only to IE9 and below with IE conditional comments.

Best used with

Kotsu — Advanced Web Starter Kit & Static Website Generator with docker integration.