@wocss/utilities-basscss

BASSCSS

Utility

The @wocss/utilities-basscss module contains a port of BassCSS library using wocss variables and the BEMIT naming convention.

Install using npm:

$ npm install @wocss/utilities-basscss --save

Usage

With a tool like webpack you can import all modules writing:

@import '~@wocss/utilities-basscss';

or import only that you need:

@import '~@wocss/utilities-basscss/src/utilities.hide';
@import '~@wocss/utilities-basscss/src/utilities.show';

Modules

• Align

• Background colors

  NOTE: Here we have extra utilities classes. e.g.: u-bg-primary

• Borders

• Colors

  NOTE: Here we have extra utilities classes. e.g.: u-color-primary

• Flexbox

  NOTE: There is a u-flex-fit (it can shrink to 0 width) and u-flex-auto (it can shrink to content width)

• Hide

• Layout

  NOTE: There is not max-width utilities. (check @wocss/objects-wrapper)

• Margin

• Padding

• Positions

• Show

  Use these utilities to conditionally show elements based on viewport width.

• Type scale

  NOTE: The font-size utilities has a extra namespace ('fz'). e.g.: .u-fz-h1

• Typography

  NOTE: The font-weight utilities has a extra namespace ('fw'). e.g.: .u-fw-regular

Dependencies

• @wocss/settings-global
• @wocss/settings-typography
• @wocss/settings-spaces
• @wocss/settings-colors
• @wocss/tools-bem-constructor
• @wocss/tools-mq
• @wocss/tools-resets