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=
<style>
body {
text-align: center;
margin: 10px;
}
</style>
</head>
<body>
<h1 class="green">GeeksforGeeks</h1>
<h3 class="bg-green">
A computer science portal for geeks
</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=
<style>
body {
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<h1 class="green">GeeksforGeeks</h1>
<h3 class="bg-green ba">
A computer science portal for geeks
</h3>
</body>
</html>
|
Output:
Reference: http://tachyons.io/docs/#theming