Tachyons Theming
In this article, we will learn how to apply themes using the Tachyons toolkit. Tachyons is a CSS toolkit which is used to create a responsive website. Theming is the ability to style various elements of our website differently depending on the context, while still maintaining visual appeal.
Categories offered by themes are listed below:
- Skins: This is used to set the colour of the text and the colour of the background.
- Skins Animation: This is used to set the colour from the _colors.css file to style text and background colours for hover and focus states.
- Hovers: This is used to provide a hover effect you place a cursor over any element.
- Background-size: This is used to set the size of the background.
- Border: This is used to provide a border to an element.
- Border Radius: This is used to provide the rounded border style to the element.
- Box Shadow: This is used to provide the shadow effect to the element.
- Opacity: This is used to provide the opacity effect to an element.
Syntax:
<element-name class="class-name">...</element-name>
Example 1: In this example, we will use skin theming that is used to set the colour of the text and the colour of the background.
HTML
<!DOCTYPE html> < html > < head > < link rel = "stylesheet" href = "https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> < style > body { text-align: center; margin: 10px; } </ style > </ head > < body > < h1 class = "green" >w3wiki</ h1 > < h3 class = "bg-green" > A computer science portal for Beginner </ h3 > </ body > </ html > |
Output:
Example 2: In this example, we will use border theming that is used to provide a border to an element.
HTML
<!DOCTYPE html> < html > < head > < link rel = "stylesheet" href = "https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> < style > body { text-align: center; margin: 50px; } </ style > </ head > < body > < h1 class = "green" >w3wiki</ h1 > < h3 class = "bg-green ba" > A computer science portal for Beginner </ h3 > </ body > </ html > |
Output:
Reference: http://tachyons.io/docs/#theming
Contact Us