DEV Community

Cover image for TuiCss Tutorial - parte 1
Altaskur
Altaskur

Posted on • Edited on

TuiCss Tutorial - parte 1

#webdev #css #tutorial #spanish

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

Imagen de ejemplo

TuiCss explample

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

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

Elementos que añade:

/* .tui-screen */
.tui-screen{
    position: relative;
    overflow: hidden;
}
Enter fullscreen mode Exit fullscreen mode

Estructura:

<!-- Screen -->
<section class="tui-screen-800-600">
    ...
</section>
Enter fullscreen mode Exit fullscreen mode

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

Elementos que añade:

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

Estructura:

<!-- Window -->
<section class="tui-window">
    ...
</section>
Enter fullscreen mode Exit fullscreen mode

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

Elementos que añade:

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

Estructura:

<section class="tui-panel">
    <div class="tui-panel-header">
        ...
    </div>
    <div class="tui-panel-content">
        ...
    </div>
</section>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

.tui-divider{
   display: block;
   border-bottom: 2px solid #fff;
}
Enter fullscreen mode Exit fullscreen mode 
<span class="tui-divider">
    ...
</span>
Enter fullscreen mode Exit fullscreen mode

tui-status-bar

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

Ejemplo statusbar

tui-statusbar-divider

Añade un divisor vertical.

.tui-statusbar-divider{
    border-right: 2px solid #000 ;
    display: inline;
    margin: 0 3px;
}
Enter fullscreen mode Exit fullscreen mode 
<div class="statusbar">
    ...
</div>
Enter fullscreen mode Exit fullscreen mode

tui-table

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

ejemplo de tabla

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>
Enter fullscreen mode Exit fullscreen mode

Ahora ya puedes continuar con la parte dos del tutorial

Componentes de utilidad

Top comments (0)