Cheatography
Login Register

Monster Framework - Responsive classes Cheat Sheet

A Programming › CSS cheat sheet in English by anvesh

Monster Framework for Oxygen Cheatsheet!

CSS Framework Oxygen Monster Tailwind Oxymonster Oxymade
7,488 views 2,464 downloads 7 Dec 2020 History
PRs
Download

Display

Desktop classes

Display

grid
inline­-grid
displa­y-none

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

Badges

Downloaded from Unusual Locations × 1

Comments (1)

tripdog 21:32 29 Mar 2022

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

Reply

Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.