Designer’s Block? Steal from Kyle Neath!

This is Part II on using other people’s hard work for personal gain. Please read Part I first.

Disclaimer

I use the term “steal” in this context obviously as parody. I have no intention of using someone else’s hard work for personal gain.

We now have a good starting point to go ahead and customize. But where to go from here?
We’ve already stolen from Microsoft, but that generic CSS file only took us so far. Well, for a lack of inspiration, let’s steal some ideas from the Hemingway WordPress theme by Kyle Neath.

I really like this theme in that there’s so much simplicity packed into such a complex arrangement… And I just realised that sentence makes no sense.

Things I like about Hemingway :

  • It has a sidebar
  • It has columns in the bottom of the page
  • It’s black

Adaptation

Earlier, we wrapped our paragraph around a “content” div. This is what makes a sidebar easy to insert.
Simply append the following to the HTML scaffolding right underneath our “content” div:

<div class="content">
	<p>Lorem ipsum...</p>
</div>
<div class="sidebar">
	<p>Sidebar content</p>
</div>

Note : Earlier we used “clear:both;” in our CSS for the header, body and footer. This is where that will pay off.

A sidebar isn’t a sidebar unless it’s off to a side.

In our CSS, add the following :

div.content
{
	float:left;
	display:inline;
	width:80%;
}

div.sidebar
{
	float:right;
	display:inline;
	width:20%;
}

We’re going to “float” the content portion to the left and the sidebar to the right. This is slightly different than in Hemingway where the sidebar is to the left. Also the div’s are set to “inline” meaning side by side just as you would have two <span> tags side by side.

The content, of course, is the main focus, so we give it 80% of the total available width. The remaining width is to the sidebar, so add and subtract if you need more or less.

Columns

Because these elements are floated, they would overlap the footer if it wasn’t cleared earlier. This is why I used “clear:both;” in the CSS.

Well, now that we have a sidebar, we also need those columns on the bottom of the page.

Go back to our scaffolding and append the following beneath our newly added sidebar :

<div class="sidebar">
	<p>Sidebar content</p>
</div>
<div class="columns">
	<div class="column">Column 1</div>
	<div class="column">Column 2</div>
	<div class="column">Column 3</div>
	<div class="column">Column 4</div>
	<hr />
</div>

We now have 4 columns that we can use in the HTML.

And in our CSS append to the “clear” CSS line we used earlier:

div.header, div.body, div.footer, div.columns, hr
{
	clear: both;
}

The reason I like to append to earlier code is so I don’t have to constantly repeat myself later.
We added that horizontal rule to, once again, make sure our content doesn’t overlap.

Then add this block to the CSS :

div.columns
{
	margin: 20px 0 0 0;
	display: block;
	background: #444;
	color: #eef;
}

div.column
{
	width: 24%;
	float: left;
	min-height: 150px;
}

div.columns hr
{
	background:#444;
	color:#444;
}

The “columns” div is our container for all the columns and I set a small margin on top so it doesn’t look too crowded. Each column is slightly less than an exact quarter width (24%) because we want to leave some margin for paddings and such. But, again, we set the minimum height so we have some room to work with. Also the percentages are to ensure the layout will remain fluid.

I also made the horizontal rule look invisible by setting its colors to the same background as our columns section.

But now our footer must also match the bars or else, it will look ugly.
Append the following to the CSS :

div.footer
{
	background:#444;
	color:#ccc;
	font:normal 75% Verdana, Helvetica, Sans-serif;
	text-align: center;
	text-transform:uppercase;
}

I’m using a different font because I want the footer to be prominent and clearly seperated from the rest of the content. Instead of typing everything in all-caps (which is a stylistic choice), I instead opted to use “text-transform” to make everything uppercase in the footer.

If you’re using all-caps for stylistic reasons, always use text-transform in the CSS. Never type in all-caps.

Let’s see what this all looks like.

Content

Now we need to add some actual “stuff” in there or else this won’t work properly.
Specifically an “About” blurb, a small list of links, some “other stuff” and a contact form.

These can be expanded upon, of course, but I’m just providing the basics to get the ball rolling.
Let’s take a look at how the page would look with these added… Yikes! that looks ugly.

Let’s add some refinement to our CSS to make this work better…
First edit our div.columns block and include the following :

div.columns
{
	margin: 20px 0 0 0;
	display: block;
	background: #444;
	color: #eef;
	font-size: 90%;
}

Then add the following to the stylesheet :

div.columns p
{
	line-height:150%;
}

div.columns p, div.columns h5
{
	padding:5px 10px;
}
div.columns ul
{
	list-style:none;
}
div.columns li
{
	padding: 2px 0;
}
div.columns li a
{
	padding: 2px 10px;
	border-bottom: 1px solid #555;
	display: block;
	text-decoration: none;
	color: #ccc;
}
div.columns li a:hover
{
	color: #eee;
}

div.columns h5
{
	padding:5px 10px;
}

form { display:block; }
fieldset
{
	padding: 5px;
	margin: 10px;
	display: block;
	border: 5px solid #eee;
}
div.columns fieldset
{
	padding:0;
	margin:0;
	border:0;
}

legend
{
	font-size: 130%;
	padding: 5px;
}

input, select, textarea
{
	font: normal 100% sans-serif,tahoma,verdana;
	color: #444;
}

select
{
	padding: 3px;
	margin: 0 4px;
	border: 1px solid #777;
}
div.columns input[type^='text'],
div.columns input[type^='password'],
div.columns textarea
{
	border: 0;
	display:block;
}
div.columns textarea
{
	width:100%;
}

What’s going on here?
First, we want to put some space in between our lines and maybe make the font a bit smaller.
The line-height that was 200% from before, is reduced to 150%. Also, the padding is changed to give us some more space to work with.

Then the links (specifically the unordered list) is changed a bit. The list-style is set to none so that we don’t have any bullets displayed.

We want the forms to be displayed as “block” meaning extend to the width of the container. This isn’t usually required, but I’m including it anyway for browsers that might skip it. The same is given to all “text”, “password” and textarea inputs within columns so they appear in the next line. This is much cleaner in appearence. Note: I’m using CSS2 selectors in this case. I find this a lot easier than plugging in “class” attributes into the HTML. If I can avoid cluttering the HTML with any style elements at any point, I would.

A “fieldset” is a collection of input fields. This is primarily used for accessibility, but it also helps order things around. There is a CSS block for “legend” though I didn’t use one in the contact form.

I don’t like how the default HTML buttons look in most browsers. Even on a Mac, they seem a bit showy and lacking in subtility.

Instead, let’s make them a little more presentable. Note : I’m again using CSS2 selectors for this so I don’t have to touch the HTML for style modifications.

input[type^='button'], input[type^='submit'],
input[type^='reset']
{
	padding: 3px 5px;
	cursor: pointer;
	background:#eee;
	color: #444;
	font-weight: bold;
	border: 1px solid #444;
}
input[type^='button']:hover,
input[type^='submit']:hover,
input[type^='reset']:hover
{
	color: #395e7e;
	border-color: #395e7e;
}

I think that about covers the the second stage for all this.
Let’s see what it looks like now.

I think this will do for most people to carry on from here. We can do some more refinements and additions until we finally take a look at the final product.

This is just a stepping stone to get you on your way.
Enjoy!

Update

I created a portal mod for this layout by modifying the CSS and introducing more content and a few more elements. Hopfully you will have some ideas on how to implement your own variations.

Update October 24, 2010

After a VERY long delay for various reasons (mostly other projects), I finally decided to put up a download page for the mod portal variation on Google Code.

Advertisements

7 thoughts on “Designer’s Block? Steal from Kyle Neath!

  1. Pingback: Designer’s Block? Steal from Microsoft! « This page intentionally left ugly

  2. I am a firm believer that there’s no such thing as a truly original website layout – everything takes particular stylistic elements from everything else. Not that there’s anything wrong with that! Especially if it’s Microsoft we’re taking stuff from. :P

    These are awesome tutorials. I’ve gotten better at CSS over the years (my first few wranglings with it looked worse than an MS-Word-generated HTML file – I just threw in everything I could to get it to look the way I wanted), but a lot of it still mystifies me in how it actually works. Of course, that may have something to do with the fact that every browser supports a different “standard,” but I do have one question for you:

    I know the “float” command has something to do with positioning an element, but I’ve never been able to actually put my finger on what it really does. Could you expound on how this works? Feel free to use your awesome tutorial here as context; I’ve read the whole thing. :)

  3. Thanks, Shannon!

    The “float” is basically like a loose-leaf paper.
    You can push it to the left or right of your workspace, but the browser won’t place it one on top of another because you don’t want your content to be hidden.

    So two floated elements to the same side will be like two pieces of paper next to each other on the same table on the same side.

    One floated element on one side and one more on the other side is what I used for “content” and “sidebar”. Except the sizes are exactly matched so combined, they fill up my workspace.

    Clearing “both” means that segment will have to be below all floated content above it.

  4. Pingback: Designer’s Block? Steal from Kyle Neath! " This page intentionally left … | CSS Tutorials - CSSHelper.net

  5. Pingback: Simple CMS with Linq to SQL « This page intentionally left ugly

  6. Pingback: Section5 – A design theme « This page intentionally left ugly

  7. Pingback: Simply: A stripped down blog theme « 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