¿Cansado del aburrido y simple HTML y del eternamente largo CSS? Conoce Skeleton, el perfecto y ligero complemento CSS para el resto del código boilerplate que ya incluyes como punto de partida de cualquier proyecto.
Código boilerplate es cualquier código repetitivo que aparece una y otra vez para conseguir algún resultado que parece que debería ser mucho más sencillo. Y simple, el estilo base de HTML debería ser mucho más simple.
La mayoría de las bibliotecas de estilo front-end o frameworks operan estableciendo estilos en clases que requieren que el usuario recuerde los nombres de las clases para añadir estilo a los elementos HTML. Skeleton funciona aplicando la mayoría de los estilos directamente a las etiquetas HTML. Tablas, Formularios, Listas, Botones, lo que sea, ellos le dan estilo.
Cómo empezar
Skeleton recomienda que vayas a su sitio web y descargues el archivo CSS convenientemente anotado, sin minificar, listo para usar, para que puedas echar un vistazo tú mismo bajo el capó. Skeleton tiene un total de menos de 400 líneas de código. También hay un conveniente enlace CDN para una configuración aún más rápida cuando la personalización no es crítica para su proyecto. De cualquier manera que elijas incluirlo, una vez que tengas la hoja de estilos vinculada en el encabezado de tu documento, ¡estás listo para ir!
La cuadrícula de 12 columnas
El éxito de Skeleton radica en tomar los atributos que otros frameworks CSS proporcionan y hacerlos muy simples. Al utilizar el sistema de cuadrícula, el diseño del navegador se mantiene fluido y se ajusta automáticamente al tamaño de la ventana. Para utilizar las columnas, utiliza un número y una clase de ‘columna’ o ‘columnas’, o un método abreviado de ‘un tercio’, ‘la mitad’, etc.
Skeleton establece el ancho máximo en 960px, que se ajusta automáticamente a las pantallas grandes, pequeñas y medianas. Si lo desea, puede cambiar el ancho máximo con una línea de CSS, y todas las columnas cambiarán de tamaño en consecuencia!
Tipografía
El tipo de letra en Skeleton se establece en rems para que tenga un tamaño responsivo basado en una única propiedad <html> font-size. La base de la fuente es Raleway, ajustada a 15rem sobre una altura de línea de 1,6 (15px y 24px respectivamente).
Los encabezados tienen su propio tamaño con espaciado de letra, altura de línea y márgenes específicos.
Los botones tienen dos opciones. El estilo de botón estándar existe de forma inherente para la etiqueta <button> (y cualquier otro elemento de formulario apropiado), mientras que la segunda opción de botón, más vibrante, puede aplicarse con una clase ‘.button-primary’.
¿Cuándo debería utilizar Skeleton?
Skeleton es una librería CSS ligera, responsiva y altamente personalizable construida pensando en los móviles. No es necesario compilar o instalar nada, y funciona bien con hojas de estilo CSS adicionales y Frameworks frontales. Utiliza el esqueleto para obtener un CSS rápido y funcional, ideal para demos o MVPs. Además, al ocupar menos de 12kb en la versión minificada, es perfecto para cuando la velocidad es lo más importante. Recuerda que Skeleton es, en esencia, un esqueleto de componentes y estilos puros. Con un solo enlace puedes convertir un HTML aburrido en una página totalmente estilizada sin necesidad de sacrificar la velocidad o memorizar una biblioteca de nombres de clases.
