Recycle your layouts!

Be green (with CSS) and save your sanity. There are so many combinations that can be achieved with one simple iteration that it doesn’t make any sense to start again from scratch just because it’s a new project.

I don’t see why so much time is being spent on rewriting a layout, when some tweaking in the stylesheets will get near-instant results. Of course, this will only work if your HTML isn’t cluttered with redundant markup or any quick hacks.

Let’s take a barebones example that can be applied for a lot of situations: I need a layout with a navigation bar, a search form, a login form and a sidebar.

The first example fits the bill for a simple, but functional layout.
Nothing fancy here. Just the basics to get the content styled, breadcrumbs and the above mentioned requirements. You might remember the Ouroboros logo from my earlier tutorial.

Using the same layout as a base, we can expand it a bit more using different styles and images. Some of you will recognize the SharePoint colors. But that’s just a start for the inspiration. You can use whatever else you have in mind. We will use the same CSS dropdown menu, but modify it to use icons in the links.

Take a look at the source for the second example. You will see the HTML is almost the same. The only content changes are simply the search form, which was moved up a bit and images in the navigation dropdown menu. The images were courtesy of the Tango Desktop Project.

Functionally, the two are identical. The only major changes were done with CSS. This is a good way to quickly make changes in a rush or apply changes with the majority of modifications taking place in the stylesheet. ASP.NET designers will find it handy since the easiest way to switch themes is to use the App_Themes folder and .skin files.

Just because you are limited to single theme elements by default in ASP.NET doesn’t mean you have to have limited style capability. In fact, there’s a trick you can use in ASP.NET that will make it easy to apply seperate styles for “screen”, “print” and “handheld” etc…

Simply create your StyleSheet.css file in the App_Themes folder under your custom theme.

Edit it by applying generic styles that will apply to all display forms on top.

E.G.

/* Common */
body
{
	font-family: Sans-Serif,Tahoma,verdana;
	font-weight: normal;
	font-size: medium;
	color: #000;
	background: #fff;
}

Then append the “screen” styles that will be for ordinary monitors

/* Screen */
@media screen
{
	 /*Stuff*/
}

Followed by “print” styles if you have any… And repeat this pattern for whatever other platforms you plan to support.

In the end, you should have something similar to this :

/* Common */
body
{
	font-family: Sans-Serif,Tahoma,verdana;
	font-weight: normal;
	font-size: medium;
	color: #000;
	background: #fff;
}
/* Screen */
@media screen
{
	/* Reset */
	body, div, p, h1, h2, h3, h4, h5, h6, form, fieldset,
	input, ul, li, table, td, th
	{
		margin: 0;
		padding: 0;
		border: 0;
	}

	body
	{
		font: normal 75% sans-serif,tahoma,verdana;
		color: #1d1d1d;
		text-align: center;
	}
	div.page
	{
		margin: 20px auto;
		text-align: left;
		width: 90%;
	}
	div.sidebar
	{
		float: right;
		width: 20%;
	}
	div.main
	{
		float: left;
		width: 80%;
	}
	h1, h2, h3, h4, h5, h6, p
	{
		padding: 5px 10px;
	}
	h1, h2, h3, h4, h5
	{
		font-weight: normal;
	}
	h1
	{
		display: block;
		font-size: 200%;
		padding: 5px 10px 0 10px;
	}
	h2
	{
		font-size: 180%;
		padding: 0 10px 0 9px;
	}
	h3
	{
		font-size: 150%;
		padding: 10px 10px 0 10px;
	}
	h4
	{
		font-size: 140%;
		padding: 0 10px 0 10px;
		line-height: 90%;
	}
	h5
	{
		font-size: 130%;
		padding:10px 10px 0 10px;
	}
}

/* Printer Styles*/
@media print
{
	body
	{
		font: normal 75% sans-serif,tahoma,verdana;
		color: #1d1d1d;
	}

	/* No need to print the sidebar and nested nav */
	div.nav, div.nav ul li ul, div.sidebar, p.skip
	{
		display: none;
	}
}
/* Portable device */
@media handheld
{
	/* Don't show sidebar  and nested nav, but show skip */
	div.nav, div.nav ul li ul, div.sidebar
	{
		display: none;
	}
}

 
In case you’re wondering, I used Visual Studio to nicely format that stylesheet. I know I’m lazy ;)
The layouts and stylesheets in the examples were done in notepad, so they don’t have the same nice formatting. I did it all as a quick sketch up. But I think you get the point.

Update

Made a few modifications and added a sidebar menu

Update 06/27/08

I added an index for the layouts and another new theme.

4 thoughts on “Recycle your layouts!

  1. Pingback: ASP.NET WebParts are bloated and stupid! « This page intentionally left ugly

  2. *applauds*

    This is ultimately what I’m after with my own website – design several CSS stylesheets that can be used interchangeably with perhaps a few template sheets that change the layout without having to do barely any HTML or PHP refactoring.

    http://www.csszengarden.com is one of my idols in this regard.

    By the way, I’m trying to redesign my own website and am short on inspiration. May I make use of your layouts? :P

  3. Go right ahead! :D

    Take, twist, mould do whatever you think you need to do.
    I’m just providing the flour, it’s up to you to make the bread ;)

    A note on interchangable stylesheets :
    You may notice that I tend to use a lot of div’s etc… Even on CSSZenGarden, they use a lot of container div’s.

    This is a good idea in the longer run so you have full control over every aspect of the content. Yes, it may seem a bit “wordy” when you do the HTML, but you only have to do this once. After that everything can be done via CSS.

  4. Pingback: Switchable stylesheets « This page intentionally left ugly

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s