Tachyons Layout Debugging
Tachyons is a toolkit that is used to create a responsive website. In this article, we will learn how to define any layout using the Tachyons toolkit.
Every website is divided into various parts like a header, menus, content, and a footer. Tachyons Layout is used to define those sub-parts of a website.
Layout Debugging: These classes are used to help debug layout issues you might be having.
Classes Used:
- debug: This class is used to highlight the border of the child elements.
Syntax:
<element-name class="class-name"> ... </element-name>
Example 1: In the below code, we will make use of the debug class for debugging.
HTML
<!DOCTYPE html> < html > < head > < title >GFG</ title > < link rel = "stylesheet" href = "https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> < style > body { text-align: center; margin: 20px; } h1 { color: green; } </ style > </ head > < body > < div class = "debug" > < h1 > w3wiki</ h1 > </ div > < h3 > A computer science portal for Beginner</ h3 > </ body > </ html > |
Output:
Example 2: In the below code, we will make use of the debug class for debugging.
HTML
<!DOCTYPE html> < html > < head > < title >GFG</ title > < link rel = "stylesheet" href = "https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> < style > body { text-align: center; margin: 20px; } h1 { color: green; } </ style > </ head > < body > < div class = "debug" > < h1 > w3wiki</ h1 > < h3 > A computer science portal for Beginner</ h3 > < span >GfG</ span > </ div > </ body > </ html > |
Output:
Reference: https://tachyons.io/docs/debug/
Contact Us