TuiCss Tutorial - parte 1
Tags: webdev, css, tutorial, spanish
Published: 2024-03-10 18:46:59

Primera parte del tutorial de la librería TuiCss, voy a enfocar en cuatro partes:

## Estructura del tutorial

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

En esta parte veremos que es TuiCSS y los elementos estructurales.

# TuiCSS

TuiCss es una librería de CSS enfocada a crear interfaces basadas en la tabla de ASCII cómo MSDOS y en Turbo Vision Framework, es un proyecto OpenSource creado por el usuario [@vinibiavatti1 en GitHub](https://github.com/vinibiavatti1/TuiCss/) con 7 colaboradores y a la fecha de este post, el último commit fue Jul 19, 2023.

## Índice

- [Ejemplos](#ejemplos)
- [Elementos estructurales](#elementos-estructurales)
    - [tui-screen](#tuiscreen)
    - [tui-window](#tuiwindow)
    - [tui-panel](#tuipanel)
    - [tui-divider](#tuidivider)
    - [tui-statusbar](#tuistatusbar)
    - [tui-table](#tuitable)
    - [tui-navbar](#navbar)

## Imagen de ejemplo

![TuiCss explample](https://raw.githubusercontent.com/vinibiavatti1/TuiCss/develop/resources/TUICSS%20Demo.png)

## Elementos estructurales

Son todos los elementos que te ayudarán a crear tu composición, como pantallas, ventanas, divisores, barras de estado y por supuesto ¡tablas!

### tui-screen

Este es el elemento principal de las vistas, con él establecemos el tamaño de pantalla que vamos a representar, lo más común es usar el tamaño de pantalla estándar de la época 800x600

![ejemplo de tui-scrren](https://camo.githubusercontent.com/09c1f1bae5c709915bd0170f789d926029224540109bc910b204d05877eedf92/68747470733a2f2f75706c6f61646465696d6167656e732e636f6d2e62722f696d616765732f3030322f3334302f3036322f66756c6c2f5475694373735f53637265656e5f4578616d706c652e706e673f31353638333031383136)

> No te preocupes también podemos crear diseños responsive

Elementos que añade:
```css
/* .tui-screen */
.tui-screen{
    position: relative;
    overflow: hidden;
}
```
Estructura:
```html
<!-- Screen -->
<section class="tui-screen-800-600">
    ...
</section>
```

Tamaños que admite:

.tui-screen-640-480
.tui-screen-800-600
.tui-screen-1024-768

### tui-window

Con el podemos representar las distintas ventanas, según el estilo que quieras representar podemos combinarlo con la clase `fieldset` que agrega un borde al rededor.

![ejemplo de tui-window](https://camo.githubusercontent.com/38b1bac763f3f30189a9d4aa8432c0331c2f0b7a7100772eafd1c31d92b038c2/68747470733a2f2f75706c6f61646465696d6167656e732e636f6d2e62722f696d616765732f3030322f3334382f3737382f66756c6c2f5475694373735f57696e646f775f4578616d706c652e706e673f31353638363439353839)

Elementos que añade:
```css
/* tui-window */
.tui-window{
    display: inline-block;
    position: relative;
    padding: 1px;
    box-shadow: 10px 10px #000;
}
```

Estructura:

```html
<!-- Window -->
<section class="tui-window">
    ...
</section>
```

### tui-panel

Exactamente igual que `tui-window` salvo que este no está pensado para representarse con un borde de la clase `fieldset` si no que podemos añadirle los elementos `tui-panel-header` y `tui-panel-content`

![ejemplo tui-panel](https://camo.githubusercontent.com/2c967f74a24959fa933836f7c3467d12d554abc9296db010d55080b5395f31b6/68747470733a2f2f75706c6f61646465696d6167656e732e636f6d2e62722f696d616765732f3030322f3333352f3633382f66756c6c2f5475694373735f70616e656c5f6578616d706c652e706e673f31353638313539303239)

Elementos que añade:
```css
.tui-panel{
    display: iline-block;
    position: relative;
    padding: 1px;
    box-shadow: 10px 10px #000;
}
```

Estructura:
```html
<section class="tui-panel">
    <div class="tui-panel-header">
        ...
    </div>
    <div class="tui-panel-content">
        ...
    </div>
</section>
```

#### tui-panel-header

Indicado para añadir un título.
Elementos que añade:
```css
.tui-panel-header{
    padding-top: 2px;
    display: block;
    background: #fff;
    text-align: center;
}
```

#### tui-panel-content

Añade un padding de 12px

## tui-divider

Un divisor vertical, se suele representar con la etiqueta `span`

![ejemplo de tui-divider](https://camo.githubusercontent.com/25ef6ac69edc3c2171c70764c2204ed3b60a6894ae3abe15cbc0295462c21192/68747470733a2f2f692e6962622e636f2f4a3730565039382f5475692d4373732d64697669736f722d6578616d706c652e706e67)

```css
.tui-divider{
   display: block;
   border-bottom: 2px solid #fff;
}
```

```html
<span class="tui-divider">
    ...
</span>
```

## tui-status-bar

Está pensada para añadir acciones rápidas o texto informativo.
contiene.

![Ejemplo statusbar](https://camo.githubusercontent.com/2693724d79558117d0bddf67c1bf327e38f0bd9e4129404e448b13f0debbac07/68747470733a2f2f75706c6f61646465696d6167656e732e636f6d2e62722f696d616765732f3030322f3334332f3130392f66756c6c2f5475694373735f7374617475736261725f6578616d706c652e706e673f31353638333930373534)

### tui-statusbar-divider

Añade un divisor vertical.

```css
.tui-statusbar-divider{
    border-right: 2px solid #000 ;
    display: inline;
    margin: 0 3px;
}
```

```html
<div class="statusbar">
    ...
</div>
```

## tui-table

¡Tablas!
Como buen diseño retro no podrían faltas las tablas.

![ejemplo de tabla](https://camo.githubusercontent.com/ec2415d8beb056ced71338d577558eb43695fecb9f628899ca9c5c645786bbb5/68747470733a2f2f75706c6f61646465696d6167656e732e636f6d2e62722f696d616765732f3030322f3334332f3132392f66756c6c2f5475694373735f7461626c655f6578616d706c652e706e673f31353638333931333238)

El funcionamiento es el mismo sólo tenemos que añadir la clase `.tui-table` aunque admite una serie de modificaciones.

> Podemos añadir un hoover a la tabla, decirle que se resalten los elementos pares o cambiar la barra de separación.

`.hovered-{color}  striped-{color} `

| Colores | | | |
| ------- | ------- | ------- | ------- |
| blue    | green   | cyan    | white   |
| red     | purle   | yellow  | orange  |

```html
<!-- Table hovered -->
<table class="tui-table hovered-cyan">
    ...
</table>
```

---

Ahora ya puedes continuar con la parte dos del tutorial

[Componentes de utilidad](https://dev.to/altaskur/tuicss-tutorial-parte-2-lkb)