The Design

Every good web-site starts with an idea, but we're not here for web site ideas so we'll start with a design!

The actual design side of web sites isn't my strong point, implementation of designs is my thing.  I did my initial design for this site on paper and worked from there, with the design kind of evolving.  It's not my ideal method of designing a web site, much better to work with a proper designer. Some parts, such as the rounded borders and drop shadows were used purely for the sake of using some obvious CSS3 features.

It doesn't matter to me what format the initial design comes in, PSD, PDF, HTML/CSS or even Flash, as long as I can extract the images, colours, fonts and figure out the layout, I can turn it in to an efficiently crafted end result.

The next step after the design is received is to make a template file or two.  Essentially convert the design in to HTML/CSS on a static .html page.  Once the HTML version of the design is finalised, I can seperate out chunks of re-used HTML in to their own files and use PHP to output the final, dynamic pages.  More on that in the PHP Section of the site.

CSS3

CSS is used to separate the actual design styling of the site from the content.  The idea is to keep the two completely separated so my resulting HTML is compact, easy to work with and easily deciphered by search engines.  All pages use a common CSS file so page load times are faster as the style data is cached and doesn't need to be downloaded for every page.

CSS3 standards have been referenced and ahered to during the development of this site and validated at:

https://jigsaw.w3.org/css-validator/

I've used some CSS3 features, such as the rounded borders and drop shadows.  I probably wouldn't use them the way I have here for a "proper" site - they are predominantly used as they are easily recognisable CSS3 features.

SASS

I used SASS to make the CSS easier to manage.  For example, I'm using MIXINS and VARIABLES so I don't have to repeat values and properties and if I need to change them, I only need to edit a single line in a single file to affect the whole CSS (no searching and replacing in the final CSS file).

I've used SCSS syntax thoughout as the PHP SASS compiler only supports that syntax.

There are more MIXINS and VARIABLES used, this is just an example.

So if I want to recolour the site, I just change the colour variables and the CSS is automatically re-processed with the new style data.

I can also change the shadow and border styling throughout by simply editing the relevant MIXINS.

The variables and MIXINS are stored in a seperate file to the main CSS data for the site, meaning I can re-use them if I need CSS for different mediums (eg. mobile).

The SASSY CSS above is used the for the code boxes used throught the site. 

As you can see I've used those Variables for the rounded borders and colours and those Mixins for the drop shadow and the border styling.  Some styles, such as the style of the P tag in the code block header use nested styles which are great for helping coders better understand and edit the style sheet (actually I probably could achieve the same result without the nested style, but I wanted to demonstrate it in this example).

Also note the image that is used as a background.  It's url is specified relative to the style sheet, not the page - this means the server will always be able to find it without worrying exactly where the HTML page resides in the file system.

And here is the CSS all that SASS code compiles to:

It's more much efficient to edit your CSS using SASS!

Here's how the code block displays are represented in HTML (this example is the example code block from the homepage):

Nice, compact HTML with no un-necessary in-line styling - it's easy to understand and work with.

Fonts

I've used three web-safe fonts on this site, Verdana for most of the text, Arial for the navigation and Courier New for the code blocks.  I set the default size to 16px so browser settings don't mess up my layout and use em units for the other sizes (as recommended by W3C).

If you wanted to do something more interesting with fonts you could use these Google Fonts or Web Kit.  Google's fonts are nice and easy to use and also free, which is always an advantage!