ekzo
v2.7.1
Published
Atomic Sass framework for rapid and painless development
Downloads
33
Maintainers
Readme
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 | 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.
Best used with
Kotsu — Advanced Web Starter Kit & Static Website Generator with docker integration.