Applying a Clean & Imageless Design to an Article – Part I




For Christmas this year, my beautiful wife gave me a copy of The Web Designer’s Idea Book, Volume 2. Obviously, I have been perusing the book, and I am finding that there are tons of awesome web designs to take in. I’m super happy with the gift and I expect that it will prove to be a highly valuable resource throughout 2011, and beyond.

Yet, even just a quick perusal of the book reveals the prevailing influence of Photoshop (or other graphics programs) on the industry at large. Today, the web is full of beautiful, rich and colourful graphics that continuously amaze and impress us in all manner of very legitimate ways. But just because we can include all of this incredible imagery, it doesn’t necessarily follow that we have to. Sometimes, the simple use of colour, shape and typography can create an attractive and elegant design all on its own.

In this first installment of a two part tutorial, I would like to show you how to use simple CSS to apply an attractive, well-balanced design to an article. Instead of just using meaningless placeholder text or writing something entirely new, I will also be using one of my favourite articles that I have written here at SpyreStudios, entitled “A Coder’s Journey”. So, let’s get started.

Step 1 – The HTML

Of course, before we start tackling any styling, we are going to need some HTML first. For our purposes here, we’re going to be using some pretty plain markup. The only anomaly you might find is that we wrap our content <div> in another <div>. This may not appear to have all that much of a purpose, but it will become important in Part II, when we will be introducing a sidebar and some jQuery goodness, so we’ll just leave it for now.

Here is the markup:

<!DOCTYPE HTML>
<html>
   <head>
      <title></title>
</head>
<body class="framed">
   <h1><span>A Coder's Journey:</span><span>Or, The Lessons I've Learned Along the Way</span></h1>
   <div class="clearfix">
      <div class="content">
         <p>As a web designer, coding is an important part of what I do. Recently, there has been some discussion in the design community about whether or not designers should know how to code. I&#39;m not going to get into that debate in this article.</p>
         <p>Suffice it to say that I do my work both in Photoshop and Coda, and actually do all my own coding by hand. For me, learning how to do it has been a long and interesting process that has spanned several years.</p>
         <p>I thought that it might be interesting to actually map the course of that journey, so that&#39;s what this particular article is going to be all about. Novices and beginners might be able to learn a thing or two from my mistakes. And as for you more experienced readers, hopefully you will be at least entertained or be able to relate to some of what I&#39;m talking about.</p>
         <h2>The Basic Story</h2>
         <p>Let&#39;s start with the recent past, head back to my beginnings and then move forward again. As of 2006, I completed five years of school at a small (but awesome) university near where I live. First, I did a four year program and graduated with a Bachelor&#39;s degree in English literature. I then blitzed through an intense eight month Master&#39;s program in the same field.</p>
         <p>A few months ago, I would have said that my degree is completely unrelated to what I actually do as a designer and developer. Some of my recent thinking has started to change that, though, as you can see in a pair of articles I wrote recently on the <a href="http://blog.echoenduring.com/2010/03/05/language-and-metaphor-an-alternate-view-on-coding-for-the-web/">relationship</a> between <a href="http://blog.echoenduring.com/2010/03/09/more-thoughts-on-language-and-coding-for-the-web/">language and coding</a>.</p>
         <blockquote><p>I don't remember this, but apparently at that age I was able to build a very simple program in Basic, with a little guided assistance from my dad.</p></blockquote>
         <p>Anyhow, that&#39;s all a very roundabout way to come to the point that, despite having not actually completed a PhD (something I did consider pursuing), I seem to have earned the nickname of &ldquo;<em>professor</em>&rdquo; in my family, especially from my father. My dad always supported my schooling, but he has often said that he thought I would have gone into something to do with computers or programming.</p>
         ...
         <p>Now it&#39;s your turn to share. What was your journey like? Did you follow a similar path, or did you come to coding through a completely different avenue? Let&#39;s hear some of your stories!</p>
      </div>
   </div>
   </body>
</html>

Alright, there are a few things worth noting here. First, you’ll see that we are technically using HTML5, with its simple DOCTYPE declaration. That’s about as far as it goes at the moment though. Technically, we could have used the new <article> or <section> elements, but I wanted to focus more on the design and CSS, without having to deal with issues of browser compatibility, so I kept it old-school with and used <div> elements.

You will also notice that I placed the main title and sub-heading into two different pairs of <span> tags. My rationale here is to be able to distinguish them as separate parts of the same basic element. Some might argue that it should be done with a first level heading (h1) and second level heading (h2). While I can understand the position of this argument, I don’t entirely agree, since the entire thing is actually the complete title, and stylistic differentiation that we’ll be doing is actually more presentational than structural. As such, I keep it all in the first level heading and just break things up with the <span> tags.

Lastly, you may also notice that I’ve truncated the article text in a few areas. I’ve included the header, a few paragraphs, a blockquote and then the ending of the document, but there was no need to reproduce the entire article here!

Step 2 – CSS Resetting

One of the very first things that I always do when I start on the CSS for any new web design project is to introduce a style reset. Fundamentally, this just strips off all the default padding and margins from elements and then, depending on the reset that you use, applies some basic stylistic treatments to different elements.

Now, while people like Johnathan Snook have written about why, strictly speaking, reset stylesheets are not really necessary, I do still like using them. I guess I am just more comfortable bringing everything back to a common baseline and then building up from there.

So, for the purposes of this project, we will be using Eric Myer’s excellent CSS reset code.

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
}
body {
   line-height: 1;
}
ol, ul {
   list-style: none;
}
blockquote, q {
   quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}

/* remember to define focus styles! */
:focus {
   outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
   text-decoration: none;
}
del {
   text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
   border-collapse: collapse;
   border-spacing: 0;
}

Also, because I typically don’t make any changes to the reset, and thus don’t really need to be able to read it, I will also strip off the line endings and make it one long line of code.

Step 3 – Basic Styles & Type

Alright, now that we’ve reset everything, we’re ready to start defining our styles. To start with, we’ll just apply some basic styles to the <body> tag. This allows us to make use of the natural behaviours of the CSS cascade, through which all of the other children of the <body> tag—which should be all visible elements—inherit these same styles.

body{
   font-family: Arial, sans-serif;
   font-size: 10px;
   line-height: 1.4em;
   color: #444;
   margin: 0px;
   padding: 10px 20px 0em 0px;
   background: #eee;
}

For the sake of this article, we will set the basic typeface to Arial in our first declaration. Personally, I would prefer the somewhat more appealing Helvetica, but I know there are some rendering issues with Helvetica on some Windows platforms. So, we’ll just go with the web safe clone that is Arial. We’ll also set our default font size to a nice, even 10 pixels.

Don’t worry, we won’t actually render any text this small, but it provides a nice simple base unit for us to run with. We’ll also set our line height to a nicely spaced 1.4em (we’ll be tweaking this as we go) and the colour to a much more readable #444 instead of a pure #000 black. This reduces contrast a bit and makes the type easier to read.

Now, for this design exercise, we’re also going to add in some extra typography styling using web fonts. Personally, I’ve always been partial to thick stroked, condensed sans-serif typefaces for headings and titles. They’re not appropriate in every circumstance, but I really love them and will be using the awesome League Gothic font, available from the equally awesome folks at The League of Moveable Type. Or, you can pick up a @font-face kit directly from the ever-useful Font Squirrel. That’s what I did, and I included the CSS from the kit, tweaking paths so that I can keep my font files in a sub directory.

@font-face {
   font-family: 'LeagueGothicRegular';
   src: url('fonts/League-Gothic/League_Gothic-webfont.eot');
   src: local('☺'), url('fonts/League-Gothic/League_Gothic-webfont.woff') format('woff'), url('fonts/League-Gothic/League_Gothic-webfont.ttf') format('truetype'), url('fonts/League-Gothic/League_Gothic-webfont.svg#webfontOTINA1xY') format('svg');
   font-weight: normal;
   font-style: normal;
}

Now we have our web font attached to our CSS and ready to use. We’ll get to that in a bit.

Step 4 – Paragraphing

With out basic styles in place, let’s turn to styling the biggest part of the document – namely all of the different paragraphs. First, we’ll start with some basic styles:

p{
   margin: 1.22em 0px 1.5em 0px;
   line-height: 1.41em;
   font-size: 1.4em;
}

We’ll start by bumping up our font size to 1.4em (1.4 x 10 = 14px). Then we need to readjust the line spacing again. Otherwise it will stick at 14px itself, inherited from the <body> tag. To me this is weird – I always feel that the line height should automatically adjust when the font size is adjusted – but that’s the way it is, and I’m sure there’s a good reason that I just haven’t considered. Right…?

Next, we’ll want to set our top and bottom margins to provide the proper spacing between individual paragraphs. By now you’ve probably noticed that we’re using some weird, fractional numbers here. The reason for this is that I attempted to use a simple 10px baseline grid to bring structure to the design. However, I wanted to use em units instead of static pixel units which, while more precise, are somewhat less flexible in terms of resizing.

We’ll touch on this in more detail at the end of this article, but that’s the reason you will see some strange, decimal values in the CSS!

basic paragraph styles set

Alright, now our paragraphs are nicely styled, but to make things a bit more interesting I often like to add a little something extra to the first paragraph, to help draw attention and really pull the reader in. So, we’re going to use some pseudo-classes to increase the size of the font in the opening paragraph and then transform the first line to bold, green small caps!

p:first-child{
   margin: 1.2em 0px 0.60em 0px;
   line-height: 1.64em;
   font-size: 1.8em;
}
p:first-child:first-line{
   font-weight: bold;
   font-variant: small-caps;
   color: #227722;
}

I love using :first-child and :first-line, which do pretty much exactly what their names suggest. The :first-child pseudo-class allows us to access the first child of an element, which can be incredibly useful in so many ways. One thing to note, however, is that this declaration targets the first child of an element, not the first instance of a particular type of child element. In other words, if there was another element before our paragraph, these styles would not be applied to the paragraph. However, there are some other selector techniques that we can use, which we will touch on below.

As for the first-line pseudo-class, that one targets just the first line in a block of text. It’s a nice little technique that allows you to do some cool things, like what we’ve done here.

One last note about these properties: remember that they are inherited. So, if we have a nested block of text that is wrapped in some other element, and if the first child is a paragraph, the :first-child declaration will be applied there too. In same cases you may need to use some reset styles to counteract this type of behaviour, as we’ll see below!

Step 5 – Containers and Links

Before we go much further, we’re going to very quickly deal with spacing and linking styling. First, you will notice that, in our HTML, we wrapped the article itself in a <div> with the class of “content”. Now we’ll just quickly limit its width and provide a bit of padding:

.content{
   max-width: 600px;
   padding: 0px 100px 10em 20px;
}

Now the content area will not stretch beyond 720px. Yes 720px. We have the maximum width of 600, but we’ve also added an additional 120px of padding to the left and right of the content area (20 on the left and 100 on the right). These extra pixels are calculated in addition to the declared width (or max width in this case), coming to a total of 720. Also, if you’re wondering why we’re adding so much padding on the right, it has to do with what we’re going to do with some blockquotes later on.

sizing the maximum dimensions of the container

Next, we’ll style our links.

a{
   color: #227722;
   text-decoration: none;
   border-bottom: 1px dotted #227722;
}
a:hover{
   background: #227722;
   color: #fff;
   border-bottom: none;
}

Here we set our link colour to the same green that we are using throughout the design. I’ve also removed the standard underlining in favour of using a single pixel dotted, bottom border. It achieves a similar visual effect, indicating that the text is an active link, but is just a bit more interesting than the default underline.

We’ll also set a hover state where we remove the border, add a solid green background and some white text.

styling the links, including the hover state

Step 6 – Article Headings

By this point the styling is coming along nicely, but we’re really going to need to do something with those headings, and that means it’s time to actually use our League Gothic web font. Here’s the style that we’ll apply to all of our <h2> elements.

h2{
   color: #227722;
   font-family: 'LeagueGothicRegular', sans-serif;
   font-size: 4em;
   text-transform: uppercase;
   width: 100%;
   border-left: 20px solid #222;
   border-right: 20px solid #ddd;
   height: 0.47em;
   margin: 0.62em 0px 0.64em -20px;
   padding: 0.24em 90px 0.05em 10px;
}

Most of the stuff here is pretty simple. We start by changing the colour to our standard green. Then we set the font family. Notice how we use the same identifier name (in single quotes) that was used in our @font-face declaration. Doing both alerts the browser to the presence of a web font and tells it which font is being used. The browser will then load that font (either from the website or from chache) and apply it like any other font. For instances where @font-face is not supported, we will just default to the standard sans-serif.

Next, we set our font size (League Gothic is a proportionately smaller font, so we need to make it a good size here, but not so large that the regular sans-serif will look ridiculous if there is no @font-face support). Then we’ll transform all of our text to uppercase to ensure that nice blocky look.

We set the width to 100% and then the right and left borders to 20 pixel solid colour blocks. This gives each title added visual weight and interest, and helps create a clear division between the different sections of the article. Then we play around with height, margins and padding in order to get the proper configuration, where the left border is set flush against the left edge of the window, and where the height of the block is pretty much exactly the same as the height of the text, creating a nicely balanced visual relationship between the titles and the surrounding blocks.

In this step, we will also make quick use of the adjacent sibling CSS selector in order to effectively mirror the first-line styling of our opening paragraph.

h2 + p:first-line{
   color: #227722;
   font-variant: small-caps;
}

Basically, this selector is telling the browser that this rule applies to the first line of any paragraph element that is the next adjacent element to an <h2> element. It’s a great little trick that allows affords remarkably precise targeting, and in this case, allows us to bring an added level of continuity to our design.

the styled headings help create sectional divisions

Step 7 – Blockquotes

Alright, now it’s time for some blockquote goodness, again turning to those ever useful CSS psuedo-classes. In this case, we are going to be treating our blockquotes as callouts from the main body, and as such will target the blockquotes directly. If you were doing a design that had both blockquotes and callouts, you could use a class to differentiate.

So, we’ll start off with the main blockquote styles:

blockquote{
   color: #888;
   font-family: Georgia, serif;
   line-height: 1.4em;
   width: 230px;
   margin: -2.65em -80px 0px 30px;
   float: right;
}

I like the contrast of using a serif font like Georgia here, and the negative right margin helps pull the entire callout slightly out of the main body text, thus brininging added attention to it through very deliberate imbalance. That’s also the reason why we added the extra right padding on the main content container earlier. See, I told you there was a reason.

setting up the basic blockquote styles

Now, at this point you may notice that the first line of the paragraph is actually picking up the :first-line styles that we set earlier. We don’t really want that here, so we’ll just write a few quick rules to override the inherited styles:

blockquote p:first-child{
   color: #888
   font-size: 1.8em;
   line-height: 1.66em;
}
blockquote p:first-child:first-line{
   color: #888;
   font-weight: normal;
   font-variant: normal;
}

The basic premise here is to just “undo” the styles that we set for the first line of our opening paragraph by setting them to match the rest of our blockquote styling.

Reset the styles inherited from our :first-child declaration.

These callout looks pretty good already, but we want to add an extra special touch by wrapping it in quotation marks. One common trick is to use an image in the background. While that works fine for the opening quote, we want a closing quote too, and positioning that with a background image can be a bit more tricky. Fortunately, with a bit of work, we can do it entirely with CSS. Here’s the code:


   blockquote p::before {
   content: '\201C';
   color: #227722;
   font-size: 2em;
   line-height: 0.5em;
   height: 0.25em;
   margin-left: -18px;
   margin-right: 5px;
   position: relative;
   top: 10px;
}
blockquote p::after {
   content: '\201D ';
   color: #227722;
   font-size: 2em;
   line-height: 0.5em;
   height: 0.25em;
   margin-left: 5px;
   position: relative;
   top: 10px;
}

Alright lets run through this real quick. We are using the ::before and ::after pseudo-elements, which basically allow us to “target” virtual content that comes before and after the contents of a given element – in this case any paragraph within a blockquote. The reason I call it virtual is that such content doesn’t actually exist within the HTML. It is actually added by the CSS. Using this technique is pretty much like any other CSS rule, except for one very important consideration – you actually need to declare some content to be included. Otherwise, there is nothing for the declared styles to work upon. In this case, we want open and closing quotes.

Now, you might think that we would use an HTML entity here, such as &ldquo;. Sadly, you would be mistaken. For reasons that I still do not quite understand, you need to use an “escaped reference to the hexadecimal Unicode character value” (quoted from this excellent article). As you can see in our code, that’s exactly what we’ve done. Knowing this ahead of time can save you hours of frustration and hair tearing agony.

With that taken care of, we actually have something for our styles to work on. So, we very quickly change the colour to green and adjust our font size and line height. Next, we do something weird and reduce the height to 0.25em. This reduces the actual size of the element, letting the contents overflow, and solves some nasty line spacing issues.

Next, we adjust some margins. These are different for the opening and closing quote. For the opening one, we use a negative margin to move it left, into the white space beyond the quote itself. The 18px left margin and 5px right margin pretty much brings the first word back into nice, flush left alignment with the rest of the of the text. On the closing quote, we just use a 5px left margin to give the mark a little room to breath.

Finally, we’ll set the entire thing’s position to be relative and then move it down 10px from its top position to bring it into better alignment with the rest of the text. There, everything looks great. We have nice blockquote styling done entirely with CSS.

using pseudo-elements to create quotation styles

There are just a couple of things to note. In this document, there is only ever a single paragraph in the callouts. As such, there are some inherited styles from our earlier p:first-child rule. If you had multiple paragraphs you would have to take this into consideration. Similarly, ::before and ::after pseudo-elements are being applied to each paragraph here. Again, with a single paragraph, it’s not an issue, but if you had more than one, you would need to distinguish with rules like

blockquote p:first-child::before { ... } and
blockquote p:last-chile::after{ ... }

Just something to be aware of.

Step 8 – Headers and Footers

Well we’re coming to the end here, and there’s really only a couple more things to do, with the main one being to style the title. Now, given the relatively simple structure of our HTML document, let’s take advantage of the block level nature of the <h1> element by using it to create the entire header:

h1{
   background: #444;
   margin: -1em -20px 0px 0px;
   padding: 1px 20px 2em 20px;
}

We just set the background to a dark grey and tweak the padding and margins to balance the actual content within the block.

Create a full header with the <h1> element

Of course, because the background is the same colour of grey that we set our text to back in step 3. So, now we’ll add some styling for the text, and this is where our spans becomes useful! We’ll start by just targeting spans in general:

h1 span{
   color: #eee;
   font-family: 'LeagueGothicRegular', sans-serif;
   font-size: 6em;
   text-transform: uppercase;
   display: block;
   margin: 0.5em 0em 0em 0em;
   padding-top: 0.52em;
   height: 0.47em;
}

On the first line, we set the colour of the text to a grey that almost looks white, but which is just a bit softer on the eyes that pure #fff. Then we’ll set our font to League Gothic and transform the text to upper case, just as we did with the <h2> tags. The primary differences is that, in this case, we’ll set the font size even bigger, to 6px. Then, to help with spacing, we’ll set the display mode to block and adjust the padding, margins and height (these properties work differently on inline elements like <span>).

create big, bold type for the title

Of course, all of this will apply to both of our spans, and we certainly don’t want our sub-title to be this big and bold. To fix this, we’ll come back to the adjacent sibling selector to get things looking just the way we want it to:

h1 span + span{
   color: #ccc;
   font-family: Georgia, serif;
   font-weight: normal;
   font-style: italic;
   font-size: 2em;
   text-transform: lowercase;
   letter-spacing: 0.075em;
   margin: 0.5em 0px 0px 0px;
   padding-bottom: 0em;
   padding-top: 0.5em;
   height: 1em;
}

Right off the bat, we set the colour to a slightly darker grey for visual contrast. Then we change our font to Georgia (like with our callouts), change the font weight to regular, italicize the text and bring the font size way down. We’ll also use a different text transformation and make everything lower case.

Next, we’ll very slightly increase the letter spacing. This is something that I will do quite frequently with Georgia, especially when italicized. It brings a little bit of extra visual interest to the typography treatment, and helps a bit with readability (I sometimes find the default tracking/kerning on Georgia to be a little tight when using italics). When adjusting letter spacing, just remember to use relatively small values. A full em unit is pretty huge and is probably not what you’re looking for.

The last few declarations just set some padding and sizing for the sub-title.

Tweak the styles of the subtitle

And we’re almost done! As one last finishing touch, we’ll flip back to the body and add in top and bottom borders so that the full rule will now look like:

body{
   font-family: Arial, sans-serif;
   font-size: 10px;
   line-height: 1.4em;
   color: #444;
   margin: 0px;
   padding: 10px 20px 0em 0px;
   background: #eee;
   border-top: 8px solid #227722;
   border-bottom: 5px solid #227722;
}

This is really just a bit of personal preference and could easily be left out and still have the entire design look great. I just like the extra splash of colour here, and find that it helps tie the whole thing together.

Use the border properties of the <body> tag to add green rules to the top and bottom

Notes on Units

Okay, so I promised that I would talk a little bit about the weird units that I was using throughout this tutorial. Basically, I wanted to create a design where the spacing of all the textual elements had some level of proportion to all the other elements. To do this, I basically faked myself a baseline grid. I created an image that would repeat a vertical line every 10px and set that to the background as I was playing around. Then, I very meticulously adjusted my em units for different textual elements until they all pretty much lined up with the grid.

Used a lined background to set some basic proportions

While things appear to line up in the screenshot above, a fraction of a pixel is actually lost on each line, so that by the time you get halfway down the page, the text is no longer aligned exactly to the grid. This is symptomatic of the browser’s rendering of em units.

Fortunately, the text blocks remain in proportion to each other, and that’s what I was aiming at achieving more than anything else, so I feel that the use of the grid served its basic purpose. I could have been much more precise if I had used absolute pixel values, but as stated earlier, I elected to go with the more scalable and fluid em option.

Conclusion

So there you have it. I know that this article was a bit on the longish side (okay maybe a lot on the longish side), but I hope that you’ve enjoyed it and been inspired with how a simple and attractive design can be achieved with CSS and absolutely no images. With increasing support for things like CSS gradients and other CSS3 goodness, the possibilities are becoming more and more diverse too!

Oh, and I’ve also provided a demo for you to check out too. This way you can see all of the styling as applied to the entire article.

Check out the demo

In Part II of this post, we’re going to be looking at something quite different, using a variety of different jQuery techniques to bring some added interaction to the design. That should be rolling over the next few weeks, so stay tuned


Matt Ward

About the author:

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. You can follow him on Twitter.

Comments:

Scroll back to the top
Content


Receive the top stories from SpyreStudios and the Splashpress Media network every week, right in your Inbox. Relevant and timely content is yours for FREE!