TuiCss Tutorial - parte 1

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

Estructura del tutorial

1. Elementos de estructura [Actual]
2. Componentes de utilidad
3. Componentes generales (por hacer)
4. Elementos de formulario (por hacer)
5. Clases utilidad (por hacer)
6. 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 con 7 colaboradores y a la fecha de este post, el último commit fue Jul 19, 2023.

Índice

• Ejemplos
• Elementos estructurales
  • tui-screen
  • tui-window
  • tui-panel
  • tui-divider
  • tui-statusbar
  • tui-table
  • tui-navbar

Imagen de ejemplo

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

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

Elementos que añade:

/* .tui-screen */
.tui-screen{
    position: relative;
    overflow: hidden;
}

Estructura:

<!-- 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.

Elementos que añade:

/* tui-window */
.tui-window{
    display: inline-block;
    position: relative;
    padding: 1px;
    box-shadow: 10px 10px #000;
}

Estructura:

<!-- 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

Elementos que añade:

.tui-panel{
    display: iline-block;
    position: relative;
    padding: 1px;
    box-shadow: 10px 10px #000;
}

Estructura:

<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:

.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

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

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

tui-status-bar

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

tui-statusbar-divider

Añade un divisor vertical.

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

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

tui-table

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

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

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

---

Ahora ya puedes continuar con la parte dos del tutorial

Componentes de utilidad