Tachyons is a free and open-source toolkit that is used to create a responsive. In this article, we will see how to increase the height of the HTML element using the Tachyons.
Tachyons Layout Heights is used to set the height of the element by adding a specific class of specific scale. It contains the 5-step height that is defined either in powers of two forms or in a series of percentage values form. An explicit value can be declared inside of any parent. The percentage value will be utilized only when the height is declared inside of a parent element.
Tachyons Layout Heights Classes:
- h1: This is used to set the height of an element by the value of one.
- h2: This is used to set the height of an element by the value of two.
- h3: This is used to set the height of an element by the value of three.
- h4: This is used to set the height of an element by the value of four.
- h5: This is used to set the height of an element by the value of five.
Media Query Extensions:
- -ns = not-small: This media query will not be visible on small devices.
- -m = medium: This media query will only be visible on medium devices.
- -l = large: This media query will only be visible on large devices.
Syntax:
<div class="h1"> ... </div>
Example 1: In this example, we will see how to use scales using Tachyons.
<!DOCTYPE html> <html>
<head>
<title>GeekforGeeks</title>
<link rel="stylesheet" href=
<style>
div {
background-color:lightgreen;
}
body {
margin-left:20px;
margin-right:20px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Tachyons Layout Heights</h3>
<div class="h1">GeeksforGeeks</div>
</center>
</body>
</html>
|
Output:
Example 2: In this example, we will see how to use scales using Tachyons.
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
<style>
div {
background-color:lightgreen;
border:2px solid black;
margin:10px;
}
body {
margin-left:20px;
margin-right:20px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<div class="vh-25">GeeksforGeeks</div>
</center>
</body>
</html>
|
Output:
Reference: https://tachyons.io/docs/layout/heights/