ligament

A small css library for responsive margin, padding, and text utility classes. Edit

Usage no npm install needed!

<script type="module">
  import ligament from 'https://cdn.skypack.dev/ligament';
</script>

README

ligament.css

Ligament is a small library for responsive margin, padding and text utility classes.

$value-max: 20; Set maximum unit value (Default of 20)

$base-spacing-unit: 0.5rem; Set your unit increment size (Default 0.5rem)

.xs-p1.sm-p4 Add 1 unit of padding on xs and 4 units of padding on sm and bigger.

.xs-ml4.md-ml0.md-pt3 Margin left 4 units on xs and above, margin left 0 (reset) on md and above, padding top of 3 units on md and above.

.xs-ml4.md-ml0.md-pt3 Text align left on 'xs' and above, text align right on 'md' and above.

Default breakpoints

'xs' : 0px,
'sm'  : 767px,
'md'  : 992px,
'lg'  : 1200px

Ligament playground: http://codepen.io/spenser/pen/NNvgmW/

Be happy