Maidenhead Glazing

Design and Responsive Build.

Local business Maidenhead Glazing, needed a simple one page online presence. There was no brief so my design was simple to present the information in a clear and concise way.

I used this project as an opportunity to try out SASS with Compass. Soon after starting with CSS pre-processing and choosing LESS, I felt that I had made the wrong decision. Lots of things I thought it should be able to do easily were difficult or impossible: using variables as CSS property names or in breakpoints for example.

I tried out Yeoman for my workflow, it's ace! One command sets up best practice project scaffolding (in this case using HTML5 Boilerplate), it's own test server with file watching and build scripts (using Grunt) and project dependancy management (using Bower). It includes Compass and Autoprefixer (very cool) out the box too - all automated!

After getting used to Semantic Grid for LESS I wasn't totally happy with Compass' built in grid system so opted instead to use Susy - SASS allows it to be very flexible.

Skills/Tools used: HTML5, CSS3/SASS (w/Compass & Susy), JavaScript/jQuery, Yeoman (w/Grunt & Bower), PHP

maidenheadglassandwindows.com

Maidenhead Glazing - design and responsive build