helper-css-light

css classes of help for fronend

Usage no npm install needed!

<script type="module">
  import helperCssLight from 'https://cdn.skypack.dev/helper-css-light';
</script>

README

Helper CSS Light npm version

Common CSS helper classes.

Install

Install with Npm or Bower

npm

To install with npm run

$ npm install helper-css-light --save

Usage

Include css/helper-css.min.css style in your page and start using css helper classes.

CSS Helper Classes

CSS helper classes: Alignments, Display, Text Aling, Margins, Paddings, Border Radius, Rotates

CSS Helpers for margin and Padding

All margin and padding have properties for distances 0, .25rem(-1), .5rem(-2), 1rem(-3), 1.5rem(-4), 3rem(*-5).

Margin classes starts with m-, padding classes starts p-.

Following is the number that represents space in pixels and (optional) direction. Direction can be t, l, r and b.

Example:

Margins(m) and Paddings(p) BY BOOTSTRAP

  • t: for classes that set margin-top or padding-top
  • b: for classes that set margin-bottom or padding-bottom
  • l: for classes that set margin-left or padding-left
  • r: for classes that set margin-right or padding-right
  • x: for classes that set both *-left and *-right
  • y: for classes that set both *-top and *-bottom

Margins(m)

Where size is one of:

  • 0 - for classes that eliminate the margin or padding by setting it to 0
  • 1 - (by default) for classes that set the margin or padding to $spacer * .25
  • 2 - (by default) for classes that set the margin or padding to $spacer * .5
  • 3 - (by default) for classes that set the margin or padding to $spacer
  • 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
  • 5 - (by default) for classes that set the margin or padding to $spacer * 3

auto - for classes that set the margin to auto

for example($space = 1rem by default)

  • m-0: assigns margin: 0 property

  • m-1: assigns margin: 0.25rem property

  • mt-1: assigns margin-top: 0.25rem property

  • mb-1: assigns margin-bottom: 0.25rem property

  • ml-1: assigns margin-left: 0.25rem property

  • mr-1: assigns margin-right: 0.25rem property

  • mx-1: assigns margin-left: 0.25rem; margin-right: 0.25rem property

  • my-1: assigns margin-top: 0.25rem; margin-bottom: 0.25rem property ...

  • m-2: assigns margin: 0.5rem property

  • m-3: assigns margin: 1rem property

  • m-4: assigns margin: 1.5rem property

  • m-5: assigns margin: 3rem property

and variants md: m*-md-* ....

Paddings(m)

  • p-0: assigns padding: 0 property

  • p-1: assigns padding: 0.25rem property

  • pt-1: assigns padding-top: 0.25rem property

  • pb-1: assigns padding-bottom: 0.25rem property

  • pl-1: assigns padding-left: 0.25rem property

  • pr-1: assigns padding-right: 0.25rem property

  • px-1: assigns padding-left: 0.25rem; padding-right: 0.25rem property

  • py-1: assigns padding-top: 0.25rem; padding-bottom: 0.25rem property ...

  • p-2: assigns padding: 0.5rem property

  • p-3: assigns padding: 1rem property

  • p-4: assigns padding: 1.5rem property

  • p-5: assigns padding: 3rem property

  • p-5: assigns padding: 3.5rem property

and variants md: p*-md-* ....

CSS Helpers for Text

Text CSS Helpers contain set of text styling classes for text display and size.

Text Alignment Responsive

  • .text-left: assigns text-align: left property
  • .text-right: assigns text-align: right property
  • .text-center: assigns text-align: center property

variants

  • .text-sm-*: assigns text-align: * property
  • .text-md-*: assigns text-align: * property
  • .text-lg-*: assigns text-align: * property
  • .text-xlg-*: assigns text-align: * property

Text Alignment

  • .text-justify: assigns font-align: justify property
  • .text-nowrap: assigns font-align: nowrap property

Text Weight and italics

  • .text-bold: assigns font-weight: bold property
  • .text-normal: assigns font-weight: normal property
  • .text-italic: assigns font-weight: italic property

Text Transform

  • .text-uppercase: assigns font-transform: uppercase property
  • .text-lowercase: assigns font-transform: lowercase property
  • .text-capitalize: assigns font-transform: capitalize property
  • .text-none: assigns font-transform: none property

Text Size

  • .fs-1x: assigns font-size: 1em property
  • .fs-1x-25: assigns font-size: 1.25em property
  • .fs-1x-50: assigns font-size: 1.5em property
  • .fs-1x-75: assigns font-size: 1.75em property ... ... ...
  • .fs-4x: assigns font-size: 4em property

and variants

  • sm: fs-sm-*x-*
  • md: fs-md-*x-*
  • lg: fs-lg-*x-*
  • xlg: fs-xlg-*x-* ...

CSS Helpers for Border Radius

Border Radius

  • .radius-circle: assigns border-radius: 50% property

  • .radius-2: assigns border-radius: .125rem property

  • .radius: assigns border-radius: .25rem property

  • .radius-4: assigns border-radius: 0.5rem property

  • .radius-8: assigns border-radius: 1rem property

  • .radius-0: assigns border-radius: 0 property

  • .radius-x: assigns custom border-radius: x property

  • .radius-top

  • .radius-right

  • .radius-bottom

  • .radius-left

  • .radius-top-left

  • .radius-top-right

  • .radius-bottom-left

  • .radius-bottom-right

  • .radius-diagonal-1

  • .radius-diagonal-2

CSS Helpers for Rotates

Transform

  • .rotate-0: assigns transform: rotate(0deg) property
  • .rotate-x-0: assigns transform: rotate(0deg) property
  • .rotate-y-0: assigns transform: rotate(0deg) property
  • .rotate-90: assigns transform: rotate(90deg) property
  • .rotate-x-90: assigns transform: rotate(90deg) property
  • .rotate-y-90: assigns transform: rotate(90deg) property
  • .rotate-180: assigns transform: rotate(180deg) property
  • .rotate-x-180: assigns transform: rotate(180deg) property
  • .rotate-y-180: assigns transform: rotate(180deg) property
  • .rotate-270: assigns transform: rotate(270deg) property
  • .rotate-x-270: assigns transform: rotate(270deg) property
  • .rotate-y-270: assigns transform: rotate(180deg) property
  • .rotate-360: assigns transform: rotate(360deg) property
  • .rotate-x-360: assigns transform: rotate(360deg) property
  • .rotate-y-360: assigns transform: rotate(360deg) property

As any other classes, helper classes can be combined together.

Usage example:

For given div element:

<div class="m-all-20 text-center p-t-10 fs-2x-sm">
    ...
</div>