minx - a titchy troublesome mobile panel layout framework


Minxing up javascript generated panels - A simple html5 panel management library with some CSS3 sugar to make it slidy.

You start with no html so it needs no selectors or DOM queries or DOM parsers, the framework hods references to the nodes, so you can easily manipulate off DOM.

Every thing is a panel (or widget or layout) and a panel has a node which is a reference to the dom element - starting with a pseudo root panel which simply binds to document.body.

well fork me

code on git hub

or download v0.9

demos using v0.9

full Monty

Showing the backbone wrapped sample app.

best viewed on a tablet

split layout

similar to the backbone app but not wrapping Backbone.js

best viewed on a tablet

input field list

a split view with the main panel showing the field list

best viewed on a tablet


The most simple panel management

see the awesome simple demo

core again

Slightly less simple panel management

less simple demo


Using a panel from the more collection with iPhone styling

the illustrious button in action

title button

some programatic title bars with buttons

pinned panels with titles

with popup

a couple of popup style panels

click some stuff

smooth sliders

using linked panels to slide with hwaccel

sliding panels

Some experiments in how the translations work...

animation 1

not using minx - simple translations and using requestAnimationFrame

translate transitions again

animation 2

layout tiggered trasnistions - you'll be able to see where this is going. using coloured backing panels to minimise flicker.

hwaccell transitions again