{Carrer web log}

Blog about web design & development

Prototyping with Malo CSS Library

Monday, January 26, 2009 { 11 Comments }

Malo is ultra small css library for building web sites. It is meant to be structural base for small or medium web sites.


Malo is build of simple CSS reset and the grid system. You can personalize everything else.

Malo works on the principle that every column can be divided into two, three, four and five parts. It also supports nested columns meaning divided columns can be divided again and again forming complex grid.

Practically if we have one column of 100%
100% = 50% + 50% /divided in two

100%=33,33% + 33,33% + 33,33% /divided in three

100% = 25% + 25% + 25% + 25% /divided in four

100% = 20% + 20% + 20% + 20% + 20% /divided in five

Or more complex:

100% = 50% + 50%(33,33% + 33,33% + 33,33% ) / second half is divided in three

Can you see the potential?

Lets Prototype!

We want site which has 955px width (we can use % or ems), centered layot and looks something like this:



2 – columns

4 - columns

3 -columns


First you should the naming system of Malo we have only .dp (div percent) and .clear class. Meaning dp20 is div 20%.

And that is it!

Some code

Ok we don’t have the main center container, so lets build it:

.main {   margin:0 auto; width:955px; }

And the structure:

<div class="Main"></code>
<div class="dp100">Header</div>
<div class="clear"></div>

<div class="dp100">Navigation</div>
<div class="clear"></div>

<div class="dp50"> 1 Column</div>
<div class="dp50"> 2 Column</div>
<div class="clear"></div>

<div class="dp25"> 1 Column</div>
<div class="dp25"> 2 Column</div>
<div class="dp25"> 3 Column</div>
<div class="dp25"> 4 Column</div>
<div class="clear"></div>

<div class="dp33"> 1 Column</div>
<div class="dp33"> 2 Column</div>
<div class="dp33"> 3 Column</div>
<div class="clear"></div>

<div class="dp33"> Footer</div>

And the structure is ready!

We can add some text, pictures and navigation. In that case, we need some css:

We need to connect the main css library malo.css:

<link rel="stylesheet" href="css/malo.css" type="text/css" media="screen">

Then to add some extra css for navigation, images and border:

/* top border */
.dp100,.dp50,.dp33,.dp25{ border-top:1px solid #111;}

p { padding:1em 0 1em 1em;color:#111;}
p img   { float: left; margin: 0.3em 0.5em 0.5em 0.5em;  }
p img.right { float: right; margin: 0.3em 0.5em 0.5em 0.5em;  }
blockquote { padding-left:1em;  font-style:italic;  }

/* navigation */

#nav {
margin: 0;
padding: 0 0 0 10px;
list-style-type: none;
float: left;

#nav li {
margin: 0;
padding: 0;
float: left;
width: 70px;

And the final result:

The Result

Malo is tested almost in every browser. In IE you have around minus 1px for only column. IE doesn’t handle percentage calculation very well without this fix there is a possibility that the grid won't work correctly.

You can download Malo at: http://code.google.com/p/malo/

11 Responses to “Prototyping with Malo CSS Library”

  1. // Blogger Danny // 1/28/2009

    ciao Vladimir, mi chiamo Daniele e gestisco il blog ALTAMENTEDEORATIVO.COM.

    vorrei chiederti il permesso di tradurre la tua pagina in italiano (se non lo hai già in programma tu)

    dai un' occhiata al mio blog e se ti piace l'idea fammi sapere.

    chiaramente i credits ti verranno dati ed anche i linkbacks.

    aspetto tue notizie.  

  2. // Blogger Vladimir // 1/28/2009

    @Daniele:Hai mio completo permesso. Fai pure la traduzione. Hai sbagliato il nome di tuo blog? Intendevi altamentedecorativo.com mancava solo una "C" :)  

  3. // Anonymous Anonymous // 2/05/2009

    Sarebbe utile aggiungere altre classi per realizzare suddivisioni asimmetriche, ovvero le percentuali 80, 75, 66 da accoppiare a quelle che hai già inserito:

    .dp20 -> .dp80
    .dp25 -> .dp75
    .dp33 -> .dp66  

  4. // Blogger Vladimir // 2/06/2009

    @Scaracco:E vero.C'è tutto dentro Emastic(plugins->percent-grid.css).

    Da dp5 fino dp100.

    Quindi anche:

    dp40 -> dp60 ...

    Con Malo volevo fare "Keep it very very simple"  

  5. // Blogger MacSkolan/Spotylist // 2/10/2009

    Why doesn't it validate? Anything important?

  6. // Blogger Vladimir // 2/11/2009

    @MacSkolan: Because of the IE hack: *margin-left:-0.04em;. This hack is essential for IE.
    The "*" is the problem for validation.

    You can resolve this problem by using Conditional comments (http://www.quirksmode.org/css/condcom.html).  

  7. // Blogger Danny // 2/11/2009


    Vladimir is right but remember that conditional comments may slow down the rendering of the page (more http requests)  

  8. // Blogger Vladimir // 2/11/2009

    @Danny: Yes I know ;). That is why I don't use them for Malo.  

  9. // Blogger Danny // 2/11/2009

    Lo so che lo sai!!!  

  10. // Anonymous Anonymous // 12/30/2009

    Hey very nice blog!! Man .. Beautiful .. Amazing .. I will bookmark your blog and take the feeds also...  

  11. // Anonymous ardianzzz // 3/25/2011

    WoW! Awesome CSS framework! No fluff. no bulshit! i love this. :D  

Post a Comment

<< Home

RSS IconTwitter icon Twitter icon Twitter icon

About Me <<<

Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...

My projects <<<

§§Previous Posts <<<

Hand Drawn Icons

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License