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

About these ads