Dynamic Tab-Size Demo In JavaScript

An appropriate amount of white space is just as critical to successful design as anything else. Often times, we err on the side of too little white space, which is a problem. To quote Adam Wathan and Steve Schoger in their book, Refactoring UI:

White space should be removed, not added

When designing for the web, white space is almost always added to a design—if something looks little too cramped, you add a bit of margin or padding until things look better.

The problem with this approach is that elements are only given the minimum amount of breathing room necessary to not look actively bad. To make something actually look great, you usually need more white space.

A better approach is to start by giving something way too much space, then remove it until it you're happy with the result.

You might think you'd end up with too much white space this way, but in practice, what might seem like "a little too much" when focused on an individual element ends up being closer to "just enough" in the context of a complete UI.

Excerpt from Refactoring UI by Adam Wathan and Steve Schoger (Layout And Spacing, Pages 67-69).

To help drive this point home in the context of code, this UI is initialized with way too much white space in the form of indentation. You can then dynamically adjust the --tab-size property of this page by using your Arrow keys. This way, you can compare a 2-space indent to a 4-space indent, and get a better sense of just how wrong you are about your current choices! :troll

Tab Size: