Fluzzle: A Flat UI Puzzle Game Template

July 21st 2013

Currently, we seem to be in the middle of a huge shift in UI and UX design. Gone are the days of shiny bezels and glossy buttons, of stitched leather trims and linen backgrounds. Now, clean lines and simple, content-first design is the way to go. Not wanting to be left behind, I decided to give Flat design a try for a little game that I was planning on building. While that particular game didn’t pan out, I did like the UI that I built around it, so I decided to pull it out for use in other puzzle games. Without further ado, I present: Fluzzle!


Fluzzle is meant to be a strating point for simple puzzle games or prototypes. To use it, just download the source from github and rename the main folder to whatever you want to call your project. Then, start editing the index.html file. Everything should be thoroughly commented, so you should have no problem knowing what to do. Fluzzle comes with two of its own css files, fluzzle.css and fluzzle-colors.css. Leave fluzzle.css alone, but edit fluzzle-colors whenever you want to change your colorscheme. Every major color is included in fluzzle-colors, and you are encouraged to add any other full-site colors to the same file. Also, Fluzzle comes with a main.css for you to write your own styles in, as well as a main.js for scripts. As it stands, main.js contains just a few functions to hold the UI together; Everything else is for you to add. Here are some small examples that I made, to demonstrate different colorschemes:

Tower of Hanoi: A classic puzzle game, which you have probably run into if you’ve ever tried to learn about recursion.

Lights Out: A digital version of a classic hand-held electronic game, which I first heard of in an online class on Linear Algebra

Fluzzle uses the awesome Flat UI Kit from Designmodo, Bootstrap from Twitter, and JQuery hosted on [CDNJS(http://cdnjs.cloudflare.com).

Try it out for your next project!

blog comments powered by Disqus