UI Buddy

List of supported CSS properties

Complete list of all supported CSS properties, in alphabetical order, along with their corresponding class names that you can use to build your designs.

Reading the table

The 'Class Name' column gives you possible choices for declaring a class for any given property. For example, if you want to give an element a color of red, you have the following choices:

// COLOR
<p class="color:red"></p>
<p class="clr:red"></p>
<p class="c:red"></p>

Note: Any alternate name you choose as a class name that is not mentioned here won't work. So before you get all frustrated, be sure to reference this table.

It is worth mentioning here that this table consists of the most efficient and easy-to-remember names. After working with UI Buddy for some time, chances are you'll never need to reference this table ever again as you'll get used to the simple convention being followed here.

PropertyClass Name
animation[animation, ani]
align-content[alignContent, ac]
align-items[alignItems, ai]
align-self[alignSelf, as]
appearance[appearance, app]
background[background, bg]
background-attachment[backgroundAttachment, bga]
background-blend-mode[backgroundBlendMode, bgb, bgbm]
background-color[backgroundColor, bgc]
background-image[backgroundImage, bgi]
background-position[backgroundPosition, bgp]
background-size[backgroundSize, bgs]
border[border, bor]
border-bottom[borderBottom, bb]
border-bottom-color[borderBottomColor, bbc]
border-bottom-style[borderBottomStyle, bbs]
border-bottom-width[borderBottomWidth, bbw]
border-collapse[borderCollapse, bc]
border-left[borderLeft, bl]
border-left-color[borderLeftColor, blc]
border-left-style[borderLeftStyle, bls]
border-left-width[borderLeftWidth, blw]
border-radius[borderRadius, brad, borr, brr]
border-right[borderRight, br]
border-right-color[borderRightColor, brc]
border-right-style[borderRightStyle, brs]
border-right-width[borderRightWidth, brw]
border-top[borderTop, bt]
border-top-color[borderTopColor, btc]
border-top-style[borderTopStyle, bts]
border-top-width[borderTopWidth, btw]
bottom[bottom, b]
box-shadow[boxShadow, boxsh, bxsh, bs]
box-sizing[boxSizing, boxsz, bxsz, bxs]
clear[clear]
color[color, clr, c]
column-count[columnCount, cc, colc]
cursor[cursor, cur]
display[display, dis, d]
fill[fill]
filter[filter]
flex[flex, fl, f]
flex-basis[flexBasis, flb, fb]
flex-direction[flexDirection, fld, fd]
flex-grow[flexGrow, flg, fg]
flex-shrink[flexShrink, fls]
flex-wrap[flexWrap, flw]
float[float, flt]
font-family[fontFamily, ff]
font-size[fontSize, fts, fsz, fz]
font-style[fontStyle, fst, fs]
font-weight[fontWeight, fw]
gap[gap]
grid-area[gridArea, ga]
grid-template-areas[gridTemplateAreas, gta]
grid-template-columns[gridTemplateColumns, gtc]
grid-template-rows[gridTemplateRows, gtr]
height[height, h]
justify-content[justifyContent, jc]
justify-items[justifyItems, ji]
justify-self[justifySelf, js]
left[left, l]
letter-spacing[letterSpacing, ls]
line-height[lineHeight, lh]
list-style-position[listStylePosition, lsp]
list-style-type[listStyleType, lst]
margin[margin, m]
margin-bottom[marginBottom, mb]
margin-left[marginLeft, ml]
margin-right[marginRight, mr]
margin-top[marginTop, mt]
max-height[maxHeight, maxh]
max-width[maxWidth, maxw]
min-height[minHeight, minh]
min-width[minWidth, minw]
mix-blend-mode[mixBlendMode, mxbm, mxb]
object-fit[objectFit, objf]
object-position[objectPosition, objp]
opacity[opacity, op, o]
order[order, or]
outline[outline, out]
overflow[overflow, ov]
overflow-x[overflowX, ovx, ox]
overflow-y[overflowY, ovy, oy]
padding[padding, p]
padding-bottom[paddingBottom, pb]
padding-left[paddingLeft, pl]
padding-right[paddingRight, pr]
padding-top[paddingTop, pt]
pointer-events[pointerEvents, ptre, pe]
position[position, pos]
resize[resize, rsz]
right[right, r]
stroke[stroke, str]
stroke-width[strokeWidth, strw]
table-layout[tableLayout, tbl, tl]
text-align[textAlign, tal, ta]
text-decoration[textDecoration, txd, td]
text-overflow[textOverflow, tov, to]
text-shadow[textShadow, txsh, ts]
text-transform[textTransform, ttf, tt]
top[top, t]
transform[transform, trf, tf]
transform-origin[transformOrigin, tro]
transition[transition, tra]
transition-delay[transitionDelay, tradl, tdl]
transition-duration[transitionDuration, tradu, tdu]
transition-timing-function[transitionTimingFunction, transitionTiming, tratf, trat]
user-select[userSelect, sel, us]
vertical-align[verticalAlign, val, va]
visibility[visibility, vis, v]
white-space[whiteSpace, wsp, ws]
width[width, w]
word-break[wordBreak, wb]
z-index[zIndex, z]