WordPress Theme

This WordPress theme was built to be reused multiple times for some of our clients at Astonish. I challenged myself to create a theme that was fast, flexible, sleek, and above all easy to setup. Our small team is often working on tight deadlines, and need to turn around work quickly to get client sites up and running. To cut down on development time for new clients I leveraged the power of Sass in order to easily customize the theme to match a client’s branding. The Sass file is outfitted with a few variables for colors and fonts that will  quickly change the look and feel of the theme. The Sass file is also riddled with conditionals that account for different variable values making setup a breeze. For example; the mixin I created for the button style will grab the call to action color that will become the background of the button, and set the text on top of it to the default light color, or default dark color to maximize contrast for improved usability.

Problem

One of the biggest problems I had to solve when building this theme was the rgba fallbacks for the 4 featured images on the homepage. The images have an element positioned on top of them that have an rgba background with some white text on top of them. In keeping with my simple setup mantra I am using a Sass function to take the primary color and darken it for each one of the images. This way you only need to add one variable rather than four separate variables for each one of the images. The issue is that IE8 doesn’t support rgba, and the text on top of the images is not readable without the background.

Solution

I decided that I would use some repeated transparent background images to mimic this effect in browsers without rgba support. However, I couldn’t simply crack open photoshop, create some 1×1 rgba .gif files with matching rgba colors because that would go against the entire purpose of this theme. Anyone going to use this theme in the future would have to manually generate the images every time, and that is unacceptable. What I ended up doing was modifying this php script  a bit to dynamically generate some transparent fallback images. All I needed to do was put an extra background property in my Sass function as a fallback and pass it the color value returned from the function. Voilà, an elegant solution for dynamically created fallback images for cross browser rgba support.