Get in the mix

mixture logo

So there's been quite a flurry of tweets tonight about Mixture. I'm sure you'll know if you follow me on twitter I frickin' love it. So in this brief post I hope to explain how it helps me.

the obligatory back story

So, I'm a front-end developer. I don't design. I rarely dare touch anything to do with that 'back-end' (insert Kenneth Williams gif here). I generally take a clients designs and make them look bloody gorgeous across a bounty of devices at a plethora of speeds, but I digress.

Team Mixture

I've been using Mixture for the last 5-6 weeks (of evenings) for a client site. It's not the biggest site in the world but it'd be fairly sizeable once what I'm coding gets plumbed into the 'back-end' (another gif) and all the content is added in.

{please note: Mixture is not a code editor).

HTML/.liquid craziness

So with Mixture I've managed to do something I think is amazing. I've managed to
create 'bits' of HTML that I can then tie into different pages of the site as and when needed. I can override parts of the page with other 'bits' so I can write once, use anywhere on a site I'm developing. That's pretty speedy. It's really easy to refactor, edit and make your code better across a whole site in a blink of an eye.

Docs for Mixtures templating awesomeness


I love me some pre-processing. Mixture tries to cater for all allowing you to write your CSS dry, with Sass, LESS or Stylus. That's pretty open. It also includes Compass and Bourbon so Sass/SCSS users are well catered for. Allowing me to choose what language I want to pre-process in is pretty nice rather than 'being told'. Not a CSS pre-processor but Mixture also allows from CoffeeScript too.

Docs for Mixtures pre-processor funtimes


Image optimisation, debugging and CSS/JS minifying is built in. 

Docs on Optimisation


Opening up Mixture allows you to create a project. This could be blank but what's great is that it includes so boilerplates/frameworks to get you going. It's got a Compass boilerplate. Inuit.css from Harry Roberts, the Twitter Bootstrap and soon (I think) you'll be able to add your own to get you going even quicker.


So I'm coding a part of a page and I do something I want to get back to. Mixture has a todo built in. I can place a 'todo' on any page and the app keeps a tally and allows me to 'jump to' a todo from within in it. That's great if you need to quickly use a 'magic number' for something or want to press on and come back to it later. The todo part of the app is excellent.

Local Host

'Out of the box' Mixture has created a virtual host server for my project. I can edit some details in a file (easily) and be able to access the project Mixture is running on all my devices. That's pretty good for testing on not only other browsers (IE for example) but also devices.

'staging' server

Mixture also creates a 'staging' server so that you can upload what you're working on. This is awesome for client approval, checking etc. My client can now open the Android phones browser and check out how their site is looking, how's it coming along. You could even use this for demo-ing ideas you have for certain aspects, like a mobile navigation pattern.

Live Reload 'all the things'

LiveReload is baked in and the team at Mixture have bettered it so that it works on ALL* browsers including good ol' Internet Explorer 6, 7, 8, 9 and on any Android stock browser. I've done this with my Air, iPhone (chrome iOS), Nexus 7 (Opera Mobile) and Huawei Blaze (Android 2.3 stock browser). That's great to help you quickly test, locally, how you site'd look with your device test suite/lab.

*except Opera mini, because, you know...

Here's a video from Neil testing out 'live reload' on some devices that do and don't support LiveReload.

Docs for boilerplates, todo, local and online settings

Exports to HTML

Yep, does that. So all you @includes, ifs and everything get 'compiled' into a full on static site.


I've probably not done the product justice, but it's awesome.

If you've not signed up then do it (insert my favourite gif here). If you've a question I guess you'd best ask Neil, you could ask me but I'm sure I'm only touching the surface of it's power.