Asistentes de depuración para identificar problemas HTML

inuit.css incluye clases utilitarias que ayudan a detectar fallos en el marcado. Al activar el modo de depuración, se visualizan problemas comunes:

• Elementos vacíos: se muestran con un contorno amarillo, señalando contenido potencialmente omitido.
• Imágenes sin atribtuo alt: se marcan con un borde rojo si falta el atributo alt.
• Enlaces con atributos faltantes: los enlaces sin título o con JavaScript se resaltan en amarillo.
• Listas mal estructuradas: se verifica que contengan únicamente elementos <li> como hijos.
• Formularios incompletos: se revisa la acción y atributos requeridos en campos de entrada.

Para activar estas utilidades, establece la variable Sass $modo-depuracion en true. Esta funcionalidad es esencial durante el desarrollo para crear HTML semántico y accesible.

Clases para estilos de marca

inuit.css ofrece clases que aplican rápidamente elementos visuales de marca:

.marca {
    font-family: $tipo-fuente-marca !important;
    color: $color-marca !important;
}

.fuente-marca {
    font-family: $tipo-fuente-marca !important;
}

.color-marca {
    color: $color-marca !important;
}

Estas clases usan !important para garantizar la aplicación efectiva. Se pueden emplear en encabezados, pies de página o áreas destacadas para reforzar la identidad visual.

Utilidades para diseño y espaciado

Control de flotación y alineación

inuit.css proporciona clases para gestionar posición y texto:

• Flotación: .flotar--derecha, .flotar--izquierda, .flotar--ninguno
• Alineación de texto: .texto--izquierda, .texto--centro, .texto--derecha
• Peso de fuente: .peso--ligero, .peso--normal, .peso--seminegrita

Control de espaciado

Las utilidades de espaciado ofrecen precisión en márgenes y rellenos:

Márgenes:

• .margen: aplica el espaciado base a todos los lados.
• .margen--superior, .margen--derecha, .margen--inferior, .margen--izquierda: control individual.
• .margen--extremos: márgenes vertical y horizontal.
• .margen-medio: variante con mitad del espaciado base.

Rellenos:

• .relleno: aplica relleno base en todos los bordes.
• .relleno--superior, .relleno--derecha, .relleno--inferior, .relleno--izquierda: control direccional.
• .sin-relleno: elimina todo el relleno.

Clases de diseño especiales

• .ancho-completo: hace que el elemento ocupe todo el ancho dentro de un contenedor padre.
• .informativo: añade un cursor de ayuda para elementos con infromación adicional.
• .silenciado: reduce la opacidad para atenuar visualmente.
• .continuar: alinea a la derecha elementos que implican avance.
• .mayusculas: aplica transformación a mayúsculas.

Ocultación accesible y responsiva

inuit.css proporciona clases de ocultación que no usan display: none, asegurando que el contenido sea legible por lectores de pantalla:

.accesibilidad,
.oculto-visual {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
}

Para diseño responsivo, se ofrecen variantes por punto de corte:

• .accesibilidad--movil, .oculto-visual--movil
• .accesibilidad--portatil, .oculto-visual--portatil
• .accesibilidad--escritorio, .oculto-visual--escritorio

Estas clases son clave para crear aplicaciones web inclusivas.

Implementación y configuración

Instalación

Clona el repositorio de inuit.css e integra en tu proyecto Sass:

git clone https://gitcode.com/gh_mirrors/in/inuit.css

Importa el archivo principal en tu hoja de estilos Sass:

// En tu archivo Sass principal
@import 'ruta/a/inuit.css/inuit';

Personalización mediante variables

Sobrescribe variables Sass para adaptar las utilidades:

// En tu archivo de variables
$unidad-espaciado-base: 20px;
$unidad-espaciado-medio: 10px;
$tipo-fuente-marca: 'Helvetica Neue', Arial, sans-serif;
$color-marca: #ff0000;
$modo-depuracion: true; // Activar en desarrollo

Ejemplos prácticos

<!-- Aplicar estilos de marca -->
<h1 class="marca">Nombre de la Empresa</h1>
<p class="color-marca">Eslogan de marca</p>

<!-- Usar utilidades de espaciado -->
<div class="relleno margen--inferior">
    <p class="texto--centro">Párrafo centrado</p>
</div>

<!-- Combinar flotación y alineación -->
<div class="limpiar-flotados">
    <img src="imagen.jpg" class="flotar--izquierda margen--derecha" alt="Ejemplo">
    <p>Contenido textual alrededor de la imagen</p>
</div>

<!-- Ocultar responsivamente -->
<p class="accesibilidad--movil">Contenido oculto en móviles</p>

Estructura de archivos

Las utilidades de inuit.css se organizan en archivos Sass modulares:

• Depuración: generic/_debug.scss
• Estilos de marca: generic/_brand.scss
• Clases auxiliares: generic/_helper.scss
• Utilidades de espaciado: generic/_push.scss y generic/_pull.scss
• Utilidades de ancho: generic/_widths.scss

Recomendaciones de uso

1. Uso moderado: Prefiere clases semánticas antes de abusar de las utilitarias.
2. Combinación coherente: Agrupa varias clases manteniendo la legibilidad del código.
3. Diseño responsivo: Aprovecha las utilidades por punto de corte para adaptar interfaces.
4. Rendimiento: Optimiza el CSS en producción para evitar archivos sobredimensionados.
5. Mantenibilidad: Establece convenciones en equipo para el uso consistente de estas clases.