{Carrer web log}

Prototyping with Malo CSS Library

Monday, January 26, 2009 { 10 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/

Formy CSS Framework out of Beta

Thursday, January 15, 2009 { 8 Comments }

After long beta1 and beta2 test period Formy is in 0.8.

What is new?

I merged reset.css into form.css. I fixed some bugs in form.css and the code it reorganized giving you more space for personalization.
Now the form.css is made of reset, structure and color palette.

What is the idea behind Formy?
Formy is build to help you mange web forms in more natural way. No lists no tables just CSS and br for the structure of HTML .

What to expect from the new version?

More personalization(color palette)
Errors management

Examples and download at:http://code.google.com/p/formy-css-framework

2008 Summary Report

Thursday, January 01, 2009 { 2 Comments }

This was one creative year!

Now my colleges cool me "Uomo Framework" or Framework Man. Probably because I build 4 CSS Frameworks at 2008 :)
I started with Hartija CSS Fraemwork for web printing.One client ask me to improve the printing layout for his site. I gathered all experience from the project I did some additional research of all best practises for usability, readability and web printing with CSS. And the result was Hartija universal CSS for web printing.

I always had hard times with web forms, rebuilding the same CSS code over and over. Why not this time build it once and use it in all web forms? Formy - CSS Framework for building web forms.

Than I couldn't stop here I needed new challenge. To build CSS Grid Framework who will resolve all the problems of the current CSS Frameworks( Blueprint, 960 and YUI).
The framework who will have minimum size, who will be fluid and em based (elastic).
And the result is Emastic giving optional main width, fluid columns, less then 4kb size, baseline typography, totally em based(elastic) structure, possibility of nested DIVs etc.

In the second and third version of Emastic in the plugins I added percent grid system and absolute grid system (based on absolute, relative positioning). Building one complete framework who will handle almost all CSS structural problems.

Then I stooped asking myself when you need so complex CSS Framework, probably if you building some newspaper site or site with very complex grid. But I presume you don't build newspaper site every day.
I took percentage-grid.css from Emastic I did some CSS refactoring and I build Malo super small and simple CSS Library(Framework).

One other PHP project completely deluded my expectations: MySql Lite Administrator, I worked very long and hard on this project but I didn't receive much PHP community love. Maybe there is already so much PHP code out there, but is always hard when your free project doesn't get much feedback.

Statistics:

Statistic 2008

Project Name:	Visits	Pageviews
Hartija - CSS Print Framework	21,987	35,731
Formy - CSS Form Framework	18,939	38,832
Emastic - CSS Grid Framework	34,391	78,444
Malo - CSS Library	17,195	35,731
MySql Lite Administrator	2029	4051

Plans for 2009:

Emastic,Formy and Malo out of beta.
I'm working on some new CSS things :)
Also on one PHP Framework.
I have at least 2-3 new ideas every day and little free time :)

Thank you!

I wish you lot of love and understanding at 2009 !