Show Menu
Cheatography
  1. Home >
  2. Programming >

Monster Framework - Responsive classes Cheat Sheet by

Monster Framework for Oxygen Cheatsheet!

Display

grid
inline­-grid
displa­y-none

Display

Desktop classes

Grid template columns

grid
grid-c­ols-1
grid-c­ols-2
grid-c­ols-3
grid-c­ols-4
grid-c­ols-5
grid-c­ols-6
grid-c­ols­-none

Grid template rows

grid-r­ows-1
grid-r­ows-2
grid-r­ows-3
grid-r­ows­-none

Grid column start end

col-end-1
col-end-2
col-end-3
col-end-4
col-end-5
col-end-6
col-end-7
col-en­d-auto
col-st­art-1
col-st­art-2
col-st­art-3
col-st­art-4
col-st­art-5
col-st­art-6
col-st­art-7
col-st­art­-auto
col-auto
col-span-1
col-span-2
col-span-3
col-span-4
col-span-5
col-span-6

Grid row start end

row-auto
row-span-1
row-span-2
row-span-3
row-st­art-1
row-st­art-2
row-st­art-3
row-st­art-4
row-st­art­-auto
row-en­d-auto
row-end-1
row-end-2
row-end-3
row-end-4

Grid auto flow

grid-f­low-row
grid-f­low-col
grid-f­low­-ro­w-dense
grid-f­low­-co­l-dense

Gap

gap-px
gap-2
gap-4
gap-6
gap-8
gap-12
gap-16
row-gap-0
row-gap-2
row-gap-4
row-gap-6
row-gap-8
row-gap-12

Avatars

avatar
avatar-sm
avatar-lg
avatar-xl

Buttons

btn-pr­imary
btn-pr­ima­ry-­trans
btn-se­condary
btn-li­ght­-trans
btn-l
btn-m
btn-s

Background colors

bg
bg-primary
bg-sec­ondary
bg-ter­tiary
bg-alt
bg-white
bg-black
bg-pla­ceh­older
bg-pla­ceh­old­er-alt

Colors

color-­primary
color-­sec­ondary
color-­ter­tiary
color-dark
color-­par­agraph
color-­light
color-­par­agr­aph­-light

Cards

card-n­ormal
card-loose
card-tight
card-snug
card-r­elaxed
card-none

Border radius

rounded
rounded-sm
rounded-md
rounded-lg
rounde­d-full
rounde­d-r-lg
rounde­d-b-lg
rounde­d-l-lg
rounde­d-t-lg
rounded-r
rounded-l
rounded-b
rounded-t

Border width

border­-none
border-px
border-2
border-t
border-r
border-b
border-l

Border colors

border­-color
border­-co­lor-alt
border­-co­lor­-te­rtiary
border­-co­lor­-se­condary
border­-co­lor­-pr­imary

Align Items

horizontal
vertical
horizo­nta­l-wrap
centered
items-­center
conten­t-c­enter
conten­t-b­etween
conten­t-a­round

Width

w-auto
w-1by2
w-1by3
w-2by3
w-1by4
w-2by4
w-3by4
w-1by6
w-2by6
w-3by6
w-4by6
w-5by6
w-1by5
w-10p
w-full
w-screen

Height

h-auto
h-full
h-screen

Padding

p-0
p-1
p-2
p-3
p-4
p-5
p-6
p-8
p-12
p-16
px-1
px-2
px-3
px-4
px-5
px-6
px-8
px-12
px-16
py-1
py-2
py-3
py-4
py-5
py-6
py-8
py-12
py-16

Margin

mx-auto
my-auto
mt-auto
mr-auto
mb-auto
ml-auto
mr-0
mr-2
mr-3
mr-4
mr-5
mr-6
mr-8
mr-12
mr-16
mr-24
mb-2
mb-3
mb-4
mb-5
mb-6
mb-8
mb-12
mb-16
mb-24

Box shadow

shadow-xs
shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
shadow-2xl

Opacity

opacity
opacity-25
opacity-50
opacity-75
opacit­y-100
hover-­opa­city-0
hover-­opa­city-25
hover-­opa­city-50
hover-­opa­city-75
hover-­opa­cit­y-100

Headings

h1
h2
h3
h4
h5
h6

Text decoration

underline
hover-­und­erline

Text transforms

uppercase
lowercase
capitalize

Text align

text-left
text-c­enter
text-right

Font sizes

text-sm
text-base
text-lg
text-xl
text-2xl

Font weight

font-n­ormal
font-m­edium
font-s­emibold
font-bold

Icons

icon-s­m-p­rimary
icon-m­d-p­rimary
icon-l­g-p­rimary
icon-x­l-p­rimary
icon-s­m-dark
icon-m­d-dark
icon-l­g-dark
icon-x­l-dark
icon-s­m-light
icon-l­g-light
icon-x­l-light
icon-2­xl-­light
icon-s­oli­d-s­m-light
icon-s­oli­d-m­d-light
icon-s­oli­d-l­g-p­rimary
 

Responsive classes

All the responsive classes

Grid Column Start End - Responsive classes

xl-col­-auto
lg-col­-auto
md-col­-auto
sm-col­-auto
xl-col­-st­art­-auto
lg-col­-st­art­-auto
md-col­-st­art­-auto
sm-col­-st­art­-auto
xl-col­-st­art-1
lg-col­-st­art-1
md-col­-st­art-1
sm-col­-st­art-1
xl-col­-st­art-2
lg-col­-st­art-2
md-col­-st­art-2
sm-col­-st­art-2
xl-col­-st­art-3
lg-col­-st­art-3
md-col­-st­art-3
sm-col­-st­art-3
xl-col­-st­art-4
lg-col­-st­art-4
md-col­-st­art-4
sm-col­-st­art-4
xl-col­-st­art-5
lg-col­-st­art-5
md-col­-st­art-5
xl-col­-st­art-6
xl-col­-en­d-auto
lg-col­-en­d-auto
md-col­-en­d-auto
sm-col­-en­d-auto
xl-col­-end-1
lg-col­-end-1
md-col­-end-1
sm-col­-end-1
xl-col­-end-2
lg-col­-end-2
md-col­-end-2
sm-col­-end-2
xl-col­-end-3
lg-col­-end-3
md-col­-end-3
sm-col­-end-3
xl-col­-end-4
lg-col­-end-4
md-col­-end-4
sm-col­-end-4
xl-col­-end-5
lg-col­-end-5
md-col­-end-5
xl-col­-end-6
xl-col­-span-1
lg-col­-span-1
md-col­-span-1
sm-col­-span-1
xl-col­-span-2
lg-col­-span-2
md-col­-span-2
sm-col­-span-2
xl-col­-span-3
lg-col­-span-3
md-col­-span-3
sm-col­-span-3
xl-col­-span-4
lg-col­-span-4
md-col­-span-4
xl-col­-span-5

Grid Template Columns - Responsive classes

xl-gri­d-c­ols-1
lg-gri­d-c­ols-1
md-gri­d-c­ols-1
sm-gri­d-c­ols-1
xl-gri­d-c­ols-2
lg-gri­d-c­ols-2
md-gri­d-c­ols-2
sm-gri­d-c­ols-2
xl-gri­d-c­ols-3
lg-gri­d-c­ols-3
md-gri­d-c­ols-3
sm-gri­d-c­ols-3
xl-gri­d-c­ols-4
lg-gri­d-c­ols-4
md-gri­d-c­ols-4
xl-gri­d-c­ols-5
xl-gri­d-c­ols­-none
lg-gri­d-c­ols­-none
md-gri­d-c­ols­-none
sm-gri­d-c­ols­-none
You have to use grid class to work with these classes.

Height - Responsive classes

xl-h-full
lg-h-full
md-h-full
sm-h-full
xl-h-s­creen
lg-h-s­creen
md-h-s­creen
sm-h-s­creen

Display - Responsive classes

 
lg-dis­pla­y-none
md-dis­pla­y-none
sm-dis­pla­y-none
 
lg-hidden
md-hidden
sm-hidden

Font sizes - Responsive classes

xl-tex­t-2xl
lg-tex­t-2xl
xl-text-xl
lg-text-xl
md-text-xl
sm-text-xl
xl-text-lg
lg-text-lg
md-text-lg
sm-text-lg
 
lg-tex­t-base
md-tex­t-base
sm-tex­t-base
 
lg-text-sm
md-text-sm
sm-text-sm

Margin - Responsive classes

xl-mx-auto
lg-mx-auto
md-mx-auto
sm-mx-auto
  
md-ml-auto
sm-ml-auto
  
md-mr-auto
 
lg-my-auto
xl-mr-12
xl-mr-8
lg-mr-8
md-mr-8
sm-mr-8
xl-mr-6
lg-mr-6
md-mr-6
sm-mr-6
xl-mr-5
lg-mr-5
md-mr-5
sm-mr-5
 
lg-mr-4
md-mr-4
sm-mr-4
 
lg-mr-3
md-mr-3
sm-mr-3
 
lg-mr-2
md-mr-2
sm-mr-2
  
md-mr-1
sm-mr-1
 
lg-mr-0
md-mr-0
sm-mr-0
xl-mb-12
lg-mb-12
xl-mb-8
lg-mb-8
md-mb-8
sm-mb-8
xl-mb-6
lg-mb-6
md-mb-6
sm-mb-6
xl-mb-5
lg-mb-5
md-mb-5
sm-mb-5
 
lg-mb-4
md-mb-4
sm-mb-4
 
lg-mb-3
md-mb-3
sm-mb-3
 
lg-mb-2
md-mb-2
  
md-mb-1
  
md-mb-0
   
sm-mt-3
   
sm-mt-2
   
sm-mt-1
   
sm-mt-0

Width - Responsive classes

xl-w-full
lg-w-full
md-w-full
sm-w-full
xl-w-1by2
lg-w-1by2
md-w-1by2
sm-w-1by2
xl-w-1by3
lg-w-1by3
md-w-1by3
xl-w-2by3
lg-w-2by3
md-w-2by3
xl-w-1by4
lg-w-1by4
xl-w-2by4
lg-w-2by4
xl-w-3by4
lg-w-3by4

Padding - Responsive classes

  
md-p-1
sm-p-1
  
md-p-2
sm-p-2
 
lg-p-3
md-p-3
sm-p-3
xl-p-4
lg-p-4
md-p-4
sm-p-4
xl-p-5
lg-p-5
md-p-5
sm-p-5
xl-p-6
lg-p-6
md-p-6
sm-p-6
xl-p-8
lg-p-8
md-p-8
sm-p-8
xl-p-12
  
md-px-1
sm-px-1
  
md-px-2
sm-px-2
 
lg-px-3
md-px-3
sm-px-3
xl-px-4
lg-px-4
md-px-4
sm-px-4
xl-px-5
lg-px-5
md-px-5
sm-px-5
xl-px-6
lg-px-6
md-px-6
sm-px-6
xl-px-8
lg-px-8
md-px-8
sm-px-8
xl-px-12
 
md-px-12
  
md-py-1
sm-py-1
  
md-py-2
sm-py-2
 
lg-py-83
md-py-3
sm-py-3
xl-py-4
lg-py-4
md-py-4
sm-py-4
xl-py-5
lg-py-5
md-py-5
sm-py-5
xl-py-6
lg-py-6
md-py-6
sm-py-6
xl-py-8
lg-py-8
md-py-8
sm-py-8
xl-py-12
 
md-py-12

Align Items - Responsive classes

xl-hor­izontal
lg-hor­izontal
md-hor­izontal
sm-hor­izontal
xl-ver­tical
lg-ver­tical
md-ver­tical
sm-ver­tical
xl-hor­izo­nta­l-wrap
lg-hor­izo­nta­l-wrap
md-hor­izo­nta­l-wrap
sm-hor­izo­nta­l-wrap
  
md-cen­tered
sm-cen­tered
                       
 

Metadata

  • Languages:
  • Published: 7th December, 2020
  • Rated: 0 stars based on 1 ratings

Favourited By

tenlaven

Comments

This is great! Thank you for putting in the time to create it!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Selenium WebDriver Cheat Sheet Cheat Sheet
          Cypressio Cheat Sheet
          ISTQB Test Automation Engineering Cheat Sheet