UI Buddy

Syntax

Learn all about how to write your HTML using UI Buddy.

property:value

The basic syntax is literally any CSS property, followed by a colon, followed by the value you want to assign to that property. For example:

<h1 class="fontSize:14px"></h1>

This looks pretty much like CSS, except instead of using hyphens, we're using camelCase notation.

Click here to view a complete list of all supported CSS properties.

Units

The following table lists all supported CSS units:

UnitDescription
pxPixels
cmCentimeters
mmMilliimeters
inInches
ptPoints
piPicas
remRelative to the font-size of the root element
emRelative to the font-size of the element
exRelative to the x-height of the current font
chRelative to the width of the "0" (zero)
vwRelative to 1% of the width of the viewport
vhRelative to 1% of the height of the viewport
vminRelative to 1% of viewport's smaller dimension
vmaxRelative to 1% of viewport's larger dimension

Colors

You can define colors using hex codes, words, or even rgba notation! Examples include:

color:red
color:#ff0000
color:rgba(255,0,0,1)

background:red
background:#ff0000
background:rgba(255,0,0,1)

Shorthand and complex values

In case you want to define multiple properties by using a shorthand like padding, or a complex box-shadow such as 0 4px 7px rgba(0,0,0,0.2), use "_" (underscores) instead of adding spaces between values. For example, to add a padding of 2rem on top and bottom, and 4rem on left and right using the padding shorthand, you could write something like:

<div class="padding:2rem_4rem"></div>

And this will evaluate to:

padding: 2rem 4rem;

Sweet, isn't it?

Here are some more examples of complex properties:

// LINEAR GRADIENT
<div class="background:linear-gradient(to_right,#0000ff,#00ff00)"></div>

// BOX SHADOW
<div class="boxShadow:0_1px_3px_rgba(0,0,0,0.1)"></div>

//BORDER
<div class="border:1px_solid_#000"></div>

Just remember, whenever you need to add a space between values, use an underscore "_" and you're good. All other symbols such as parentheses, commas, hyphens, hash work just fine as they are.