Tachyons Layout

Last Updated : 17 Jun, 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 header, menus, content, and a footer. Tachyons Layout is used to define those sub-parts of a website.

The layout offered by Tachyons toolkit is listed below:

Debugging: These classes are used to help debug layout issues you might be having.
Debug with grid: These classes are used to put a background grid on any element which can help you line elements up vertically and horizontally with each other.
Basic grid: These classes are used to combine display, float, padding, and widths to construct a wide variety of grids
Flexbox: These classes are used to achieve powerful horizontal or vertical layouts without JavaScript.
Box Sizing: These classes are used to define the size of the box.
Spacing: These classes are used to define space around the element.
Floats: These classes are used to move elements.
Clearfix: These classes are used to prevent layout problems caused by the elements being removed from the block context of the surrounding elements.
Display: These classes are used to set the display of an element at any breakpoint.
Widths: These classes are used to define the widths of the element.
Max Widths: These classes are used to define the max-width for setting the breakpoint.
Heights: These classes are used to define the height of the element.
Position: These classes are used to define the position of the element.

Syntax:

<element-name class="class-name">
    ...
</element-name>

Example 1: In the below code we will make use of the widths class that is used to define the width of the element.

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 { 
            background-color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 class="w1">GeeksforGeeks</h1> 
    <h1 class="w5">GeeksforGeeks</h1> 
    <h1 class="w9">GeeksforGeeks</h1> 
</body> 
  
</html>

Output:

Example 2: Below example demonstrates the Tachyons LAYOUT using Spacing classes.

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 { 
            background-color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 class="pa1">GeeksforGeeks</h1> 
    <h1 class="pa3">GeeksforGeeks</h1> 
    <h1 class="pa5">GeeksforGeeks</h1> 
</body> 
  
</html>