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 =
< 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 =
< 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 >
|
Output:
Reference: https://tachyons.io/docs/
Share your thoughts in the comments
Please Login to comment...