Mixture. A rapid front-end development toolset for Mac & Windows.

Feature overview or Download

Sassaparilla

Please select a boilerplate

Working, please wait

Everything is a-okay!

Foundation

Bootstrap

Boilerplates

Get started quicker & build faster with access to a growing selection of popular boilerplates & project templates like Bootstrap, Foundation & Sassaprilla.

Tell me more →

Have your own boilerplates?

Add them to Mixture for easy access, keep them private or share your perfect starting point with other Mixture users.

← Back

Preprocessing

Mixture automatically handles preprocessing, minification & concatenation, leaving you to focus on your project rather than the setup.

Tell me more →

Sass, LESS, Stylus, CoffeeScript and Compass are all supported with both regular & minified versions of stylesheets & scripts. Images are optimised and Mixture also has built-in support for concatenation.

← Back
<h1>
Awesome Site
</h1>

Awesome Site

Awesome
Site

Awesome
Site

Testing / Live

Mixture's built-in server enables multi-device testing & debugging by default.

All changes to your project are live & instantaneous across all devices, best of all you don't need to do a thing – no tags to add or setup required, it just works.

Tell me more →

As well as live refresh, stylesheet changes are injected.

If you connect multiple-devices and navigate, Mixture will update the other devices to "follow the leader".

← Back

{% layout "home" %}

Templating

Build your project with simple but powerful HTML template languages.

Mixture gives you powerful features of server-side languages like PHP, .NET or Rails without the install and setup.

Tell me more →

Mixture uses Liquid as its default template language, but also supports straight HTML and HAML.

Liquid is essentially HTML with additional tags, it's quick, simple to learn but super powerful – it supports Layouts, Includes and so much more.

← Back
{
 "title": "New Site"
}
{
  "title": "Awesome Site"
}

New Site

Awesome Site

Data models

Mixture uses an intuitive model system.

Working from local and/or online sources, you can architect and build against real data – it’s a powerful and flexible way to keep your project DRY and test your front-end build.

{% collection "blog" %}
 <ul>
 {% for post in
 collection.items %}
  <li>
   {{ post.title }}
  </li>
 {% endfor %}
 </ul>
{% endcollection %}

Awesome Site – Blog

  • 10 steps to being awesome
  • Ryan Gosling workout
  • You too can be awesome
  • Awesome cat .gifs

Collections

Create a blog or portfolio, Mixture has powerful built-in features that allow you to build and prototype powerful data driven sites — no database required.

There's even a blog boilerplate to get you started in minutes.

Tell me more →

Manipulate, paginate and query collections of data throughout your project. You can work with multiple collections and collection items can be authored in Markdown, Haml or Liquid.

← Back

Publishing project

Everything is a-okay!

Publish online

Publish your project directly to S3, GitHub pages or your own hosting via FTP using the built in options.

Convert to HTML

Available tools

Working, please wait

Everything is a-okay!

Amazon S3

Tools

Mixture has a tools section built-in, these tools allow you to convert your project to static HTML, Publish to S3, FTP and even GitHub Pages integration.

assets/sass

assets/css

assets/js

localhost:8888

Everything is a-okay!

Mixture is in simple mode

Simple mode

Any type of project can benefit from Mixture’s features, they're not exclusive to Mixture projects.

Mixture can work with other servers (eg. Mamp, Wamp and more) this means you can use many of Mixture's features on your current projects with your current workflow.

Tell me more →

An example usage of simple mode would be a Wordpress project. If you enable Mixture you can benefit from features such as multi-device and preprocessing with minimal setup.

← Back

Mixture is now free → read more

Mixture packages together the best front-end development tools and practices into a quick and easy to use Mac & Windows application.

Getting started is easy, simply download the application and start building!

"As a front-end dev, I want to follow best practices and automate as much as possible. With Mixture, I don't even have to think about those things as they're built in to the local and server environments." Dan Denney