Mainframe is a CSS framework that can save you from a lot of code rewriting and make you develop faster. Although it is suitable for all CSS projects, if you are developing AJAX applications you will litteraly adore it.
Before I developed Mainframe, my CSS files used to be around 50 to 200 lines of code during the stage of prototyping. Now my files are 10 to 40 lines the most. Of course the real benefit here is not the size of the file but the peace of mind, knowing that the CSS "issue" is taken care of.
Inside the download package you will find the following two files.
The mainframe-main.css is the core of the framework. Inside this file lays the CSS reset and all the goodies I am going to explain bellow.
The mainframe-grid.css contains the grid system from the 960.gs project. Since there are already some great tutorials on 960 on the web I won't be covering anything related to the grid in this tutorial. If you want to learn how to use the grid system have a look at these great tutorials at webdesignerdepot.com and net.tuts+.
Each web application that respects itself must have a way to alert the user when things go wrong or to display information like "Your changes are saved". Mainframe has two sets of pre-defined message boxes. One with intencse colors and one with washed-out.
Have a look at the following example divs:.error
Let's have a look at the washed-out set as well.
This way you won't have to copy paste colors in your css classes ever again. You will have a consistent layout accross your application. Furthermore if you wish to alter the appearence you can easily override the above classes in your CSS file.
To style a table simply apply the mf_table class in the <table> tag. If you also wish to have alternating colors in the table rows, simple apply the classes odd and even in the corresponding <tr> tags. For example...
<table class="mf_table"> <thead> <tr> <td>Some random text</td> <td class="even">Some composer</td> <td>Do I like his music ?</td> <td class="even">A year</td> </tr> </thead> <tbody> <tr class="odd"> <td>Rendered her for put improved concerns</td> <td>Frédéric Chopin</td> <td>Yes</td> <td>1980</td> </tr> <tr class="even"> <td>Guest it he tears aware as</td> <td>Robert Schumann</td> <td>No</td> <td>1973</td> </tr> <tr class="odd"> <td>Although moreover mistaken kindness</td> <td>Franz Liszt</td> <td>Yes</td> <td>1993</td> </tr> <tr class="even"> <td>As some he so high down am week</td> <td>Richard Wagner</td> <td>No</td> <td>1967</td> </tr> </tbody> </table>
Produces this table:
|Some random text||Some composer||Do I like his music ?||A year|
|Rendered her for put improved concerns||Frédéric Chopin||Yes||1980|
|Guest it he tears aware as||Robert Schumann||No||1973|
|Although moreover mistaken kindness||Franz Liszt||Yes||1993|
|As some he so high down am week||Richard Wagner||No||1967|
One of the most common things you have to deal with everyday is things floating left or right. In mainframe any element with the class left is floating left and any element with the class right is floating right. Use a <div class="clear"></div> to get rid of the floats.
In the vast majority of web applications you have a lot of boxes, containing menus, information or other parts of the application. It is a good practice to have some space from one box to another in order to ensure people can easily identify each box with just one look. You can either have some <br />'s between boxes or manualy add some bottom margin to each box.
Mainframe offers a set of classes named clearXX. Where XX is a multiple of 10 from 10 to 100. When you have a div with a clearXX class you clear any floats used and leave XX pixels of vertical space. Have a look at the following example:
This way you can easily control the exact space between elements and get rid of floats at the same time.
Well that was all. If you have any ideas or comments you can give me a shout on twitter @vangelisb.