Skip to content

💫 Functional Sass framework for rapid and painless development

License

Notifications You must be signed in to change notification settings

ArmorDarks/ekzo

Repository files navigation

Ekzo

Sass framework

Functional, Atomic, OOCSS-driven, layered, design-free, BEM-based, responsive and mighty


NPM version

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:

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 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.