TuiCSS Tutorial - parte 2
Tags: webdev, css, tutorial, spanish
Published: 2024-03-11 14:20:36

Segunda parte del tutorial de la librería TuiCss, En esta parte veremos los componentes de Utilidad y veremos algún ejemplo.

## Estructura del tutorial

1. [Elementos de estructura](https://dev.to/altaskur/tuicss-tutorial-parte-1-dd5)
1. Componentes de Utilidad [actual]
1. Componentes generales (por hacer)
1. Elementos de formulario (por hacer)
1. Clases utilidad (por hacer)
1. Ejemplos (por hacer)

## Índice

[Componentes de utilidad](#componentes-de-utilidad)
[Background](#background)
[Border](#border)
[Shadow](#shadow)
[Scrollbar](#scrollbar)
[Temas](#temas)
[Colores](#colores)

## Componentes de utilidad

En este tutorial veremos como alterar los elementos para añadir o eliminar características como color, fondo o sombras.

### Background

Quizás una de las más importantes, añade un fondo de puntos simulando un monitor de tubo, suelen recomendar añadir la case al html para cambiar toda la página.

Tenemos catorce fondos diferentes divididos en dos bloques según el fondo de la matriz de puntos:

|Puntos|Fondo|
|------|-----|
|tui-bg-blue-black   | tui-bg-blue-white   |
|tui-bg-green-black  | tui-bg-green-white  |
|tui-bg-cyan-black   | tui-bg-cyan-white   |
|tui-bg-red-black    | tui-bg-red-white    |
|tui-bg-purple-black | tui-bg-purple-white |
|tui-bg-yellow-black | tui-bg-yellow-white |
|tui-bg-orange-black | tui-bg-orange-white |

![Ejemplos de fondo](https://camo.githubusercontent.com/38261d9d56a8e97fdf9c4588b0a013247a69ddb5d25dc512c4d0de9be25935d6/68747470733a2f2f75706c6f61646465696d6167656e732e636f6d2e62722f696d616765732f3030322f3332382f3836332f66756c6c2f5475694373735f6261636b67726f756e645f6578616d706c652e706e673f31353637393637303338)

```html

<!-- Estructura -->

<!-- Html -->
<html class="tui-bg-blue-black"></html>

<!-- Screen -->
<section class="tui-screen-800-600 tui-bg-blue-black">
    ...
</section>

```

### Border

Recomendado para el componente fieldset y controlamos el tipo de borde de este componente, tenemos 4 tipos de borde:

| Tipos||
|---|---|
|.tui-border-double|.tui-border-solid|
|.tui-border-dotted|.tui-border-dashed|

![ejemplo de borde](https://camo.githubusercontent.com/55ee73887c4787f4ed280eba3b36ac642ba1745c90a06aab0c826dc54e1b4c31/68747470733a2f2f692e6962622e636f2f38304b516679472f5475696373732d626f726465722d6578616d706c652e706e67)

### Shadow

Con esta clase podemos controlar la sombra de los componentes window, panel y button. Cambiando posición, tamaño o directamente eliminar la sombra.

```css
Posición   
.tui-shadow-left    
.tui-shadow-left-1    
.tui-shadow-left-2   
.tui-shadow-left-3    
.tui-shadow-left-4 
.tui-shadow-left-5
```

```css
Tamaño
.tui-shadow
.tui-shadow-1
.tui-shadow-2
.tui-shadow-3
.tui-shadow-4
.tui-shadow-5
```

```css
Eliminación
.tui-no-shadow
```

### Scrollbar

Con las palabras de la wiki oficial

> This is just applied for Google Chrome browser unfortunately. 

Podemos cambiar el estilo de la barra de scroll pero sólo en Google Chrome, tenemos disponibles los siete colores de la librería:

```css
.tui-scroll-cyan
.tui-scroll-green
.tui-scroll-red
.tui-scroll-purple
.tui-scroll-yellow
.tui-scroll-white
.tui-scroll-orange
```

![ejemplo de scrollbar](https://camo.githubusercontent.com/63781c22553270fe434f8bd704b7b05f8e3133506f27e2e828d80869a3c53607/68747470733a2f2f692e6962622e636f2f433042685a71762f5475692d4373732d5363726f6f6c2d4578616d706c652e706e67)

## Temas

Por defecto tenemos una serie de configuraciones para todo lo que hemos visto anterior mente, llamadas temas, tenemos seis temas disponibles:

```css
.primary
.secondary
.success
.danger
.warning
.info
```

## Colores

Si con esto no tienes suficiente TuiCSS nos brinda una serie de nueve colores en dos variantes; en la variante de 255 colores y la variante de 168, basadas en las aplicaciones de MS-DOS.


![Ejemplos de imagenes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ikv7w5p4tzajxhpm7hc3.png)

los colores disponibles son:
```css

.black-[variante]
.blue-[variante]
.green-[variante]
.cyan-[variante]
.red-[variante]
.purple-[variante]
.yellow-[variante]
.white-[variante]
.orange-[variante]
```
Tan solo tienes que sustituir [variante] por la variante de 255 o 168 colores y puedes aplicar estos colores en todas las propiedades con el sufijo de color.

```html
<div class="tui-panel black-255">
</div>
```

Podemos ponerlos en las siguientes clases:

```css
<color>
<color>-text	
<color>-border
<color>-hover
<color>-text-hover
<color>-border-hover
```