Tachyons Layout Debug with a Grid
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 debug: These classes are used to put a background grid on any element which can help you line elements vertically up and horizontally with each other.
Syntax:
<element-name class="class-name"> ... </element-name>
Classes Used:
- debug-grid: This class is used to create grids 8px at the background of the element.
- debug-grid-16: This class is used to create grids of 16px at the background of the element.
- debug-grid-8-solid: This class is used to create the solid grid of 8px at the background of the element.
- debug-grid-16-solid: This class is used to create the solid grid of 16px at the background of the element.
Example 1: In the below code, we will make an 8px grid in the background and see the alignment. 8px grid means square of 2px from each side.
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> <h1 class="debug-grid" style="color:green">GeeksforGeeks</h1> <h3> A computer science portal for geeks</h3></body></html> |
Output:
Example 2: In the below code, we will make a grid of 16px (square of 4px from each side).
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> <h1 class="debug-grid-16">GeeksforGeeks</h1> <h3> A computer science portal for geeks</h3></body></html> |
Output:
Reference: https://tachyons.io/docs/debug-grid/
Please Login to comment...