Bugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Learn more.

Last week we started making the very neat header section. This article was very popular (we got a lot of reviews). So today I decided to continue begun design. Today we look at the most basic elements of a page such as blocks and forms. I think that if we make all the blocks with the same styles – it would be boring, so (for a change), I prepared four types of blocks with custom headers and footers. And, as a demonstration of the form design – I made the contact form. Now, this is complete design of a single page.

Before we start, I would like to show you what we are going to build today:

As you see – everything is very easy. There are only 2 columns in the main section and one footer element. And, there are various blocks in every section. By default, if you like to build a block – you have to use ‘block’ as a class name, if you like to change design of this block – you can add another class name (block_a, block_b or block_c). It will paint your block into different colors. You can also use headers and footers in your blocks (H3 elements with a class name ‘head’ or ‘foot’). And again, there are several classes available to customize headers or footers (head_a, head_b, head_c, foot_a, foot_b and foot_c). In the end – you can see the ordinary contact form.

Step 2. CSS

css/main.css

And now, the most important step – stylization. First of all – main layout styles (for columns):