Wood Cuttr supports media query breakpoints for many popular devices.
Whether it be phones, tablets, desktops or tvs, Wood Cuttr will assist you in your responsive web design layout.
Wood Cuttr supports both portrait and landscape modes for mobile devices.
Supported resolutions go all the way up to 4096 pixels for the tv variant.
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.
By default Wood Cuttr is toggled on when you drag it into your projects.
Wood Cuttr shifts its colors depending on what breakpoint you hit, making it easy to see which device you are on.
You also have a ruler at your disposal for more pixel accuracy.
We thought some of you might say that, so we have included a few other styles for you to play with.
These styles are a good starting point but we recommend customizing your own flavor and factor in content, devices, and your audience.
Any other browser that supports media queries and linear gradients should work.
Includes popular smart devices and standards since the iPhone release.
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:
<head>
<link rel="stylesheet" type="text/css" href="css/wc-default.css" />
</head>
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:
<body>
// other code
<script src="js/jquery-1.8.2.min.js"> </script>
<script src="js/woodcuttr-1.0.min.js"> </script>
</body>
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!