wocss-utilities-basscss

[DEPRECATED] BassCSS port

Usage no npm install needed!

<script type="module">
  import wocssUtilitiesBasscss from 'https://cdn.skypack.dev/wocss-utilities-basscss';
</script>

README

This module is DEPRECATED

This module has been moved to the monorepo wocss (and renamed to @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