Tachyons Layout Debugging
Last Updated :
19 Aug, 2022
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 =
< style >
body {
text-align: center;
margin: 20px;
}
h1 {
color: green;
}
</ style >
</ head >
< body >
< div class = "debug" >
< h1 > GeeksforGeeks</ h1 >
</ div >
< h3 > A computer science portal for geeks</ 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 =
< style >
body {
text-align: center;
margin: 20px;
}
h1 {
color: green;
}
</ style >
</ head >
< body >
< div class = "debug" >
< h1 > GeeksforGeeks</ h1 >
< h3 > A computer science portal for geeks</ h3 >
< span >GfG</ span >
</ div >
</ body >
</ html >
|
Output:
Reference: https://tachyons.io/docs/debug/
Share your thoughts in the comments
Please Login to comment...