Wood Cuttr: The CSS Media Query Assistant
Wood Cuttr is a simple CSS media query assistant that helps you with your responsive web design projects.
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.
###Portrait & Landscape Modes
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.
###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.
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.
You also have a ruler at your disposal for more pixel accuracy.
###Screw Default Stuff
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.
- 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.
- 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:
<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!