Creating a Dummy Site - CSS Layout

My site after being "Normalized".

Long live the jazz

Last time I made a "dummy" site skeleton in HTML in order to inform my decisions when it comes to creating a fully-functional, easily-updatable Jekyll website.

Next step, use some CSS to jazz things up a bit!

Normalize.css

The way different browsers disply the same web page can be very different, escpecially on older browsers, so, in order to start my page off on a level footing, I'm using a CSS sheet called "Normalize.css". This is an open source CSS file that "makes browsers render all elements more consistently and in line with modern standards." You can read more about it here.

Laying it out there

At first, I've decided to make a site with an inherent width, that, when the window is WIDER than the content, centres itself in the middle of the browser. Everntually I plan on investigating the new @media rules in order to have a site that responds to different browser widths and looks good on other devices (such as phones and tablets), but for now, this will do for my needs.

Box-Sizing

I started by defining the following bit of CSS on *, the universal selector. This means it is applied to every element of the page (unless overwritten with higher precedence later on in the stylesheet.)

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Effectively, this makes each element behave more like you would expect (or, it feels more intuitive to me) when changing margins, padding etc. The browser-specific properties help to future-proof the CSS, so that if it is not fully supported yet, it will still do what you expect... mostly.

By setting the value to border-box, when we play around with the padding and margin, the overall size of the element doesn't change, which, for me, is very helpful in getting the layout to look the way I want.

With all this in place, we can work towards getting the elements to sit where we want, and behave the way we want around each other. The way I want my page to behave is to have a fixed width section that centres itself on wide screens. For an element to do this, we can our CSS like so:

.main {
    width: 1000px;
    margin: 0 auto;
}

This sets a fixed width on my div with the class "main", and, using a bit of shorthand, sets the top and bottom margins to zero, and the left and right margins to "auto"; this effectively gets the div to sit in the centre of the window, as we would like.

Rather than adding these properties to all my sections of content, I've defined them on a class called "center-global" and then added this class to any element I want to have these properties (like the header, main section and footer). This saves me from having the

width: 1000px;
margin: 0 auto;

repeated throughout the stylesheet.

Aside

I realise that I'm going backwards and forwards between the UK and US spelling of "centre". I feel better writing the word in the UK spelling when using it outside of code, but, to fit in with convention (and syntax), use the US "center". Probably just pedantic to use "centre" as well, but hey...

Overall structure

The way I structured my HTML was to put extra divs inside of the header, main and footer elements, and then set these INSIDE elements to centre themselves. In this way, the "header" element stretches the entire width of the screen, but, the inside div has a fixed width and won't expand further across the screen than the width I've set for it. This is similar in the main and footer section, effectively restricting the width of the content, but not the page.

Float on

The area of CSS I've found to be the most confusing so far is the layout, positioning and floating aspects. Occasionally everything works as I'd expect, but, mostly, things blow up and appear somewhere entirely different to where I wanted them to, or, sometimes don't appear at all.

I imagine the more CSS layouts I work on, the more it'll come to me, but, there's something slightly mysterious about the way all the elements interact with each other that I've not quite got a grasp on yet.

Having said that, in a simple website like this one, things aren't too bad. My header image (a "selfie" I took after losing $100 in the casino in Singapore), when set to 'float: left;' nicely clears my h1 title. Similarly, after adding an image to the "site intro" section (an Instagram photo taken inside the aforementioned casino), it can be floated so that the text surrounds it nicely.

Once I tried putting background colors on various elements however, I found that not everything was working the way I expected. After some research, I found that it was due to the "parent" containers "collapsing" due to the float behaviour.

The following bit of code, known as a "clearfix", comes to the rescue:

/* cf class definitions - clearfix for float problems */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1; /* for IE6 and IE7 */
}

Now, I can use the 'cf' class on my containers, and, fingers-crossed, everything should be where we want it to be!

Using a combination of floats and widths I created a basic layout for my dummy site, with everything sitting where I wanted it to, but, lacking any real style... Onwards and upwards!