by Flo Preynat

I’ve met quite a few designers/devs who had no idea what mixture was, and since I reckon the prototyping app works like a charm, I thought a blog post on the benefits of the front-end dev tool would be more than necessary.

Another reason to talk about Mixture, is the fact that Neil Kinnish and his mates have recently announced their pricing (back in August in fact), with users being able to choose between one-time fees (of a mere $39) or a monthly subscription ($12.99/month) with in this case unlimited hosting & publishing.

Both options looked more than reasonable to me, but for your info, I opted for the one-time cost, being mostly on my own, and failing to see the real value in unlimited publishing. I may change my mind later on though, you never know.

Easy (peasy) setup

Right, so let’s talk project setup. With Mixture, you can wave goodbye to server-side environments tasks. The lot is done for you and in a few clicks.

The Mixture app installed on your system, click on Open/New, create your project folder, include what needs to be included (such as popular frameworks), seat back and relax, … ‘cuz you’re done.

mixture2

Boilerplates, collections and templating

As I was saying, not only you will see quite a few boilerplate options in there (Foundation, Bootstrap, Inuit, and more), but in no time, you’ll have a project going with already some solid dynamic templating system (using the ruby library Liquid you may already know from Jekyll for example) which will make you look at your [good ol’ school] php include method in disdain.

mixture1

Collections is one of the latest features added to Mixture. It allows you to easily create, manipulate, paginate and query collections of data throughout a Mixture project, the quoted perfect examples being a blog or a portfolio.

mixture4

Preprocessing and Live Refresh

You won’t be surprised to learn that Mixture handles Sass, Less & Coffee script. It will recognize what you’re trying to do and automatically behave the way you would expect it to. As an example, if you create an empty project, manually add a scss folder, and create a file in there, Mixture will automatically create a converted css file in the right folder.

It will also throw errors at you if you’ve made a mess of your code (eg: I forgot the curly brackets here).

mixture3

You will be glad to hear that any changes applied to your project will be live & instantaneous across all devices (we’ll talk about the multi-device feature later). If you have been using Codekit, Livereload (et al) all this time, you’ll feel right at home with Mixture, as all modifications pop up automatically and mega quickly.

Publishing

I ain’t going to dwell on the hosting and publishing sides of Mixture since I have not taken this option. Obviously take a closer look at it on your own, but in a nutshell, you can publish your project in one click, share your published URL, password protect, get feedback, client sign-off and even add your own domain and host your site.

Pretty neat.

Simple Mode

Another great benefit of the app is its ability to deal with projects that have not been initiated in Mixture. That means that your local wordpress testing site running on mamp can be used in the app through its simple mode, and take advantage of its many fetaures.

In other words, you get in a couple of clicks the style injection, pre-processing, minification, image optimisation features on your existing (and non-mixture) projects.

Live Testing

At this point, you shouldn’t need more convincing, but if you still do, this is where I finish you off.

Setting up a multi-device testing is as easy as pie. Get your project going, and in mixture, click on ‘View locally’ to see your project live on your favourite browser. Enter the url finishing with port 7774 on your other devices to see a live and synchronised view of your project on ipads, iphones and androids.

Navigation through the project on any of those connected devices will synchronise the others in a tick. Same thing can be said for style changes. They will be reflected on every connected device.

mixture5

You want to test other devices? No probs, if you – like me – have a BrowserStack account, connecting mixture to it is pretty simple.

You’ll need to fill in your BrowserStack API key (in BrowserStack : go to Your account > Local testing and grab the “Local testing key”) and add it to your Mixture account (on the mixture.io website). Then take full advantage of the connection and test other devices and OS using Mixture > Tools > BrowserStack.

mixture6

mixture7

Github Pages

Last Mixture feature I will talk about today is the Github Pages one. Any project you handle through mixture can be pushed to Github. It only requires a little bit of initialisation to get this going.

  1. Go to Github and create a repo for your project (e.g: mixture).
  2. Open the mixture.json file which is at the root of the project, and add the repo .git ref:
      ...
      "gitHubPages": {
        "repoUrl": "https://github.com/shoogledesigns/mixture.git"
      }
    }
    
  3. In Github, go to Account Settings > Applications and Create a new token for your project.
  4. At the root of your project, create a .githubsettings file and give it the following info:
    {
      "username": "your github username",
      "password": "the newly created token",
      "email": "your email address",
      "name": "your github name"
    }
    
  5. In mixture click on Convert your project to HTML.
  6. Then click on Github Pages.
  7. Go to Github, your project’s in there.

mixture8

Verdict

Absolutely fabulous. And I’ve only scratched the surface of it in this post.
If you’re going to prototype quickly tons of apps with very little time, not going with mixture would be fucking crazy.
Hats off to the Mixture.io team!

So Long folks.

My name is Flo Preynat and I am the freelance webdesigner and developer behind shoogle designs. I live in France and specialize in responsive web design. Give me a shoogle or get in touch with me on twitter.

Most Recent Posts

Special Recent Posts

Sip: a color picker refreshingly simple indeed

Sip: a color picker refreshingly simple indeed

July 10th, 2014

I've just discovered Sip, a color picker app for Mac users. "Just discovered" since it's been around[...]

Perch – the CMS that does not pollute your web design workflow

Perch - the CMS that does not pollute your web design workflow

July 7th, 2014

I have recently finished a project based on Perch, the clever 'little' CMS created by edgeofmyseat.c[...]

Responsive video code snippet

Responsive video code snippet

June 29th, 2014

More of a reminder than a pure detailed blogpost, this code snippet will be my go-to resource when I[...]

Project Naphta: a nifty extension to play with text embedded in images

Project Naphta: a nifty extension to play with text embedded in images

June 9th, 2014

We've all been there. You want to select a good chunk of text on a website, only to realise you can'[...]

Free photos for your web design projects

Free photos for your web design projects

June 4th, 2014

Nothing beats using a real professional photographer when working on a cool project. You can be the[...]

Comments

Be the first to drop your two cents here!