Tachyons Layout Widths are used to provide width to the element and the width of an element does not include padding, borders, or margins. This width module holds a five-step width scale on powers of two and a percentage series of values.
Syntax:
<element-tag class= "Width-class">
...
</element-tag>Tachyons Layout Widths Classes:
-
Width Scale:
- w1: This class is used to set the first step in width scale.
- w2: This class is used to set the second step in width scale.
- w3: This class is used to set the third step in the width scale.
- w4: This class is used to set the fourth step in the width scale.
- w5: This class is used to set the fifth step in the width scale.
-
Width Percentage:
- w-10: This class is used to provide 10% of the width.
- w-20: This class is used to provide 20% of the width.
- w-25: This class is used to provide 25% of the width.
- w-30: This class is used to provide 30% of the width.
- w-33: This class is used to provide 33% of the width.
- w-third: This class is used to provide 100% / 3 of the width. (Not supported in opera mini or IE8)
- w-34: This class is used to provide 34% of the width.
- w-40: This class is used to provide 40% of the width.
- w-50: This class is used to provide 50% of the width.
- w-60: This class is used to provide 60% of the width.
- w-two-thirds: This class is used to provide 100% / 1.5 of the width. (Not supported in opera mini or IE8)
- w-75: This class is used to provide 75% of the width.
- w-80: This class is used to provide 80% of the width.
- w-90: This class is used to provide 90% of the width.
- w-100: This class is used to provide 100% of the width.
Below examples illustrate the Tachyons Layout Widths:
Example 1: In the below example we will use the width scale classes.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href=
</head>
<body>
<h2 class="tc green">GeeksforGeeks</h2>
<h3 class="tc">
Tachyons Layout Widths
</h3>
<h1 class="w1 ba tc bw1">GFG</h1>
<h1 class="w2 ba tc bw1">GFG</h1>
<h1 class="w3 ba tc bw1">GFG</h1>
<h1 class="w4 ba tc bw1">GFG</h1>
<h1 class="w5 ba tc bw1">GFG</h1>
</body>
</html>
|
Output:
Example 2: In this example we will use the percentage classes.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<title>GFG</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href=
</head>
<body>
<h2 class="tc green">GeeksforGeeks</h2>
<h3 class="tc">
Tachyons Layout Widths
</h3>
<h1 class="w-20 ba tc bw1">GFG</h1>
<h1 class="w-30 ba tc bw1">GFG</h1>
<h1 class="w-third ba tc bw1">GFG</h1>
<h1 class="w-40 ba tc bw1">GFG</h1>
<h1 class="w-50 ba tc bw1">GFG</h1>
</body>
</html>
|
Output:
Reference: https://tachyons.io/docs/layout/widths/