Basic: The community version

A little while ago, I created a theme called “Basic” for corporate-ish websites and I’ve been getting requests for a community version; basically a version that would accomodate a blog/forum. I decided to reuse 90% – 95% of the original backend JavaScript to the discussion forum mockup (which I’ve renamed “Road”) including a lot of similar functionality. Except this time, I’m going for a more “component” oriented layout that I can easily turn into tabs. I created a simple tab plugin in jQuery to turn page elements into tabs with minimal overhead and I’m reusing a slightly modified version of the code formatting plugin in the topic page example .

Community index

 

Community tag browsing

 

Most of the changes really went to the topic view page. I made some changes to the code format snippet and moved the user info and avatar away to the side for clarity. The darker colors were partly inspired by the Sublime text editor (thanks to Shannon for mentioning it) as I found it easier to read large blocks of code on a darker background although I’m still not doing any syntax highlighting.

Forum topic view

 

Haven’t change much of the backend code of the add topic form, but I have changed the styling and streamlined things a bit.

Reworded instructions

Advertisements

Basic: A simple theme for corporate-ish sites

When I say corporate-ish, I mean totally serious and devoid of any shenanigans that may offend your boss… or you, if you’re that type of person. Deadline: 1 hour.

I was going to make this post before, but I just didn’t have the time. This was another design partly inspired by need and part by reader request. I got an email this evening by somone with a very similar need so I figured I’d post it here for anyone else to pickup.

“Basic” would fall into the simple-but-not-simplistic category of designs in that it’s got the bare essentials only, similar to the Simply theme, but with even fewer bells and whistles and yet is still clear, functional and usable. While it can be used as-is, it’s really a learning tool ment to be taken apart and reassembled with any additional hacks by the user. I also left out a lot of older cruft from pre HTML 5 designs as much as possible and the CSS also reflects more v.3 usage.

Basic: Front page

 

While creating this theme, I realised how similar the header is to the asp.net tutorial pages, especially the article header below the top links. This was purely coincidence since this was meant to be a bare minimum theme and Microsoft has a reputation for being terribly unexciting.

Header uses the same font and sizes

 

But since it looked similar at this point anyway, I decided to add a matching breadcrumb navigation…

Since we're this close. Why not go all the way?

 

The difference of course is that the HTML and CSS in my version are completely different. I.E. Simpler and straightforward. In the MS example, they’re using a paragraph with actual backlashes and s to denote seperators. This is way overkill and pointless so in my example, I’m using the <nav> tag and a <ul> list.

The backslashes are added via CSS “after” and “content” :

nav.crumbs ul li:after
{
	content: "/";
}
nav.crumbs ul li:last-child:after
{
	content: "";
}

Since most modern browsers support this anyway, and the fact that these are not inline links, but list items, it pretty well does exactly what a navigation list is meant to do.

The breadcrumbs are shown on the corresponding “topics” example page.

Basic with breadcrumbs

Borrowing from the Discussion Forum mockup where I had placed the new topic, login and registration forms on the same page, I included them on the bottom here and used an expandable “component” function. Basically takes any container with a “component” class and turns the elements inside into widgets with the first <h2> element inside as the handler instead of using jQuery UI tabs or accordion.

The JavaScript is otherwise the same as the forum mockup. Here’s that “component” function :

function initComps() {
	$('.components').children().each(function(i) {
		var b = $(this);

		// First element is usually the title/handler
		var hd = b.children('h2');

		// All other elements need to be wrapped up
b.children(':not(:first-child)').wrapAll('</pre>
<div class="blockct"></div>
<pre>');
		var ct = b.children('.blockct');
		var lnk = hd.append(' <a href="#" rel="showhide">(show)</a>');

		// Find the toggle link in the header and assign the control
		hd.children('a[rel="showhide"]').click(function (e) {
			ct.slideToggle();	// Toggle contents

			// Change link text
			$(this).text(($(this).text() == "(show)")? "(hide)" : "(show)");
			return false;	// Don't return
		});

		ct.hide(); // Initially hide everything
	});
}

If you think the opener to this post is odd : Not that I’m calling my boss boring…

…but I can’t think of a way to finish that sentence.

Bart Simpson

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.