Umberto is an easy-do-use, lightweight and smart css framework for creating and styling websites. Umberto provides several css classes for quick and clean creation of layouts and this way enables you to create good-looking documents faster.

“There is neither painting, nor sculpture, nor music, nor poetry. The only truth is creation.”
—Umberto Boccioni, futurist

Getting started

First of all, in order to use Umberto, you are required to bind it to your document. This can be done by adding the following line to the <head> section:

Triple-click into the code!
For HTML 5:
<link rel="stylesheet" type="text/css" href="//" />
For HTML 4.01 and earlier:
<link rel="stylesheet" type="text/css" href="//">
<link rel="stylesheet" type="text/css" href="//" />

View in browser: style.css | layout.css | screen/layout.css | patch/layout.css

No installation needed!


Style Base delivers a standard stylesheet for fonts. It looks just as you can see it in this document. If you want to use your own font formatters, just attach a new stylesheet to your document and override the given formatters.

Please visit the fonts example page for seeing how Umberto comes out at his best.

Building page layouts

Umberto comes with three (or four) important classes which can be used to create coloun-based layouts, e. g. when you want to use sidebars on your page or simply want to float contents.

<div class="l">This one floats left.</div>
<div class="l">This one also.</div>
<div class="r">I am am taped to the right.</div>
<div class="clear"></div>

Looks like:
This one floats left.
This one also.
I am am taped to the right.

Clear up after floating!

If you float, you need to clear. Do not forget to build an element using the clear class after using the classes l or r.

Use l, r, c and m for text alignment

This text goes left using no class. You might also use l but have to put clear after.
This is in the center (simply c) and does not require the clear class.
When using r to aligh text to the right, you need to put an element using clear afterwards.

center vs. middle

By putting contents to the center (e. g. by using c) we mean to put them with the same distance to the left and the right. If you want to move contents in a block element (like div) to the absolute center (also the same distance from to to bottom) you can use the m class. m stands for middle.

This content is aligned by c and m in a 60 pixels high container.


Find examples for formatted boxes here.


Find examples for formatted buttons here.