Refactoring My Website - Part 2

In Part 1 of my website refactoring process, I looked at the overall state of the code in my website and considered some changes and improvements that I could implement without a huge amount of time and effort. I set up a Grunt file and started the process by changing my CSS files into SCSS files so that they can be generated by running the "grunt" task.

In this post, I will talk about how I continued the CSS/SCSS refactor and improved my Grunt file as I worked.

So, my to-do list was as follows:

• Turn CSS into SCSS (done)
• Split CSS into SCSS partials
• Consolidate duplicate CSS properties
• Change element selectors into classes
• Nest selectors
• Use variables
• Use mixins for projectlistitem selectors? e.g. projectlistitem-UKC
• Remove /*/mediaquery*/ hack from mediaqueries file (not sure what this is, perhaps it was to support IE7?)
• Adjust breakpoints (905px and 1105px??)
• Try to write code mobile-first i.e. no need for small-screen media queries
• Move media queries into classes or within partials

Split CSS into SCSS partials
Before I even opened up my favourite text editor (for this I am using Coda but I do like Sublime Text 2 as well), I opened my website in a browser, viewed the source and printed the CSS files (tn.css and tn-mediaqueries.css). I then spent around an hour scribbling notes on the printouts, looking for duplicate properties, thinking about the use of element selectors and specificity and how they can be amended/removed, highlighting potential variables and mixins/placeholders. I also concentrated on grouping the CSS as per Jonathan Snook's SMACSS guidelines which I am a huge fan of. It is suitable for small sites as well as large ones so I wanted to give it a go and see how it works for me.
 
I really liked the method of printing out the code and looking at it away from the computer. I found it easy to flick through the pages and check the different CSS, and it helped to make everything clear in my mind as I hadn't really looked at the CSS for quite a few years. I also felt it was a good warm-up to the main event of re-writing my code.
From my notes and scribbles I could see my files and folders within the "scss" folder would look something like this:

/base
> normalise.scss
> base.scss
> helpers.scss
> variables.scss
> mixins.scss (perhaps)
> placeholders.scss (perhaps)

/layout
> layout.scss

/modules
> header.scss
> navigation.scss
> breadcrumb.scss
> projectlistitem.scss
> footer.scss
...

/theme
> fontawesome.scss (might move this into modules)

I started to cut and paste the CSS from my tn.scss file into partials, and imported them using "@import" in "tn.scss". At this point I wasn't bothered about what would happen to my mediaqueries file as this would be dealt with in due course. I also took the opportunity to update my Gruntfile so that it watched for any changes in the "scss" folder, using the Grunt Watch plugin:

watch: {
        css: {
          files: ['scss/*/*.scss'],
          tasks: ['sass'],
        },
    },

and I set up my Grunt OS X notifications to save having to toggle to my Terminal window all the time:

notify_hooks: {
   options: {
     enabled: true,
     title: "Grunt tasks completed",
     success: true,
     duration: 5
    }
}

At times, I noticed that the Grunt notifications weren't displaying and when I checked the Terminal, it hadn't picked up changes to my new partials. I'm not sure why this was happening, but to check that the new tn.css file was being generated correctly I added a comment at the top of every partial:

/**** filename.scss ****/

This allowed me to quickly check the new changes were in the CSS file. I also found that quitting out of Terminal every now and then helped too. Again, no idea why...you can see the updated Gruntfile here. For now, I was happy with this; I could concentrate much more on the SCSS itself with the knowledge that some of my workflow was being dealt with separately.

Next, I moved on to changing the colours into variables. This was quite a good exercise as I had colours scattered throughout my partials, so I was able to briefly review the existing CSS code whilst swapping the hex's for variables. At this point it became apparent that I was using very similar colours throughout the site; #CCC, #DDD, #E2E2E2 - so I quickly compared them in Photoshop and where possible I tried to consolidate my colours.

Then came the fun part: improving the CSS proper, and making the changes to the markup. I made some placeholders for the common properties (e.g. used for h1, h2 headings), I changed all ID's to classes and I made sure I was no longer targeting element selectors i.e. I changed them into classes as well. I also changed any long CSS properties to short-hand to minimise the amount of lines in the CSS. Finally, I removed the now-deprecated <hgroup> element (in the Portfolio main page) and replaced it with <section class="...">.
Afterwards, I moved on to the media queries - I moved them inline within the partials files (therefore the link to the tn-mediaqueries.css file in every page would not be required) and I modified them so that the CSS is written from a mobile-first perspective. You can see a (mostly final) version of my SCSS files and Gruntfile here.

My next task will be to beef up my Gruntfile a bit more - but I'll leave that for another day (it is Christmas Eve after all!)

I hope you found my post useful and hope to see you for the next one!

Refactoring My Website - Part 1

It has been a while since I built my personal website, theo-nicolaou.co.uk. My main aim at the time was to keep it simple - updates had to be quick and easy, and I felt the design could be relatively simple too. I just wanted to be able to showcase my work and use the site as a mini-playground for experimenting and learning things like HTML5 and responsive design.

A few years down the line and the requirements haven't really changed. I'm happy with the design overall (although I might tweak it slightly in due course) and it is still pretty easy to update considering it is built by hand - adding a new item of work to the site, including preparing the images in Photoshop, takes no more than 30 minutes. However, the code behind the scenes is a little outdated so I thought I would take the opportunity to spruce it up a little and continue with the experimentation and learning. I have also been planning to create a basic Grunt file to eventually use in future projects - I thought I could get started on this by writing it in the context of my website.

This blog post is one in a series detailing how I went about my website refactor.

For reference, my website currently links to two CSS files - tn.css and tn-mediaqueries.css and a few JS files such as respond.js and HTML5 Shiv. My main focus to begin with will be the CSS files. As you can see, there are quite a few changes which I could make. Overall they wouldn't take a huge amount of effort but they would help improve the scalability and maintenance of the code:

• Turn CSS into SCSS
• Split CSS into SCSS partials
• Consolidate duplicate CSS properties
• Change element selectors into classes
• Nest selectors
• Use variables
• Use mixins for projectlistitem selectors? e.g. projectlistitem-UKC
• Remove /*/mediaquery*/ hack from mediaqueries file (not sure what this is, perhaps it was to support IE7?)
• Adjust breakpoints (905px and 1105px??)
• Try to write code mobile-first i.e. no need for small-screen media queries
• Move media queries into classes or within partials

I could probably review the names of the classes themselves, but I'll see how it goes after I finish everything else.

The Grunt file could include the following plugins:

• SCSS compilation
• Watch
• LiveReload
• Image Optimisation 
• OS X Notifications

And then if I wanted to extend it further, perhaps I could add these:

• Concat
• Minify
• Lint

First, I wanted to set everything up and make sure everything was working. I had to install Node.js on my Mac (and NPM, but Node.js includes this anyway), and then install Grunt. After that, my first milestone would be to convert my CSS into SCSS files, and then set up the Grunt file to compile back into CSS.

So, let's get started!

1. To install Node, go to http://nodejs.org and click "Install".
2. Then, run the following command to make sure you have the latest version of NPM:
   
   sudo npm install npm -g

After I installed Node and NPM, I moved on to setting up Grunt and the package.json file that goes with it. More details can be found all over the internet, mainly on the Grunt website but also I do like this tutorial alot.

I set up my package.json file by running the following command in Terminal:

npm init

This presents a series of basic questions to help set up your package.json file.

Then, I ran the following command to install the Grunt Command Line Interface (Grunt CLI). This will allow you to use Grunt wherever you like your machine:

sudo npm install -g grunt-cli

Finally, I created an empty Gruntfile.js in the root of my project. With the very basic foundations in place, I moved on to installing the Grunt plugins which would enable me to compile SCSS into CSS. All the plugins are installed using the command "npm install <plugin>". Top of the list was Grunt itself. I know, a bit odd that you need to install a Grunt plugin to use Grunt, when you have already installed the Grunt CLI. But, whatever...

npm install grunt --save-dev

When the first Grunt plugin is installed, a "node_modules" folder is created in the project root. Inside this folder are the relevant files for the Grunt plugins themselves.

Next I installed the Grunt Sass plugin (to compile SCSS into CSS). In addition to this, I installed the Watch plugin (to trigger compilation when any specified file types are modified), an image optimisation plugin to compress all my images, and the OS X Notifications plugin (because it is cool). I wanted to use the LiveReload plugin (because manually refreshing your browser is *so* last year) but I found out that it has been deprecated and the functionality moved into the Grunt Watch plugin.

npm install grunt-contrib-sass --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-image --save-dev
npm install grunt-notify --save-dev

Wow. I know what you're thinking: all this and still not anywhere near the CSS yet! Never fear, we're not far off the first milestone. I copied my two CSS files, saved them in a folder called "SCSS" and renamed them to "tn.scss" and "tn-mediaqueries.scss". Then, in my Gruntfile.js I added the configuration so that it would look at the specific SCSS files and compile them into the CSS files (with names that I specify). The Grunt file can be found here.

You'll notice that the file does not include any configuration for the other plugins - I will configure these and explain how I did this in a future post. For now, that's it - the ball is rolling on my website refactor project. I hope you enjoyed reading this post and I hope you will come back to read the next in this series, where I will continue with the code cleanup and the Grunt config.