20 marcos CSS sensibles y ligeros que vale la pena considerar

El uso de un marco CSS de calidad receptiva puede darle un buen comienzo en cualquier proyecto de diseño web. Algunos, como Bootstrap, están un poco hinchados con un exceso de código, mientras que otros requieren una curva de aprendizaje bastante empinada.

Idealmente, desea trabajar con un paquete que le brinde las características suficientes para ayudarlo a comenzar a ejecutar, mientras no lo agobia con un montón de opciones que no necesita.

También te pueden gustar estos marcos web de diseño de materiales o estos marcos de desarrollo de WordPress de código abierto.

Con ese objetivo en mente, aquí hay 20 marcos CSS que proporcionan los conceptos básicos, sin todo el volumen.

FICTOAN

FICTOAN pretende ser una gran opción para aquellos que no son fanáticos de marcos más grandes y complejos. Cuenta con un esquema de colores vivos, iconos personalizados y muchos elementos de diseño de estilo ligero.

FICTOAN

avalancha

avalanche es un marco que puede personalizar para satisfacer sus necesidades. Hay paquetes disponibles para habilitar características específicas como un sistema de rejilla de fluidos, clases de compensación, contenedores, espaciado vertical y más.

avalancha

Beauter

Con menos de 5k comprimidos, Beauter ciertamente toma el desafío de ser muy liviano. Sin embargo, eso no significa que no haya características. Obtiene lo básico como una cuadrícula receptiva, pero también algunos extras como desplazamiento de paralaje, modales, información sobre herramientas y algunos buenos contenedores.

Beauter

Marco de vainilla

Vanilla Framework es simple por diseño para brindarle un excelente punto de partida para su proyecto. Hay muchos contenedores y elementos de diseño incluidos que se ven muy bien, pero también se pueden personalizar fácilmente para que coincidan con el aspecto deseado.

Marco de vainilla

Bulma

Basado en CSS Flexbox, Bulma es un marco modular totalmente receptivo que le permite usar solo lo que necesita. Obtiene todas las ventajas de Flexbox, incluidas columnas y mosaicos que se redimensionan automáticamente en función de su número y ventana gráfica.

Bulma

Miligramo

El miligramo pesa casi tan poco como su homónimo, solo 2k cuando está comprimido. Incluye todos los elementos básicos que esperarías y está diseñado para minimizar la cantidad de estilos que tendrás que restablecer.

Miligramo

InvisCss

InvisCss fue construido como una alternativa a marcos más complicados. El paquete presenta nombres simples de selector CSS y una interfaz de usuario mínima pero atractiva.

InvisCss

Mira

El resultado de un proyecto personal, Look fue lanzado al público como un marco CSS minimalista para servir como un punto de partida básico para el desarrollo del sitio. Los elementos de diseño son simples y se pueden personalizar a su gusto.

Mira

unlimitedGrid

Basado en Sass, unlimitedGrid es un marco de red flexible y móvil primero. Es modular, por lo que solo tiene que usar las funciones que necesita. El soporte de Flexbox está incluido y hay múltiples variaciones de cuadrícula para elegir.

unlimitedGrid

Vital

Considerado como el “enfoque inverso” para marcos más grandes, Vital es ligero y escalable. Creado con Sass, encontrará un diseño de cuadrícula eficiente, botones personalizados y cargadores. También se incluyen varios estilos de diseño útiles para cosas como collages de fotos, contenedores de tarjetas y formularios.

Vital

PowerToCSS

Basado en los principios de SMACSS y DRY, PowerToCSS es un marco CSS ligero que ofrece una base sólida para comenzar rápidamente en su próximo proyecto web.

PowerToCSS

Kouto Swiss

Kouto Swiss es un marco CSS completo para Stylus que le ofrece muchas combinaciones, funciones y utilidades para codificar más rápido, y también incluye el poder del sitio web de Caniuse para que sus hojas de estilo se ajusten a sus necesidades de compatibilidad.

Kouto Swiss

CSS furtivo

Furtive es el primer framework móvil con una huella muy pequeña. Este marco no se preocupa por las versiones anteriores del navegador, lo que significa que puede usar ‘tecnología de punta’ como flexbox, SVG y prefijos de proveedores limitados. También está disponible en SCSS, CSS, y viene con un archivo Gulp para personalizar la compilación.

CSS furtivo

Placa web

El marco de Webplate incluye todo, desde un robusto motor de diseño receptivo, hasta elementos de botones globales, formularios personalizables y soporte para fuentes de iconos IcoMoon. También viene con jQuery, Modernizr y Typeplate por defecto.

Webplate web Lightweight Front-End Framework kit de herramientas de motor de diseño receptivo robusto css html

Fluidez

¡La fluidez es quizás el marco CSS de respuesta rápida más ligero de todos los tiempos! El HTML responde casi al 100% desde el primer momento, y el archivo CSS de 115 bytes corrige la parte ‘casi’. No puede ser más ligero que eso.

/* FLUIDITY v0.1.0 @mrmrs - http://mrmrs.cc MIT
*/
/*
 Responsive Utilities

*/
img, canvas, iframe, video, svg { max-width: 100%; }

/* Wrap tables or pre elements in a div with this class */
.overflow-container { overflow-y: scroll; }

Esquema

Construido en MENOS, Schema es un marco de interfaz de usuario frontend receptivo que viene con una colección completa de componentes CSS (botones, menús desplegables, formularios …) para ayudarlo a comenzar rápidamente.

Esquema de interfaz de usuario de interfaz de usuario menos receptiva

Esmeralda

Emerald es un sistema de cuadrícula sensible pragmático en MENOS. Está basado en elementos de bloque (como opuesto a los flotantes) y está escrito con la metodología OOCSS utilizando la sintaxis BEM.

Sistema de red sensible pragmático esmeralda MENOS

Bibelot

Bijou es un marco de cuadrícula de 10 columnas con capacidad de respuesta ligera (<2 kb). Viene empaquetado con botones, alertas, tablas, barra de navegación y, por supuesto, la cuadrícula.

Bijou ligero marco de cuadrícula de 10 columnas sensible css

Chispa – chispear

Spark es un marco ligero basado en el primer enfoque móvil para un diseño receptivo. El marco viene preconstruido con varios temas de color que son intercambiables, tanto en estilos brillantes como planos. Actualmente, los colores base son plata (predeterminado), azul, verde, naranja, rojo, morado, lima y fruta de dragón.

Spark ligero marco móvil-primero diseño web sensible

Typebase

typebase.css es una plantilla de tipografía CSS mínima y personalizable. Lo más importante que typebase.css le brinda es un ritmo vertical forzado en la mayoría de las pantallas de los dispositivos, lo que garantiza que el texto en las columnas y la copia larga no se vuelva desigual. Ambas versiones Less y Sass están disponibles.

tipo de letra mínimo personalizable tipografía CSS repetitivo

Hoisin

Construido con Sass, Hoisin es un mini marco front-end sencillo y receptivo que se ha creado como una alternativa a los marcos front-end más complejos e hinchados. A propósito no incluye ningún componente, sino que se enfoca en darle una base organizada desde la cual puede crear su propia biblioteca.

Sass Hoisin mini marco frontal receptivo simple

Rejillas lindas

Cute Grids es un sistema de cuadrícula receptivo de 12 columnas, primero móvil, que nació de la frustración de los grandes marcos construidos en la actualidad que pueden ser excesivos para la mayoría de los proyectos y restringir la creatividad del diseñador.

Cute Grids mobile-first 12 columnas sistema de red sensible

Ligero pero poderoso

El objetivo de usar un marco de cualquier tipo es facilitar su trabajo. Así que entrar y tener que cambiar el estilo de una gran cantidad de CSS, o cargar un montón de scripts que ni siquiera vas a usar parece ir en contra de toda lógica.

El uso de uno de los marcos más básicos anteriores puede ayudarlo a comenzar rápidamente sin todos los dolores de cabeza. Y, dado que algunos de ellos utilizan un enfoque modular, puede elegir los elementos que necesita para un proyecto en particular. Eso es más como eso!