I just made a pretty significant update to the site’s main navigation. Finally, I am using a more mobile-friendly menu system in which the various depths slide left and right as you drill down. This article about WordPress menu walkers was extremely helpful in getting all this to work correctly.
I probably should add a bunch of accessibility attributes, but that is a bit much for now. I’m just shocked the thing works.
Today I did a revamp of the site’s theme. Mostly this was because Prepros no longer supports Compass in its Sass implementation. I had to go through all my sass code and remove any Compass references and write my own mixins based on them.
In the process I managed to reorganize much of my code and make some style tweaks across the site. I am going to go with slightly bigger fonts and am now using a grid system based on the Bootstrap grid instead of the confusing Zen grid. The biggest change to the site is that now the most recent post appears in full at the top of the homepage with a little “New” label in the corner. Future is now!
As I mentioned a few posts ago, this site has received a major theme overhaul. Aside from a couple form element styles, this change was mostly structural and behind-the-scenes. The new theme is my first foray into using the SASS CSS preprocessing language. Let me tell you, it was a revelation. SASS allows you to write CSS using a super-clean tabbed coding style and (finally) allows the use variables and expressions in styles. I mean, look at this OCD coder’s dreamscape:
Gone are curly brackets and semi-colons. Now elements can be nicely nested within each other and there’s lots of neat shorthand to make code more portable.
Now, I am very late to this party and it turns out much of the SASS code you find on the net is written in a more standard CSS syntax (those sass files are saved as .SCSS rather than .SASS). I hope this cleaner, more modern syntax remains supported because I am completely sold on it.
For quite some time I have heard of SASS but have always been hesitant to dig into it because I always assumed that it was some server-side application that would require SSH and Linux and a bunch of crap I don’t care about. I have since realized that this is not the case. SASS files are compiled locally into a single, standard CSS file. Still, the first thing tutorials seem to tell you to do is to go install Ruby and dive into the command prompt. Yeech! Thankfully, smart people out there (“there” equals Nepal in this case) have developed a windows app that will compile and upload everything you need.
Prepros is a tiny little app that does it all and I highly recommend it if you are developing on Windows. It processes many other languages as well (including Jade and JavaScript) and, regarding SASS, also includes Compass.
Compass is a set of functions and extensions to SASS that makes cross-browser development super easy. A word of warning about Compass: unlike pure SASS it doesn’t work out-of-the-box and requires some research into creating a “config.rb” file. The Zen Drupal theme includes this file and I used that as a base, and I think I understand it now.
In any event, I’m syched about Web development for the first time in a long while and I am glad I made the leap. Also, support Prepros and buy a copy (or two).