Tom Bennet

Great Scott! With the site’s first birthday approaching, gets a much-needed upgrade.

1.21 Gigawatts with Flexbox and SASS

December 7, 2014

Great Scott!

With the site’s first birthday approaching, I felt that now was an ideal time to give a much-needed jolt of lightning.

The features page, on which all my long-form projects now live, represents my first foray into Flexbox. I’ve barely scratched the surface of what’s made possible by flex layouts, and I haven’t yet rolled it out site-wide, but suffice to say it really does make the CSS layout mechanisms of yore feel like 1955. Configurations which typically required bulky CSS frameworks or untidy hacks are made trivially easy.

Include the appropriate vendor prefixes and browser support is actually very good - well over 90% in the UK. Unsurprisingly, IE proves to be the biggest hurdle, with only the most recent version (11) featuring a full implementation. IE10 supports a now-outdated version of the syntax and requires the -ms- prefix, and as for showcasing your shiny new flexbox layout to your grandparents (9 and below), you can forget about it.

Browser support for flexbox, via Can I Use
Browser support for flexbox, via Can I Use

What else is new? I’ve converted to SASS as my CSS pre-processor of choice, and decided to pursue an OOCSS architecture and BEM-naming methodology in my future development work. All typography is now served via Adobe Typekit - here on the main site it’s Brandon Grotesque and FF Tisa Pro - and all pages are built upon the firm foundations of Normalize.css. Version control is handled on GitHub, with SSH deployment of my repository carried out using DeployHQ. I’ve also applied some of the lessons learned when creating my interactive projects, refining my approach to responsive, mobile-first design work.

I’m indebted to a number of extremely talented and generous developers who share their expertise with the wider community, whether by contributing to open source projects, speaking at conferences, or by maintaining blogs. To name just a few people whose work I’ve benefited from: Chris Coyer, Jake Archibald, Rachel Nabors, Lea Verou, Rachel Andrew, Jeffrey Zeldman, and Sara Soueidan. There are dozens more, but I can’t list them all here. To all: thank you!

Next, I’d like to take advantage of a static site generator - potentially Jekyll - as a templating engine. This should serve the dual purpose of both cutting production time on new content, and encouraging greater modularity in my front-end work.

Jekyll - Simple, blog-aware, static sites
Jekyll - Simple, blog-aware, static sites

I’m also interested in the exciting possibilities of OOCSS when fused with SASS. In keeping with my goal of greater scalability and modularity in my work, I’m keen to better compartmentalise the front-end features of my editorials for easier reuse, whilst still keeping them fully styleable to match the art direction of the page. Oh, and I’d like to play with Greensock, too.

Thanks for reading! See you in 2015. As Doc Brown put it:

Roads? Where we’re going, we don’t need roads.

Return to Blog