Demac Media

My Role

Front and back end developer


The Brief

A friend of mine started working at Demac Media last year and mentioned my name as a potential freelance developer for their upcoming site redesign. I sat down with the team at Demac to go over their initial designs and was blown away. There were some bold approaches that certainly needed some more research before I could commit to building them, and it was a challenge I welcomed warmly.

The new build was to be a custom WordPress theme that kept compatibility with their old site's structure and content, including some existing custom post types and settings.

The Solution

This being the first WordPress project I started from scratch in a while, I decided to create some tooling to go along with it. I personally am a Gulp fan so went with that (though I did start with a pre-built Grunt workflow). I'll post my actual workflow at some point, in the meantime it consisted included:

  • Sass > autoprefixer > css minification with sourcemaps
  • Uglify JS (into three main scripts, loaded conditionally depending on the template)
  • SVG icon optimization > SVG sprite
  • Image optimization for all theme images
  • Browsersync for keeping all my browser in sync

I'm a big advocate for Advanced Custom Fields, a WordPress plugin that allows you to add fields to specific pages, posts, or any other taxonomy on WordPress. We used this extensively to create reusable modules and easy content editing — strictly staying away from the rich text editor that is typically used.

One of the most challenging parts of the site was a 3D carousel developed for the Services page. It got me working with the canvas element to generate randomly animated background circles, and some slick CSS3 transitions to mimic 3D rotating slides.

Demac Media Services Carousel GIF

Flexbox played a large role in the layout of multiple modules — the first time I've used it so extensively. By doing so it brought up how buggy it still is in some versions of IE, but also how blessed devs are that we can use it at all. Things as simple as keeping all boxes in a row the same height or aligning buttons inside elements without resorting to absolute position hacks or javascript was a blessing. It looks extremely clean and organized, regardless of content, and with sensible fallbacks it looks great everywhere.