This post is about the technology behind our recently relaunched portfolio site and blog. The website works across many different devices and screen sizes. It has a very small footprint of less than 1MB for the entire site. I developed the website and wanted a chance to explain some of the aspects of the site that are working behind the scenes.
SASS or Syntactically Awesome Stylesheets is an extension of CSS that enables developers to write much cleaner CSS and make use of things such as variables and calculations which CSS does not support. Compass is a framework built on top of SASS which adds even more features such as the ability to automatically embed data-uri images and handle a lot of CSS3 vendor prefixing. For example, if you want to add rounded corners to a container, in vanilla CSS to get this working you would have to write:
Whereas, with compass, you simply have to write:
This short expression is then compiled in to the longer code above. It makes developing with CSS much more streamlined and simple.
- imagesLoaded to tell me when images are loaded
- touchSwipe for Mobile swiping on portfolio
And for IE (of course) some extras:
The blog uses a custom child theme of Twenty Twelve. The logo has been replaced with a version made up of over 9000 particles that form the text of the logo. When you mouse over the logo the particles are repelled away from the cursor in a circle. This particle logo is inspired by the techniques used in Grumpy Buffalo’s “Text Particles” Chrome Experiment.
Hopefully this post will give you some insight into the development of our new site. If you have any questions about the site’s development then feel free to email me at [email protected]
Also, you should follow me on twitter here.
willem & øen is a creative agency that was founded in London a little over a year ago. Learn more.