Responsive HTML template using Sass

This template was created using the CSS preprocessor Sass and its framework Compass (if you are new to this you can read a little bit more about Sass and Compass on their respective websites). A demo of the template can be found here!

The template is perfect for a small agency or business as it is quite simple and straightforward. In the template I have included a slider for the front page (which is also responsive), a parallax effect, a gallery with a filtering effect, a contact form and a Google maps iframe.

Corresponding to the template, I have also written a thesis during this project.


Cascading Style Sheets (CSS) is the standard language for styling HTML documents. However, CSS lacks some of the most traditional programming constructs, such as variables, functions, loops and conditionals, which enable the reuse of code and structured programming. Therefore, maintaining CSS code proves to be difficult and challenging. A consequence of the lack of programming features is, that CSS developers are often forced to copy style declarations from one selector to another, resulting in inefficient and messy code. CSS preprocessors extend regular CSS with modern programming-language concepts, allowing programmers to use variables, functions, operations and nesting functions. One of the most popular CSS preprocessor is Sass (Syntactically Awesome Stylesheets), which extends regular CSS.


This thesis illustrates the importance of CSS preprocessors and the current trends in the industry. The focus lies on Sass and its framework Compass. A practical approach of the usage of CSS preprocessors is made by creating a responsive HTML template using Sass and Compass. The results show that CSS preprocessor can indeed be a valuable addition to the web design process if the developer is given enough time to comprehend the extensive features of preprocessors and how to use them accordingly.

View and download this thesis here!

This project has been completed during my internship at the London-based web company webdezign!