Tachyons Toolkit is a free and open-source that is used to create a responsive website. In this article, we will learn how to include elements using the Tachyons toolkit.
Tachyons elements are used to insert images, lists, links, forms, and tables.
The total number of elements is listed below.
- Images: This element is used to include images on the webpage.
- Links: This element is used to include links on the webpage.
- Lists: This element is used to include lists on the webpage.
- Forms: This element is used to include forms on the webpage.
- Tables: This element is used to include tables on the webpage.
Classes Used:
- Images: There are no predefined classes that tachyons provide for this, we need to use the width class to fix the width of the uploaded images.
-
Links:
- link underline blue hover-orange: This class is used to provide a blue underlined link that turns orange on the hover.
- link underline-hover red: This class is used to add an underline on hover and focus.
- dim: This class is used to dim a link on hover.
- link black hover-bg-light-blue: This class is used to add any background color from the skins-pseudo module.
- link black bg-animate hover-bg-light-blue: This class is used to add any background color from the skins-pseudo module.
- link dim black: This class is used to provide a “dim black” effect to the link.
- link dim near-black: This class is used to provide a “dim near-black” effect to the link.
- link dim dark-gray: This class is used to provide a “dim dark-gray” effect to the link.
- link dim mid-gray: This class is used to provide a “dim mid-gray” effect to the link.
- link dim gray: This class is used to provide a “dim gray” effect to the link.
- link dim black-90: This class is used to provide a “dim black-90” effect to the link.
- link dim black-80: This class is used to provide a “dim black-80” effect to the link.
- link dim black-70: This class is used to provide a “dim black-70” effect to the link.
- link dim black-60: This class is used to provide a “dim black-60” effect to the link.
- link dim black-50: This class is used to provide a “dim black-50” effect to the link.
- link dim navy: This class is used to provide a “dim navy” effect to the link.
- link dim dark-blue: This class is used to provide a “dim dark-blue” effect to the link.
- link dim blue: This class is used to provide a “dim blue” effect to the link.
- link dim dark-red: This class is used to provide a “dim dark-red” effect to the link
- Lists:
-
Forms:
- input-reset: This class is used to reset the default styles on an element.
- Tables: There are no predefined classes that tachyons provide for this, we need to use the width class to fix the width of the uploaded table.
Syntax:
<element class="<element-class-name>">
...
</element>Example 1: In the below code we will make use of the link element to include a link.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<link rel="stylesheet" href=
<style>
div {
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;text-align:center;">
GeeksforGeeks
</h2>
<h3 style="text-align:center;">
A computer science portal for geeks</h3>
<div>
<a href="#" class="link underline blue hover-orange">
link text</a>
</div>
</body>
</html>
|
Output:
Example 2: In the below code we will make use of the form element to include the form in the webpage.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<link rel="stylesheet" href=
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Tachyons Element Forms
</h3>
<form>
First Name:
<input class="input-reset"
type="text" /><br><br>
Last Name:
<input class="input-reset"
type="text" />
</form>
</center>
</body>
</html>
|
Output:
Reference: https://tachyons.io/docs/