Mainframe CSS tutorial

For version 0.3 | Home page | A project by Vangelis Bibakis

What is Mainframe

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.

Main & grid

Inside the download package you will find the following two files.

• mainframe-main.css
• mainframe-grid.css

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+.

Message boxes

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
.notification .information

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.

Tables

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...

This code:

<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

Dealing with floats

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.

Positioning things

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.

That was all

Well that was all. If you have any ideas or comments you can give me a shout on twitter @vangelisb.

Cheers!