Testing/Debugging in zenCSS

These classes are designed for on-the-fly troubleshooting, especially useful during the development phase to highlight elements on the page.
  • .test-1 adds a dotted outline around the element with a red color.
  • .test-2 ads a solid outline around the element with a red color.
  • .test-3 adds a solid outline around the element with a green color.
  • .test-4 adds a solid outline around the element with an blue color.
  • .test-5 adds a solid outline around the element with a orange color.

Utilizing these test classes makes it easier to visually identify elements and their dimensions on the page, aiding in debugging and layout adjustments.

We are also developing a "zen test" tool which you can preview by using the Layout button below. To add the Zen Test button to any page, just use set id="toggleButton" on a button or link.

The Zen Test

Every component, section, and utility we ship will pass layout, color, and functional tests to ensure they perform flawlessly in today's modern browsers.

So you can be assured it "just works". Try it out below.