Layout Scout

A visual aid for building responsive layouts

Simple and smart

With the click of a button, Layout Scout will sniff out the content blocks in your markup and inject random background colours to those blocks. Click the button again, and the colours are removed.

We've all been there.

As a front-end developer, chances are you create your markup and then hunt through your stylesheet (or dev tools) to apply temporary background colours to your content selectors. They serve as good visual feedback for styling your layouts and setting your media queries, but they waste time and require clean-up work when you're done. Also, they're ugly.

A single click

Toggle all of your content block background colours on and off with a single click. No more awkward commenting/uncommenting in your stylesheets. Layout Scout is accessible through an unobtrusive button in the top right of your page.

Smart and flexible

No more background:red
Layout Scout comes with four colour palette options. Choose the one best suited for your design (ex: light text on dark background).

All colours are set as RGBA with transparency. This is incredibly useful for complex layouts with absolute positioning or z-index values; overlapping elements will never obscure the ones below.

Keeps your markup clean

Layout Scout will not create any conflicts with your stylesheets. In fact, you will not have to touch any of your css or markup to implement the plugin. Simply load in the script, use it for the length of your development time, and remove it (or comment it out) when you're ready to deploy.