Fun With CSS Less (and GitHub).
I recently redesigned one of my first websites, an animated movies and games web portal known as TXM.com. With over a decade and a half of being on the web, my site has gone through a variety of languages and styles. When it first started, the site ran on flat files and I didn’t even know what CSS was.
But that was a long time ago. This time around, I’m running it on Rackspace Cloud servers at a minimal cost, I’m keeping the code open sourced on GitHub for anyone to play with, and I’m using CSS Less to stream line and organize all of the styles.
My goal with this design was to remove all of the sub-css files that litter my other projects. I wanted to finally build a site under a unified theme. My other goal was to remove as much imagery as possible (except for the media content icons).
Using CSS3 scale transform and a small bit of jQuery, I converted most links to have a subtle pop out effect and the whole site is driven by color variables and sizes, adjusted using CSS Less’s functions.
While not fully utilizing it, I took a lot of inspiration from Twitter Bootstrap. They’ve done some clever work with mixins and fluid widths to build out a great scaffolding toolset. Everything is divided into rows of 12 and it will scale for mobile devices.
In closing, I’m happy with the results. It’s a bit surreal to think how long I’ve managed this site, whether it is useful in today’s social networking or not. Unfortunately, Flash media is a dying art and TXM.com has been in archive mode longer than it’s been active, but it’s fun to keep it running.
I encourage you to also check out GitHub for Windows for GUI commits and SimpLESS to real-time compile your CSS Less. They’ve become my new favorite tools as I rethink how i develop.