@sfem/css-sugars

CSS class helpers

Usage no npm install needed!

<script type="module">
  import sfemCssSugars from 'https://cdn.skypack.dev/@sfem/css-sugars';
</script>

README

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