Debug mode

Quickly see the layout of your grid and components.

Jellyfish comes with a handy debug mode which allows you to quickly see the structure of the grid, and diagnose any layout issues. Debug mode can be enabled in three ways:

1. by setting $debug-mode-on to true
2. by adding the class .jf-debug to the body or html element
3. by running jfDebug() in the console

When debug mode is active:

• The highest level .row element will have a striped background showing the base column layout.
• .row elements will glow in yellow
• .col elements will glow in turquoise
• If $grid-has-offset or $grid-has-order are set to true, elements with a class .offset-* and .order-* will be highlighted in pink
• The current breakpoint name is shown in the top left corner of the window.

Try it out - click here to toggle debug mode on and off onto this page.