Debugging Tools

Use Skeletonic CSS debugging tools to visually inspect and correct page layout issues.

Skeletonic CSS v.1.0.5 provides a set of debugging tools to help you quickly find and fix your CSS layout issues.

The Image baseline grid allows you to use a defined debugging class on any HTML Tags to enable the grid overlay and identify issues in your UI layer.

To begin, set out a base number for your baseline grid.(E.g., 8px/16px/32px/64px).

.debug-grid-8 {
 background: 
 transparent 
 url('
 data:image/gif;
 base64,
 encoded_image') 
 repeat 
 top 
 left;
}</code>

.debug-grid-16 {
 background: 
 transparent 
 url('data:image/gif;
 base64,
 encoded_image') 
 repeat 
 top 
 left;
}

.debug-grid-32 {
 background: 
 transparent 
 url('data:image/gif;
 base64,
 encoded_image') 
 repeat 
 top 
 left;
}

.debug-grid-64 {
 background: 
 transparent 
 url('
 data:image/gif;
 base64,
 encoded_image
 ') 
 repeat 
 top 
 left;
}

We also have a smart, responsive, CSS baseline grid overlay version to fit your cascading web life.

To use it, you will need to import skeletonic-debug-mode.css to display the CSS Grid overlay automatically in your <body> tag.

Debug and diagnose CSS stylesheets with ease