Snack-helper

Snack-helper is a universal CSS helper library.

Installation

$ npm install snack-helper --save

Usage

@import '~snack-helper/dist/snack-helper.css';

If you use scss language, you can import the original files.

@import '~snack-helper/src/snack-helper';

Customization

Some helpers can be customized with variables. Take the spacing for example.

Here is the default spacing variable.

$spacer: 1rem !default;
$spacers: (
  0: 0,
  4: $spacer * .25,
  8: $spacer * .5,
  12: $spacer * .75,
  16: $spacer,
  24: $spacer * 1.5,
  32: $spacer * 2,
  48: $spacer * 3
) !default;

You can cover the whole original spacing with $spacers as you like.

$spacers: (
  0: 0,
  1: .25rem,
  2: .5rem,
  3: .75rem,
  4: 1rem,
  5: 1.5rem
);

@import '~snack-helper/src/snack-helper';

If you just want to extend the original spacing, you can use the $spacers-extend;

$spacers-extend: (
  5: 5px,
  10: 10px,
  15: 15px
);

@import '~snack-helper/src/snack-helper';

Overview

• Color
• Spacing
• Sizing
• Border
• Rounded
• Shadow
• Text
• Alignment
• Display
• Position
• Flexbox

License

MIT License