Tachyons Layout Debug with a Grid - Coding

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= 
"https://unpkg.com/[email protected]/css/tachyons.min.css" /> 
  
    <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= 
"https://unpkg.com/[email protected]/css/tachyons.min.css" /> 
  
    <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/

Reffered: https://www.geeksforgeeks.org

CSS

Related
Spectre Timelines
Spectre Sliders
Spectre Progress
How to create a Triangle using CSS clip-path ?
Bulma Notification Variables

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	13