Switchable stylesheets

The amount of time and effort that can be saved by using a single layout and moulding the CSS around it is immeasurable in most cases.

I wrote in detail about my motivations for doing this, but that post only contained a few small examples.

This time, I’ve updated my styles index to include a style switcher to futher demonstrate the importance of using a consistent layout. As long as your HTML scaffolding is not fiddled with, you can completely change the look and feel of a site using CSS alone.

The stylesheets were written in a very specific manner in order to accomodate ASP.NET App_Themes. It is far simpler to create one stylesheet and theme that will incorporate other devices than creating seperate stylesheets for each device and selectively loading them.

This is the most straightforward approach to reducing complexity.

To get your WebParts to accomodate this layout, read my previous post on tableless WebParts and WebPartZones.

These examples make heavy use of the jQuery library.

There are a few minor issues.
The drag n’ drop functionality is a bit shaky, but minimizing the webpart before moving it will solve this.
The minimize icon (plus/minus) will not change after the stylesheets are switched. But they will change once you click on them. This is a very minor issue and I didn’t spend any time trying to fix it. I thought getting the examples up there was more important. Feel free to use and improve.

Once again, these are only rough examples to get the ball rolling. Use them to create your own solutions.

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