Styleguide for: Portfolio

This is the styleguide for the redesign of my portfolio website. For improved maintainability this style guide uses the same CSS files the portfolio website does. I will start with the most broad areas of CSS (e.g. typography and colour palette) and will hopefully end up with everything that I have used on the portfolio website being defined in here.

  1. Typography
  2. Colour Palette
  3. Logos
  4. Grid System

NOTE: in some places I will add some inline CSS. These are for simple styles that are used here but not on the actual site e.g. the colour palette squares.

1. Typography

Headings should be used where possible and they should be styled as follows:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Headings should inherit their font-color from their parents as follows:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

All text should use the Ubuntu font as hosted on the Google APIs site (https://fonts.googleapis.com/css?family=Ubuntu)

2. Colour Palette

These are all of the colours that are used for fonts and backgrounds. Before adding another colour, this should be consulted in order to be sure that a new colour is really needed. NOTE: the colour names are my own. NOTE(2): I understand that CSS Scripting languages such as Sass allow the use of variables for things like fonts and colours. When I get round to looking at these, I will go through and take advantage of them.

Black (#000)

Black is currently was being used as the main text color. I've changed it to Charcoal Grey to no noticeable effect. I can probably remove this.

Dark Charcoal Grey (#121212)

Dark Charcoal Grey is currently being used as a background colour when links over Charcoal backgrounds are hovered over.

Charcoal Grey (#161616)

Charcoal Grey is currently being used as a background colour for the main navigation and the footer.

Grey (#bbb)

Grey is currently being used for text over a dark background.

Light Grey (#e6e6e6)

Light Grey is currently being used for alternate striped backgrounds.

White (#fff)

White is being used for some fonts over a dark background as well as some white backgrounds.

Red (#870f0f)

Red is used for backgrounds to the About grid and for "hot" skill-boxes.

Orange (#ff6600)

Orange is used for the background to "warm" skill-boxes.

Yellow (#ffcc00)

Yellow is used for the background to "mild" skill-boxes.

Green (#00b147)

Green is used for the background to all qualification-boxes.

3. Logos

The following logo should be used. It is an svg image and should increase/decrease in size according to the browser width, but should never exceed 49% width.

4. Grid System

Introduction

The site has been designed with mobile first in mind. The design will then adapt to differing viewport sizes as required. In the mobile site everything will effectively be designed in a one column layout and where necessary, columns will be added to different sections of the page as and when the viewport width allows.

Different sections are using different columns at different times i.e. there are 3 columns in the Skills section and 2 or 3 columns in the main navigation.

Grid Class

A CSS class named 'grid' has been written. This class should be applied to every element that contains child elements intended for columnular layouts. It effectively clears the slate i.e. clears any previous floats and sets up 0 padding and margin.

.grid {
  clear: both;
  padding: 0px;
  margin: 0px;
}

Col Class

A second class named 'col' has been written. This class should be used to indicate that the current element refers to a column within a grid. It sets the 'display' property to 'block' - meaning that, when rendered, no other element will share the same line is the element. It then floats the element to the left and applies 1% top and bottom margins, 0 right and 1.6% left.

.col {
  display: block;
  float:left;
  margin: 1% 0 1% 1.6%;
}

The :first-child pseudo-selector is used to ensure that there is 0 left margin on the first child.

.col:first-child { 
  margin-left: 0; 
}

SpanXofY Class

The width of the column is decided by the use of span_x_of_y classes. I have implemented two column and three column layouts. More are possible.

The two column layout uses span_1_of_2 and span_2_of_2. The first assumes a two column layout and that the current element makes up one of the columns and the second assumes a two column layout and that the element takes up both them.

.span_2_of_2 {
  width: 100%;
}

.span_1_of_2 {
  width: 49.2%;
}

The three column layout works on the same basis.

.span_3_of_3 {
  width: 100%; 
}

.span_2_of_3 {
  width: 66.13%; 
}

.span_1_of_3 {
  width: 32.26%; 
}

At the start it was mentioned that the site was designed to work on all devices. Media queries are used to adapt the grid layout on different viewport widths. The example sets everything to 100% width for all grid layouts when the viewport is smaller than 480px.

@media only screen and (max-width: 480px) {
  .span_2_of_2,
  .span_1_of_2,
  .span_3_of_3,
  .span_2_of_3,
  .span_1_of_3 {
    width: 100%; 
  }
}

References

The grid system has been influenced by http://www.responsivegridsystem.com/