Press T and resize your browser window to see it in action!

Portrait & Landscape

Wood Cuttr supports both portrait and landscape modes for mobile devices.

Portrait & Landscape Modes

Supported resolutions go all the way up to 4096 pixels for the tv variant.

Portrait & Landscape Modes
Avoid Visual Clutter

Avoid Visual Clutter

Don’t let Wood Cuttr annoy your perfect bird’s eye view of your design. You can toggle the tool on or off by pressing the letter T key on your keyboard.

Avoid Visual Clutter

By default Wood Cuttr is toggled on when you drag it into your projects.

Colorful Guides & Ruler

Wood Cuttr shifts its colors depending on what breakpoint you hit, making it easy to see which device you are on.

Colorful Guides & Ruler

You also have a ruler at your disposal for more pixel accuracy.

Colorful Guides & Ruler
Screw Default Stuff

Screw Default Stuff

We thought some of you might say that, so we have included a few other styles for you to play with.

Screw Default Stuff

These styles are a good starting point but we recommend customizing your own flavor and factor in content, devices, and your audience.

Preferred Browsers

  • IE9 or newer
  • Firefox 3.6 or newer
  • Chrome 10 or newer
  • Safari 5.1 or newer
  • Opera 11.6 or newer

Any other browser that supports media queries and linear gradients should work.

Supported Devices

  • All iPad & iPhone Models
  • Popular Android Devices
  • Standard TV Screens
  • Common Desktop Sizes
  • and more...

Includes popular smart devices and standards since the iPhone release.

How To Setup Wood Cuttr

Getting up and running is simple!

Drag the wc-default.css (or one of the custom provided ones like wc-apple.css) file into your css folder and add the following line of code to the head section in your HTML file:


<link rel="stylesheet" type="text/css" href="css/wc-default.css" />


Lastly drag the woodcuttr-1.0.min.js and the jquery-1.8.2.min.js into your js folder and add the following line of code just before the end body tag in your HTML file like so:


// other code

<script src="js/jquery-1.8.2.min.js"> </script>

<script src="js/woodcuttr-1.0.min.js"> </script>


Just make sure jQuery comes before Wood Cuttr and your done. Don't forget to remove these files before you launch your web site. You wouldn't want your users toggling this on and off on accident; how embarrassing!