DEV Community

Cover image for TuiCSS Tutorial - parte 2
Altaskur
Altaskur

Posted on • Updated on

TuiCSS Tutorial - parte 2

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
  2. Componentes de Utilidad [actual]
  3. Componentes generales (por hacer)
  4. Elementos de formulario (por hacer)
  5. Clases utilidad (por hacer)
  6. Ejemplos (por hacer)

Índice

Componentes de utilidad
Background
Border
Shadow
Scrollbar
Temas
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


<!-- Estructura -->

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

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

Enter fullscreen mode Exit fullscreen mode

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

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.

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
Enter fullscreen mode Exit fullscreen mode
Tamaño
.tui-shadow
.tui-shadow-1
.tui-shadow-2
.tui-shadow-3
.tui-shadow-4
.tui-shadow-5
Enter fullscreen mode Exit fullscreen mode
Eliminación
.tui-no-shadow
Enter fullscreen mode Exit fullscreen mode

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:

.tui-scroll-cyan
.tui-scroll-green
.tui-scroll-red
.tui-scroll-purple
.tui-scroll-yellow
.tui-scroll-white
.tui-scroll-orange
Enter fullscreen mode Exit fullscreen mode

ejemplo de scrollbar

Temas

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

.primary
.secondary
.success
.danger
.warning
.info
Enter fullscreen mode Exit fullscreen mode

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

los colores disponibles son:


.black-[variante]
.blue-[variante]
.green-[variante]
.cyan-[variante]
.red-[variante]
.purple-[variante]
.yellow-[variante]
.white-[variante]
.orange-[variante]
Enter fullscreen mode Exit fullscreen mode

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.

<div class="tui-panel black-255">
</div>
Enter fullscreen mode Exit fullscreen mode

Podemos ponerlos en las siguientes clases:

<color>
<color>-text    
<color>-border
<color>-hover
<color>-text-hover
<color>-border-hover
Enter fullscreen mode Exit fullscreen mode

Top comments (0)