drewgreenwell

Metro JS Theme Generator

This theme generator will let you compile the css files for Metro JS to get the exact sizes you need. This tool uses the .less javascript compiler to compile the Metro JS .less src files with the settings and modules you choose. The resulting theme along with a preview of your theme will appear below

Metro JS
Size Options

The default tile size and the size the #-wide/#-tall size classes will be based off of

a new size row. This will generate a media query for the max/min width desired.

tile size for : :

CSS to compile

The Metro JS modules that you are targeting

Advanced

Used for tile sizing, layout, and media queries. Uncheck if you plan to separate the responsive CSS from the theming.

Used for bounce-directions to tilt on click/move

Accent Colors
Custom Colors

Add custom color definitions here to include them in Metro JS. The value field can be any color format supported by browsers e.g. red, #ff0000, rgb(255, 0,0)

Compile Options