Tachyons es un conjunto de herramientas que se utiliza para crear un sitio web receptivo. En este artículo, aprenderemos a definir cualquier diseño utilizando el kit de herramientas Tachyons.
Cada sitio web se divide en varias partes, como encabezado, menús, contenido y pie de página. Tachyons Layout se utiliza para definir esas subpartes de un sitio web.
El diseño que ofrece el kit de herramientas Tachyons se enumera a continuación:
- Depuración: estas clases se utilizan para ayudar a depurar los problemas de diseño que pueda tener.
- Depuración con cuadrícula: estas clases se utilizan para colocar una cuadrícula de fondo en cualquier elemento que puede ayudarlo a alinear elementos vertical y horizontalmente entre sí.
- Cuadrícula básica: estas clases se utilizan para combinar visualización, flotación, relleno y anchos para construir una amplia variedad de cuadrículas.
- Flexbox: estas clases se utilizan para lograr diseños horizontales o verticales potentes sin JavaScript.
- Tamaño de caja: estas clases se utilizan para definir el tamaño de la caja.
- Espaciado: estas clases se utilizan para definir el espacio alrededor del elemento.
- Flotadores: estas clases se utilizan para mover elementos.
- Clearfix: estas clases se utilizan para evitar problemas de diseño causados por elementos que se eliminan del contexto de bloque de los elementos circundantes.
- Visualización: estas clases se utilizan para establecer la visualización de un elemento en cualquier punto de interrupción.
- Anchos: estas clases se utilizan para definir los anchos del elemento.
- Anchos máximos: estas clases se utilizan para definir el ancho máximo para establecer el punto de interrupción.
- Alturas: Estas clases se utilizan para definir la altura del elemento.
- Posición: Estas clases se utilizan para definir la posición del elemento.
Sintaxis:
<element-name class="class-name">
...
</element-name>
Ejemplo 1: en el siguiente código, haremos uso de la clase de anchos que se usa para definir el ancho del elemento.
HTML
<!DOCTYPE html>
<html>
<head>
<title>GFG</title>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" />
<style>
body {
text-align: center;
margin: 20px;
}
h1 {
background-color: green;
}
</style>
</head>
<body>
<h1 class="w1">GeeksforGeeks</h1>
<h1 class="w5">GeeksforGeeks</h1>
<h1 class="w9">GeeksforGeeks</h1>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra el DISEÑO de taquiones usando clases de espaciado.
HTML
<!DOCTYPE html>
<html>
<head>
<title>GFG</title>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" />
<style>
body {
text-align: center;
margin: 20px;
}
h1 {
background-color: green;
}
</style>
</head>
<body>
<h1 class="pa1">GeeksforGeeks</h1>
<h1 class="pa3">GeeksforGeeks</h1>
<h1 class="pa5">GeeksforGeeks</h1>
</body>
</html>
Producción:
Referencia: https://tachyons.io/docs/
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA