Utilities

Utility (.u-) classes are main builiding helper classes that perform one thing extremely well. They do it so well, overriding everything else. As such, they often only contain one property, and they include the !important declaration.

  • Utilities use a (.u-) prefix.
  • Utilities are the core of framework
  • Only utilities can have !important declaration
  • With the help of utilities you can create page without any custom styles

text-align responsive

Class text-align
u-l left
u-c center
u-r right
u-j justify

text-decoration responsive

Class text-decoration
u-decoration-none none
u-line-thr line-through
u-underline underline

text-transform responsive

Class text-transform
u-transform-none none
u-capitalise capitalize
u-uppercase uppercase
u-lowercase lowercase

text-overflow responsive

Class text-overflow
u-ellipsis ellipsis

white-space responsive

Class white-space
u-nowrap-normal normal
u-nowrap nowrap
u-pre pre

margin responsive

Class margin
u-m--zero 0
u-m--auto auto
u-m--px 1px
u-m--tn .375rem
u-m--half 1.25rem/2
u-m--one 1.25rem
u-m--two 1.25rem*2
u-m--three 1.25rem*3
u-m--four 1.25rem*4
u-m--five 1.25rem*5
u-m--six 1.25rem*6
u-m--seven 1.25rem*7
u-m--eight 1.25rem*8
u-m--nine 1.25rem*9
u-m--ten 1.25rem*10

margin-top responsive

Class margin-top
u-mt--zero 0
u-mt--auto auto
u-mt--px 1px
u-mt--tn .375rem
u-mt--half 1.25rem/2
u-mt--one 1.25rem
u-mt--two 1.25rem*2
u-mt--three 1.25rem*3
u-mt--four 1.25rem*4
u-mt--five 1.25rem*5
u-mt--six 1.25rem*6
u-mt--seven 1.25rem*7
u-mt--eight 1.25rem*8
u-mt--nine 1.25rem*9
u-mt--ten 1.25rem*10

margin-bottom responsive

Class margin-bottom
u-mb--zero 0
u-mb--auto auto
u-mb--px 1px
u-mb--tn .375rem
u-mb--half 1.25rem/2
u-mb--one 1.25rem
u-mb--two 1.25rem*2
u-mb--three 1.25rem*3
u-mb--four 1.25rem*4
u-mb--five 1.25rem*5
u-mb--six 1.25rem*6
u-mb--seven 1.25rem*7
u-mb--eight 1.25rem*8
u-mb--nine 1.25rem*9
u-mb--ten 1.25rem*10

margin-left responsive

Class margin-left
u-ml--zero 0
u-ml--auto auto
u-ml--px 1px
u-ml--tn .375rem
u-ml--half 1.25rem/2
u-ml--one 1.25rem
u-ml--two 1.25rem*2
u-ml--three 1.25rem*3
u-ml--four 1.25rem*4
u-ml--five 1.25rem*5
u-ml--six 1.25rem*6
u-ml--seven 1.25rem*7
u-ml--eight 1.25rem*8
u-ml--nine 1.25rem*9
u-ml--ten 1.25rem*10

margin-right responsive

Class margin-right
u-mr--zero 0
u-mr--auto auto
u-mr--px 1px
u-mr--tn .375rem
u-mr--half 1.25rem/2
u-mr--one 1.25rem
u-mr--two 1.25rem*2
u-mr--three 1.25rem*3
u-mr--four 1.25rem*4
u-mr--five 1.25rem*5
u-mr--six 1.25rem*6
u-mr--seven 1.25rem*7
u-mr--eight 1.25rem*8
u-mr--nine 1.25rem*9
u-mr--ten 1.25rem*10

margin-right, margin-left responsive

Class margin-right, margin-left
u-mx--zero 0
u-mx--auto auto
u-mx--px 1px
u-mx--tn .375rem
u-mx--half 1.25rem/2
u-mx--one 1.25rem
u-mx--two 1.25rem*2
u-mx--three 1.25rem*3
u-mx--four 1.25rem*4
u-mx--five 1.25rem*5
u-mx--six 1.25rem*6
u-mx--seven 1.25rem*7
u-mx--eight 1.25rem*8
u-mx--nine 1.25rem*9
u-mx--ten 1.25rem*10

margin-top, margin-bottom responsive

Class margin-top, margin-bottom
u-my--zero 0
u-my--auto auto
u-my--px 1px
u-my--tn .375rem
u-my--half 1.25rem/2
u-my--one 1.25rem
u-my--two 1.25rem*2
u-my--three 1.25rem*3
u-my--four 1.25rem*4
u-my--five 1.25rem*5
u-my--six 1.25rem*6
u-my--seven 1.25rem*7
u-my--eight 1.25rem*8
u-my--nine 1.25rem*9
u-my--ten 1.25rem*10

padding responsive

Class padding
u-p--zero 0
u-p--auto auto
u-p--px 1px
u-p--tn .375rem
u-p--half 1.25rem/2
u-p--one 1.25rem
u-p--two 1.25rem*2
u-p--three 1.25rem*3
u-p--four 1.25rem*4
u-p--five 1.25rem*5
u-p--six 1.25rem*6
u-p--seven 1.25rem*7
u-p--eight 1.25rem*8
u-p--nine 1.25rem*9
u-p--ten 1.25rem*10

padding-top responsive

Class padding-top
u-pt--zero 0
u-pt--auto auto
u-pt--px 1px
u-pt--tn .375rem
u-pt--half 1.25rem/2
u-pt--one 1.25rem
u-pt--two 1.25rem*2
u-pt--three 1.25rem*3
u-pt--four 1.25rem*4
u-pt--five 1.25rem*5
u-pt--six 1.25rem*6
u-pt--seven 1.25rem*7
u-pt--eight 1.25rem*8
u-pt--nine 1.25rem*9
u-pt--ten 1.25rem*10

padding-bottom responsive

Class padding-bottom
u-pb--zero 0
u-pb--auto auto
u-pb--px 1px
u-pb--tn .375rem
u-pb--half 1.25rem/2
u-pb--one 1.25rem
u-pb--two 1.25rem*2
u-pb--three 1.25rem*3
u-pb--four 1.25rem*4
u-pb--five 1.25rem*5
u-pb--six 1.25rem*6
u-pb--seven 1.25rem*7
u-pb--eight 1.25rem*8
u-pb--nine 1.25rem*9
u-pb--ten 1.25rem*10

padding-left responsive hover

Class padding-left
u-pl--zero 0
u-pl--auto auto
u-pl--px 1px
u-pl--tn .375rem
u-pl--half 1.25rem/2
u-pl--one 1.25rem
u-pl--two 1.25rem*2
u-pl--three 1.25rem*3
u-pl--four 1.25rem*4
u-pl--five 1.25rem*5
u-pl--six 1.25rem*6
u-pl--seven 1.25rem*7
u-pl--eight 1.25rem*8
u-pl--nine 1.25rem*9
u-pl--ten 1.25rem*10

padding-right responsive

Class padding-right
u-pr--zero 0
u-pr--auto auto
u-pr--px 1px
u-pr--tn .375rem
u-pr--half 1.25rem/2
u-pr--one 1.25rem
u-pr--two 1.25rem*2
u-pr--three 1.25rem*3
u-pr--four 1.25rem*4
u-pr--five 1.25rem*5
u-pr--six 1.25rem*6
u-pr--seven 1.25rem*7
u-pr--eight 1.25rem*8
u-pr--nine 1.25rem*9
u-pr--ten 1.25rem*10

padding-right, padding-left responsive

Class padding-right, padding-left
u-px--zero 0
u-px--auto auto
u-px--px 1px
u-px--tn .375rem
u-px--half 1.25rem/2
u-px--one 1.25rem
u-px--two 1.25rem*2
u-px--three 1.25rem*3
u-px--four 1.25rem*4
u-px--five 1.25rem*5
u-px--six 1.25rem*6
u-px--seven 1.25rem*7
u-px--eight 1.25rem*8
u-px--nine 1.25rem*9
u-px--ten 1.25rem*10

padding-top, padding-bottom responsive

Class padding-top, padding-bottom
u-py--zero 0
u-py--auto auto
u-py--px 1px
u-py--tn .375rem
u-py--half 1.25rem/2
u-py--one 1.25rem
u-py--two 1.25rem*2
u-py--three 1.25rem*3
u-py--four 1.25rem*4
u-py--five 1.25rem*5
u-py--six 1.25rem*6
u-py--seven 1.25rem*7
u-py--eight 1.25rem*8
u-py--nine 1.25rem*9
u-py--ten 1.25rem*10

display responsive

Class display
u-none none
u-none-i none!important
u-block block
u-block-i block!important
u-flex flex
u-inline-flex inline-flex
u-table table
u-table-cell table-cell
u-inline-block inline-block

float responsive

Class float
u-float--l left
u-float--r right
u-float--none none

position responsive

Class position
u-relative relative
u-absolute absolute
u-fixed fixed
u-sticky sticky

top responsive

Class top
u-pos--t 0

bottom responsive

Class bottom
u-pos--b 0

left responsive

Class left
u-pos--l 0

top, bottom, left, right responsive

Class top, bottom, left, right
u-stretch 0

left, right responsive

Class left, right
u-stretch--x 0

top, bottom responsive

Class top, bottom
u-stretch--y 0

top, bottom, left, right responsive

Class top, bottom, left, right
u-stretch--auto auto

overflow responsive

Class overflow
u-overflow--auto auto
u-overflow--hidden hidden
u-overflow--visible visible
u-overflow--scroll scroll

overflow-x responsive

Class overflow-x
u-overflow--x-auto auto
u-overflow--x-scroll scroll

overflow-y responsive

Class overflow-y
u-overflow--y-auto auto
u-overflow--y-scroll scroll

-webkit-overflow-scrolling responsive

Class -webkit-overflow-scrolling
u-overflow--touch touch

display responsive

Class display
u-overflow-scrollbar::-webkit-scrollbar none

font-family responsive

Class font-family
u-ff--base Oxygen Mono,monospace
u-ff--alt Roboto,sans-serif
u-ff--system -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif

font-size responsive

Class font-size
u-fs--p-tn .75rem
u-fs--p-sm .875rem
u-fs--p-df 1rem
u-fs--p-md 1.25rem
u-fs--p-lg 1.5rem
u-fs--p-elg 1.75rem
u-fs--p-dlg 2rem
u-fs--h-tn 2.25rem
u-fs--h-sm 2.45rem
u-fs--h-md 3.6rem
u-fs--h-lg 4.25rem
u-fs--h-elg 6rem

font-weight responsive

Class font-weight
u-fw--thinnest 100
u-fw--thin 200
u-fw--light 300
u-fw--regular normal
u-fw--medium 500
u-fw--semibold 600
u-fw--bold bold
u-fw--extrabold 800
u-fw--black 900

line-height responsive

Class line-height
u-lh--zero 0
u-lh--one 1
u-lh--base 1.5
u-lh--normal normal

letter-spacing responsive

Class letter-spacing
u-lsp--base-neg -1px
u-lsp--zero 0
u-lsp--base .5px
u-lsp--alt .145rem
u-lsp--alt-neg .245rem

border-width responsive

Class border-width
u-border--zero 0
u-border--zero-i 0!important
u-border--one 1px
u-border--two 2px

border-left-width responsive

Class border-left-width
u-border-l--zero 0
u-border-l--zero-i 0!important
u-border-l--one 1px
u-border-l--two 2px

border-right-width responsive

Class border-right-width
u-border-r--zero 0
u-border-r--zero-i 0!important
u-border-r--one 1px
u-border-r--two 2px

border-top-width responsive

Class border-top-width
u-border-t--zero 0
u-border-t--zero-i 0!important
u-border-t--one 1px
u-border-t--two 2px

border-bottom-width responsive

Class border-bottom-width
u-border-b--zero 0
u-border-b--zero-i 0!important
u-border-b--one 1px
u-border-b--two 2px

border-color responsive hover

Class border-color
u-border--bg-alt
#1B232E
u-border--current
#a6c3e0
u-border--success
#2EFA5B
u-border--wh
#fff

border-style responsive

Class border-style
u-border--dashed dashed

border-radius responsive

Class border-radius
u-radius--zero 0
u-radius--zero-i 0!important
u-radius--px 1px
u-radius--two 2px
u-radius--four 4px
u-radius--eight 8px
u-radius--full 100%

border-top-left-radius, border-top-right-radius responsive

Class border-top-left-radius, border-top-right-radius
u-radius--t-zero 0

border-top-left-radius responsive

Class border-top-left-radius
u-radius--tl-zero 0

border-top-right-radius responsive

Class border-top-right-radius
u-radius--tr-zero 0

border-bottom-left-radius, border-bottom-right-radius responsive

Class border-bottom-left-radius, border-bottom-right-radius
u-radius--b-zero 0

border-bottom-left-radius responsive

Class border-bottom-left-radius
u-radius--bl-zero 0

border-bottom-right-radius responsive

Class border-bottom-right-radius
u-radius--br-zero 0

border-top-left-radius, border-bottom-left-radius responsive

Class border-top-left-radius, border-bottom-left-radius
u-radius--l-zero 0

border-top-right-radius, border-bottom-right-radius responsive

Class border-top-right-radius, border-bottom-right-radius
u-radius--r-zero 0

opacity responsive

Class opacity
u-opacity--zero 0
u-opacity--zero-i 0!important
u-opacity--tw .2
u-opacity--fi .5

margin-left, margin-right responsive

Class margin-left, margin-right
u-gutter--half -1.25rem/2
u-gutter--one -1.25rem
u-gutter--two -1.25rem*2

width responsive

Class width
u-width--auto auto
u-width--auto-i auto!important
u-width--zero 0
u-width--zero-i 0!important
u-width--px 1px
u-width--half (100% / 2)
u-width--g-14 (100% / 4)
u-width--g-16 (100% / 6)
u-width--g-18 (100% / 8)
u-width--g-34 (100% / 4 * 3 )
u-width--g-13 (100% / 3)
u-width--g-23 (100% / 3 * 2)
u-width--full 100%
u-width--screen 100vw
u-width--base 6rem
u-width--alt 4rem
u-width--mini-sidebar 14rem
u-width--sidebar 17.5rem
u-width--tn .75rem

max-width responsive

Class max-width
u-max-width--sidebar 300px
u-max-width--eighty 800px
u-max-width--mobile 480px
u-max-width--tablet 768px
u-max-width--desktop 1400px

min-width responsive

Class min-width
u-min-width--full 100%
u-min-width--screen 100vw
u-min-width--tablet 40rem

height responsive

Class height
u-height--auto auto
u-height--auto-i auto!important
u-height--zero 0
u-height--zero-i 0!important
u-height--px 1px
u-height--base 6rem
u-height--alt 4rem
u-height--ctrl 4px
u-height--tn .75rem
u-height--input 24rem

max-height responsive

Class max-height
u-max-height--full 100%
u-max-height--base 24rem

min-height responsive

Class min-height
u-min-height--full 100%
u-min-height--screen 100vh

box-shadow responsive

Class box-shadow
u-shadow--base 0 16px 54px 0 rgba(0,0,0,.02)

z-index

Class z-index
u-z--dropdown 3000
u-z--overlay 4000
u-z--modal 4001
u-z--header 1
u-z--zero 0
u-z--auto auto
u-z--unset unset
u-z--neg -1

vertical-align

Class vertical-align
u-align-y--t top
u-align-y--m middle
u-align-y--b bottom

align-content responsive

Class align-content
u-align-c--center center
u-align-c--start flex-start
u-align-c--end flex-end
u-align-c--between space-between
u-align-c--around space-around
u-align-c--stretch stretch

align-self responsive

Class align-self
u-align-s--center center
u-align-s--start flex-start
u-align-s--end flex-end
u-align-s--baseline baseline
u-align-s--auto auto
u-align-s--stretch stretch

align-items responsive

Class align-items
u-align-i--center center
u-align-i--start flex-start
u-align-i--end flex-end
u-align-i--baseline baseline
u-align-i--stretch stretch

color responsive hover group hover

Class color
u-current #a6c3e0
u-base #32d5f7
u-alt #FFBE2F
u-opt #ff2c77
u-ctrl #FF63FF
u-wh #fff

color responsive hover

Class color
u-bg-base #161c25
u-bg-alt #1B232E
u-bg-opt #212A37

color responsive hover

Class color
u-success #2EFA5B
u-danger #FF432F
u-warning #FF952F

background-color responsive hover

Class background-color
u-bgc--current
#a6c3e0
u-bgc--base
#32d5f7
u-bgc--alt
#FFBE2F
u-bgc--opt
#ff2c77
u-bgc--ctrl
#FF63FF
u-bgc--wh
#fff

background-color responsive hover group hover

Class background-color
u-bgc--bg-base
#161c25
u-bgc--bg-alt
#1B232E
u-bgc--bg-opt
#212A37

background-color responsive

Class background-color
u-bgc--success
#2EFA5B
u-bgc--danger
#FF432F
u-bgc--warning
#FF952F

background-color responsive

Class background-color
u-bgc--transparent transparent
u-bgc--transparent-i transparent!important

background responsive

Class background
u-bgc--none none
u-bgc--none-i none!important

flex-direction responsive

Class flex-direction
u-flex-row row
u-flex-row-r row-reverse
u-flex-col column
u-flex-col-r column-reverse

flex-wrap responsive

Class flex-wrap
u-flex-nowrap nowrap
u-flex-wrap wrap
u-flex-wrap-r wrap-reverse

justify-content responsive

Class justify-content
u-flex-justify--center center
u-flex-justify--start flex-start
u-flex-justify--end flex-end
u-flex-justify--between space-between
u-flex-justify--around space-around
u-flex-justify--evenly space-evenly

flex-grow responsive

Class flex-grow
u-flex-grow--one 1
u-flex-grow--two 2
u-flex-grow--three 3
u-flex-grow--zero 0

flex-shrink responsive

Class flex-shrink
u-flex-shrink--one 1
u-flex-shrink--two 2
u-flex-shrink--three 3
u-flex-shrink--zero 0

cursor

Class cursor
u-cursor--pointer pointer
u-cursor--text text
u-cursor--not-allowed not-allowed

transition

Class transition
u-transition--base .25s ease-out
u-transition--alt .33s ease-in-out
This page is generated automatically by C.U.M.O.
Use the force of utility classes, Luke...

©