Functional, Atomic, OOCSS-driven, layered, design-free, BEM-based, responsive and mighty
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.
Sass 3.4.2 or higher.
Autoprefixer is highly advised.
IE | Edge | Chrome | Firefox | Safari | Opera | Opera Mobile | iOS Safari | Android |
---|---|---|---|---|---|---|---|---|
10+ | 12+ | 21+ | 28+ | 6.1+ | 12.1+ | 12.1+ | 7.1+ | 4.4+ |
_ie.scss
provides graceful regression for IE9 and below:
- Grid, media and nav objects will fallback from
flexbox
toinline-block
,table
orfloat
-based models. - Flexbox alignment helpers will fallback to
text-align
andvertical-align
to imitate intended alignment oninline-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.
Kotsu โ Advanced Web Starter Kit & Static Website Generator with docker integration.