Wonderflux version 2 features an all-new grid system called Flux Layout, a new Responsive CSS framework I have developed.

Wonderflux has always had a dynamic grid system from the very first beta – originally based on BluePrint CSS. Rather than be a static file – it allowed you to input your own column settings (width of main content area, number of columns, width of column etc) and dynamically generate a CSS layout grid system to your recipe – event generating the gutters for you.

It was kinda cool in it’s time, but was looking a-little long in the tooth after it’s initial creation in 2011 – especially as it was fixed pixel measurement based (which eventually became it’s major downfall).

Solving a problem like responsive design

Things have moved on significantly in those years since this was first developed – and the largest revolution to come to CSS designers in that time has been the adoption of ‘Responsive’ layout design. This basically boils down to layouts adapting to suit unknown screen sizes – in particular tablets and phones/small devices.

I considered using one of the popular existing frameworks (or even a less-well know one!) – especially as some have an huge existing user base. However, after examination, they pretty-much all fell down on two major factors… too large and too limited. 9 times out of 10 you have to adhere to a set number of columns, or can’t adjust the media queries… or were just too big and bloated. The only third-party code incorporated into Flux Layout is normalise.css – because I think it’s a great reset/starting base for consistent CSS design.

The best solution for Wonderflux was to develop a new CSS framework from scratch. One that worked in a simpler way to the previous system, produced media queries and of-course as % based. After much thought and a few false starts, I have now successfully re-developed the Wonderflux grid system from the ground-up. The previous system was heavily tied-in to Wonderflux – the new system, called Flux Layout can act completely independently, outside of Wonderflux and even WordPress. It literally could be plugged into any project now and I’ll be developing this a-little further in the future.

Lean and mean

I wanted Flux Layout to be lean and compact – I didn’t want 10 different button styles etcetcetc, that’s for the designer to build. Why have to end-up overloading lots of CSS, surely that defies the purpose? Here’s how it stacks up:

5.9k = Basic gzip server compression
4.9k = Cloudflare minification/compression (or similar)

Inspect the network activity from this site yourself… I don’t think anyone can consider that bloatware! It can also be merged into 1 file, or even straight into your own WordPress theme style.css for further load optimisation.

Simple is good

In Wonderflux 1 you could use a PHP function (wfx_css) to dynamically generate CSS class names for columns. In hind-sight, this was a crazy idea – just an overly-complex solution. This is depreciated in Wonderflux 2, you just use logically named CSS rules that are defined in Flux Layout. I’ll be talking about the decision making behind these in a future post, but it feels good to have removed this!

Also, I’ve researched common media queries practice and have developed a group of media queries that suit most circumstances. My aim is to class the screens into ‘user experiences’ rather that specific devices. The rate at which devices are released quickly makes this an insane task to keep up with, so no point!

  • Tiny – Tiny screens – small portrait phones (max-width:480px)
  • Small – Small screens – Lower spec landscape phones and some portrait tablets (min-width:481px and max-width:768px)
  • Medium – Standard computers and most landscape tablets (min-width:769px and max-width:1409px)
  • Large – Swanky hi-res screens (min-width:1410px)

I know, I know – you’d probably like these to be completely different… or just want one or two media queries without all the rest. The good news is I have already completed the coding to do this in Flux Layout – it can literally generate, on-demand, any sets of media query rules you wish (with appropriately named rules generated too!) If you know a-little PHP you could do this yourself – the bad news is I’ve not developed the WordPress admin controls or internal Wonderflux filters to alter this on the fly… that will be coming in later versions of Wonderflux!

Flux Layout roadmap

For the foreseeable future, the driving force behind Flux Layout development will be Wonderflux. However, as a stand-alone project it presents a few interesting ways to use it. I’ll be creating a simple website to give you the option to:

  • Use the static generated version with standard settings
  • Generate your own static version
  • Use the dynamic version with full configuration

The generator should actually be a pretty easy job to complete – I want to create an experiment for myself with Gravity Forms that takes the form input and feeds it through to the existing generator in Flux Layout… nothing complex but should be very neat.

All of this will have to wait a-little while though, Flux Layout and Wonderflux 2 need to be put through their paces and I’d like to gather some opinions on this system before firming it up beyond a beta launch.