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
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:
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>
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
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.
Find examples for formatted boxes here.
Find examples for formatted buttons here.