2.0.0 • Published 5 years ago

@sfem/css-sugars v2.0.0

Weekly downloads
-
License
ISC
Repository
github
Last release
5 years ago

css.sugars

Simple css/scss class helpers.

Install

npm install -S @sfem/css-sugars

or

yarn add @sfem/css-sugars

Usage

Include css in your html

<link rel="stylesheet" type="text/css" href="sugars.css">

or import module to your scss

@import '~@sfem/src/sugars';

SCSS Config

$sugar-padding-list: (0, 8, 16);
$sugar-ratio-list: ((1, 1), (3, 2), (4, 3));

$sugar-font-weight-list: (normal, bold);
$sugar-font-style-list: (italic, normal);
$sugar-text-align-list: (left, center, right, justify);
$sugar-vertical-align-list: (baseline, bottom, middle, sub, super, text-bottom, text-top, top);
$sugar-word-break-list: (normal break-all keep-all break-word);
$sugar-display-list: (inline, inline-block, flex, inline-flex);
// enable only certain sugars

$enable-sugars: (paddings margins);
// disable certain sugars

$disable-sugars: (word-break) !default;

List of available sugars

  • font-weight
  • font-style
  • text-align
  • display
  • vertical-align
  • word-break
  • ellipsis
  • paddings
  • margins
  • hiders
  • aspect-ratio
  • round