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!