Recap

In Redesigning My Portfolio Website pt 2, I created some basic content and placeholders for the site. In this entry, I will begin to add some basic styles the site.

Step 02 – Add basic styles

1. Typography

It is easy to underestimate how important typography is to the design of a website. Different font styles convey different meanings and different emotions to the reader, some are more legible than others and not all fonts work well with each other. Context, tone and the message is important.

Having said all of that, I have stated before that my initial goal is to produce an RWD design that scales well in a variety of viewport sizes. For the time being, I decided to use the fontface Ubuntu for all text on the page – if not only because it is a font that I like looking at. I decided to return to the subject at a later date, once I have achieved that task, and I have time to research proper typography guidelines.

/* import the Ubuntu font from Google Fonts */
@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,300);
/* apply the font to all body text */
body {
font-family: 'Ubuntu', sans-serif;
font-size: 16px;
}

view raw
fontface.css
hosted with ❤ by GitHub

2. Colour Scheme

I’ve always liked pairing deep reds with black or charcoal greys for headers and highlights as well as using whites and light greys for background colours. For this project, I chose to use these colours again. I have recorded the colours that I have used below (note: the colour names are my own):

  • Charcoal Grey (#161616) – main navigation and footer
  • Dark Charcoal Grey (#121212) – background highlights when main navigation and footer links are hovered over
  • Grey (#bbb) – the colour to use for textover a dark background
  • White (#fff) – the background colour for sections
  • Light Grey (#e6e6e6) – background for zebra striping of alternate sections
  • Red (#870f0f) – used as the highlight/jumbotron background colour
/*
* Colours to Use
*
* #161616 (Charcoal Grey) – to be used as background for main navigation and footer
* #121212 (Dark Charcoal Grey) – to be used as background highlights when main navigation and footer links are hovered over
* #bbb (Grey) – to be as used the colour to use for text over a dark background
* #fff (White) – to be used as the background colour for sections
* #e6e6e6 (Light Grey) – to be used as the background color for zebra striping of alternate sections
* #870fof (Red) – to be used as the highlight/jumbotron background colour
*
* NOTE:
* The names in brackets are mine. They may not (probably will not) correspond with standard CSS color names in most cases.
*
*/

view raw
colours.css
hosted with ❤ by GitHub

3. Layout

3.1 Simple Mockup

I am designing the layout with a mobile-first approach and as such I am going to vertically stack all content to begin with. I will then use the RWD developer tools in Chrome to expand the viewport and make adjustments as necessary. On narrow viewports, the navigation menu will be hidden and will be expanded when the user presses the menu button/icon.

Design Mockup
A quick mockup of the new website detailing basic design on a mobile

3.2 Divide content into bands/portions/sections

In order to achieve this layout I needed to add some markup that logically splits content into sections or portions. I have done this by wrapping each of the various sections or portions of content inside a div and added the class “section”, as demonstrated below:

<!– about –>
<div class="section">
<h2>About Me</h2>
<p>Hey! My name is Ricky. I am a software developer based in Biggin Hill, Kent. I am enthusiastic about software development (of course) as well as sports, music and various other things that normal human beings like.</p>
</div>

view raw
section-class.html
hosted with ❤ by GitHub

I then added some CSS in order to add padding to the top, bottom and sides all instances of the section class as follows:

.section {
padding: 3em 1em;
}

view raw
section-class.css
hosted with ❤ by GitHub

3.3 Add colour to footer and header

The header and footer sections of the page needed to have a charcoal grey background. I achieved this by adding the additional classes “header” and “footer” respectively:

I then added some CSS to provide the colour (note: I also changed the font-color so that it would be viewable against the charcoal background:

3.4 Reverse the colours in the logo

The logo (a black square with the white text “RM” inside immediately became almost unviewable once it was set against the charcoal grey background, so I reversed the colours:


Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

view raw
logo.svg
hosted with ❤ by GitHub

3.5 Add the jumbotron

I’ve seen the big, bold, coloured section which appears on the landing screen on many RWD sites (i.e. the red section on my mockup, above) being refered to as the jumbotron in HTML and CSS, so I’ve continued with the convention on my site as well.

<!– about –>
<div class="section jumbotron">
<h2>About Me</h2>
<p>Hey! My name is Ricky. I am a software developer based in Biggin Hill, Kent. I am enthusiastic about software development (of course) as well as sports, music and various other things that normal human beings like.</p>
</div>

view raw
jumbotron.html
hosted with ❤ by GitHub

I then added the CSS that gave it a red background:

.jumbotron {
background-color: #870f0f;
color: #fff;
}

view raw
jumbotron.css
hosted with ❤ by GitHub

3.6 Add zebra striping

I then added the zebra striping. In order to achieve the main content portions of markup inside a containing div with class=”content” because I wanted to apply the zebra striping to the non-header, footer and jumbotron section classes:

<!– content –>
<div class="content">
<!– skills –>
<div class="section"></div>
<!– qualifications –>
<div class="section"></div>
<!– employment –>
<div class="section"></div>
<!– examples –>
<div class="section"></div>
<!– contact –>
<div class="section"></div>
</div>

view raw
zebra-striping.html
hosted with ❤ by GitHub

I could then set the background of all .section with parent .content and then use the :nth-child CSS pseudo-selector to apply a different background on alternate children:

.content > .section {
background-color: #fff;
}
.content > .section:nth-child(2n) {
background-color: #e6e6e6;
}

view raw
zebra-striping.css
hosted with ❤ by GitHub

Screenshots

Step 2 can be viewed in full on the Step 2 tag. I have some screenshots seen on an iPhone 4 through Chrome’s Device Emulation Tool.

What’s Next?

In the next blog post I will add some features to the header and navigation:

  • Remove bullet points and underline
  • Add some :hover, :active etc. pseudo-selector styles
  • Implement a hide and show mechanism