{Carrer web log} ←

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.

Benefits:

• Ultra small (compressed is only 0,25 kb or 8 lines of CSS!)
• Personalized width of the page in (%, px, em)
• Super flexible
• Easy to use

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:

Header

Navigation

2 – columns

4 - columns

3 -columns

Footer

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>
</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;
font-size:1.2em;
font-weight:700;
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. //  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. //  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 // 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. //  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. //  MacSkolan/Spotylist // 2/10/2009

   Why doesn't it validate? Anything important?
   http://bit.ly/7ZST  

6. //  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. //  Danny // 2/11/2009

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

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

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

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

   Lo so che lo sai!!!  

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

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

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

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

Post a Comment

<< Home