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)

Read next

dev007777 profile image

Python beats Javascript, Next.js Leap & the AI Coding Wars

TheDev -

mcsee profile image

Code Smell 279 - Loop Premature Optimization

Maxi Contieri -

chipm0nk profile image

From Concept to Code: Building a Simple Endless Runner Game

Chipm0nk -

gleamso profile image

The No-Fluff Guide to OpenGraph Images That Actually Work 🎯

gleamso -