Style-utility NPM

Style

Utility first styling

Installation

via npm

npm i style-utility

Border

Border Radius

.border-radius-sm

0.125rem

.border-radius-default

0.25rem

.border-radius-lg

0.5rem

.border-radius-xl

0.75rem

.border-radius-full

9999px

Border Width

.border-0

.border-2

.border-3

.border-4

.border-6

.border-8

Border Color

.border-primary

.border-secondary

.border-success

.border-info

.border-warning

.border-danger

.border-light

.border-dark

Available state

.hover:border-{color}

.focus:border-{color}

.active:border-{color}

Border Style

.border-solid

.border-dashed

.border-dotted

.border-none

Outline

.outline-none

Available state

.focus:outline-none

Cursor

.cursor-auto

.cursor-default

.cursor-pointer

.cursor-wait

.cursor-text

.cursor-move

.cursor-not-allowed

Available state

.hover:cursor-{property}

Button (customize color in _variables.scss file)

.btn-primary

.btn-outline-primary

.btn-secondary

.btn-outline-secondary

.btn-success

.btn-outline-success

.btn-info

.btn-outline-info

.btn-warning

.btn-outline-warning

.btn-danger

.btn-outline-danger

.btn-light

.btn-outline-light

.btn-dark

.btn-outline-dark

Shadow (box-shadow)

.shadow-none

.shadow-primary-sm

.shadow-primary-md

.shadow-primary-lg

.shadow-secondary-sm

.shadow-secondary-md

.shadow-secondary-lg

.shadow-info-sm

.shadow-info-md

.shadow-info-lg

.shadow-warning-sm

.shadow-warning-md

.shadow-warning-lg

.shadow-danger-sm

.shadow-danger-md

.shadow-danger-lg

.shadow-light-sm

.shadow-light-md

.shadow-light-lg

.shadow-dark-sm

.shadow-dark-md

.shadow-dark-lg

Available state

.hover:shadow-{color}-{size}

.focus:shadow-{color}-{size}

.active:shadow-{color}-{size}

Padding

.padding-0

.padding-px

.padding-1

.padding-2

.padding-3

.padding-4

.padding-5

.padding-6

.padding-8

.padding-10

.padding-12

.padding-16

.padding-20

.padding-24

.padding-32

.padding-40

.padding-48

.padding-56

.padding-65

use padding-t-# to add padding top

use padding-l-# to add padding left

use padding-r-# to add padding right

use padding-b-# to add padding bottom

use padding-x-# to add padding on x axis

use padding-y-# to add padding on y axis

Margin

.margin-0

.margin-px

.margin-1

.margin-2

.margin-3

.margin-4

.margin-5

.margin-6

.margin-8

.margin-10

.margin-12

.margin-16

.margin-20

.margin-24

.margin-32

.margin-40

.margin-48

.margin-56

.margin-65

use margin-t-# to add margin top

use margin-l-# to add margin left

use margin-r-# to add margin right

use margin-b-# to add margin bottom

use margin-x-# to add margin on x axis

use margin-y-# to add margin on y axis

Typography

Font weight

.font-hairline

.font-extra-light

.font-thin

.font-light

.font-normal

.font-medium

.font-semibold

.font-extra-bold

.font-black

Available state

.hover:font-{weight}

.focus:font-{weight}

.active:font-{weight}

Line weight

.line-height-none

.line-height-tight

.line-height-snug

.line-height-normal

.line-height-relaxed

.line-height-loose

Text transform

.text-uppercase

.text-lowercase

.text-capitalize

.text-normal-case

Text color

.text-color-primary

.text-color-secondary

.text-color-success

.text-color-info

.text-color-warning

.text-color-danger

.text-color-light

.text-color-dark

Available state

.hover:text-color-{color}

.focus:text-color-{color}

.active:text-color-{color}

Text decoration

.text-decoration-underline

.text-decoration-line-through

.text-decoration-no-underline

Available state

.hover:text-decoration-{decoration}

.focus:text-decoration-{decoration}

.active:text-decoration-{decoration}

White space

.white-space-{property}

.white-space-normal

.white-space-no-wrap

.white-space-pre

.white-space-pre-line

.white-space-pre-wrap

Word break

.break-normal

.break-words

.break-all

.truncate

Visibility

.display-show

.display-hidden

Background

Background color

.background-primary

Available state

.hover:background-{color}

.focus:background-{color}

.active:background-{color}

Background attachment

.background-fixed

.background-local

.background-scroll

Background position

.background-bottom

.background-top

.background-left

.background-right

.background-center

.background-left-bottom

.background-left-top

.background-right-bottom

.background-right-top

Background repeat

.background-repeat

.background-no-repeat

.background-repeat-x

.background-repeat-y

Background size

.background-auto

.background-cover

.background-contain

Responsive

.sm:{classname}-{value}

example: .sm:text-lg

.xs:

.sm:

.md:

.lg:

.xl:

Available for the following:

Display

{screensize}:display-{property}

Font size,

{screensize}:text-{value}

Font weight,

{screensize}:font-{value}

Line height

{screensize}:line-height-{value}

Padding,

{screensize}:padding-{value}

Margin

{screensize}:margin-{value}

Sizing

Width in rem

.w-auto

.w-1

.w-0

.w-2

.w-3

.w-4

.w-5

.w-6

.w-8

.w-10

.w-12

.w-16

.w-20

.w-24

.w-32

.w-40

.w-48

.w-56

.w-64

.w-min-{value}

.w-max-{value}

.w-p-1-of-2

.w-p-1-of-3

.w-p-1-of-4

.w-p-1-of-6

.w-p-1-of-12

Height in rem

.h-auto

.h-1

.h-0

.h-2

.h-3

.h-4

.h-5

.h-6

.h-8

.h-10

.h-12

.h-16

.h-20

.h-24

.h-32

.h-40

.h-48

.h-56

.h-64

.h-min-{value}

.h-max-{value}

.h-p-1-of-2

.h-p-1-of-3

.h-p-1-of-4

.h-p-1-of-6

.h-p-1-of-12

Color System

Color variants

.white

.black

Color options with 100 - 900 range

.gray

.red

.orange

.yellow

.green

.teal

.blue

.indigo

.purple

.pink

Placeholder

.placeholder-{color}

available state

.focus:placeholder-{color}

Opacity

.opacity-{value}

available value

0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100

Child

First child

.first:{element}

.last:{element}

.even:{element}

.odd:{element}

available for:

border and background

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago