CA 2 - Code

Once my designs were finalised I start to code up the HTML and CSS. 

Before diving straight into the code I set up a few snippets to make the HTML / CSS easier.  

In my last project I mentioned that when padding is applied to a div it affects the width and height. This can very problematic especially when working with percentages. Paul Irish, a chrome developer, came up with a work around for this.  src

/* apply a natural box layout model to all elements */ * { 

-moz-box-sizing: border-box; 

-webkit-box-sizing: border-box;

box-sizing: border-box; }

When this is applied, padding can be added without affecting a div. This is extremely useful  and I use this in every web project I do. It is supported by most modern browsers up to IE8. 

My site is designed from scratch so I wanted to get rid of the browser default styling. I used a CSS reset src , to reset these. 

When a div is floated it is important to clear the floats as the documents box model is broken to allow for the floated div. If the div is not floated weird sh*t happens. In my last project I set up a clear class that cleared the floats. I did a bit of research and found out that the HTML / CSS purists considered this bad practise as it was not semantic (describes the content) and they discouraged using empty DIV's. I used the clearfix method instead, an additional div is not needed. Its hard to explain but an additional class is added to the parent DIV of the floated element. src

Another thing I did before starting to code was define the font-size of the text. 

body{

font-size: 100%;

}  /* sets 1em to 16px */

This sets the default font-size to 16px. I did some research on responsive typography and found out using the em value was the best way. I previously used px in every project. It is quite confusing but the method is simply. 16px = 1em so 32px = 2em. This may sound tough but its major advantage is that you don't need to adjust the font-size throughout the media queries. If you simply adjust the body{ font-size: 150%; }  1em = 24px. This article explains it a lot better then I can.  Problem tho is I already had coded up my site before I read this article so I set the values in the media queries.

Because of the screen resolution with mobile devices and tablets being so high I used SVG ( scalable vector graphics) so they would remain crisp. Only thing is that its browser support isn't great IE9+. Because the majority of mobile devices use webkit as the browser this isnt a problem on these devices. I have a javascript alert when the browser is IE, telling the viewer to use a modern browser.