1. Pure CSS
Pure CSS es un estupendo framework desarrollado por Yahoo! especialmente orientado en la simplicidad y legibilidad. El gráfico multicolor que muestra en su página principal ya da una idea de lo simple que es, puesto que sumando cada una de las partes específicas (Base, Grids, Forms, Buttons, Tables y Menus), apenas llega a 16KB en total.
Permite personalizar el framework y quedarte sólo con las partes que quieres utilizar (por si sólo vas a usar el grid o los botones, por ejemplo), incluso pudiendo utilizar un CDN como jsDelivr.
URL | PureCSS | Docs
CDNJS | PureCSS en CDNJS
Tamaño aprox | ~16KB
2. Bulma
Bulma es un framework CSS orientado para el desarrollo de páginas webs muy legibles y agradables, tanto para el visitante, como para el desarrollador. Tiene una documentación muy detallada y digna de alabanza, ya que están todas sus características muy bien documentadas, empezando por sus características más básicas y elementales, hasta llegar a las más complejas o las que incorporan mayor cantidad de código.
Además, se trata de un framework bastante moderno, que incorpora características interesantes como Flexbox, sistema en el que está basado.
URL | Bulma | Templates
CDNJS | Bulma en CDNJS
Tamaño aprox | ~112KB
3. Picnic CSS
El objetivo de Picnic es poner a nuestra disposición una alternativa a Bootstrap ligera, sólo con CSS, y lo más visualmente agradable posible. Y lo consigue bastante bien. Echando un vistazo a su documentación, vemos que tiene un gran número de elementos para utilizar con este framework que ocupa apenas 38KB.
A pesar de que el framework no contiene Javascript, a lo largo de la documentación te pone algunas líneas de código en javascript que puedes incluir para mejorar la experiencia de usuario, de forma opcional.
URL | Picnic CSS | Demo
CDNJS | Picnic CSS en CDNJS
Tamaño aprox | ~38KB
El objetivo de Picnic es poner a nuestra disposición una alternativa a Bootstrap ligera, sólo con CSS, y lo más visualmente agradable posible. Y lo consigue bastante bien. Echando un vistazo a su documentación, vemos que tiene un gran número de elementos para utilizar con este framework que ocupa apenas 38KB.
A pesar de que el framework no contiene Javascript, a lo largo de la documentación te pone algunas líneas de código en javascript que puedes incluir para mejorar la experiencia de usuario, de forma opcional.
URL | Picnic CSS | Demo
CDNJS | Picnic CSS en CDNJS
Tamaño aprox | ~38KB
4. Primer CSS
Primer no es sólo un framework, sino una guía de estilo y un conjunto de herramientas para crear páginas con el «look and feel» de GitHub. Desde recomendaciones HTML hasta fragmentos de código, pasando por componentes al estilo de los que existen en Bootstrap, siempre manteniendo la misma apariencia de la famosa plataforma de repositorios de código.
URL | Primer | Docs
CDNJS | Primer CSS en CDNJS
Tamaño aprox | ~113KB
5. Amazium CSS
Amazium es un framework minimalista (que ocupa aproximadamente 40KB), con el que se pueden construir diseños web a partir de prototipos, de una forma relativamente sencilla. Su documentación es bastante clara, y está dividida en los conceptos necesarios para tal fin en orden de necesidad. Por ejemplo, comenzamos por la estructura (donde puedes utilizar grid o columnas), luego conceptos de estilo (tipografías, colores y componentes) y finalizando con elementos de un formulario (campos, mensajes de error, botones, etc...).
URL | Amazium
Tamaño aprox | ~41KB
Amazium es un framework minimalista (que ocupa aproximadamente 40KB), con el que se pueden construir diseños web a partir de prototipos, de una forma relativamente sencilla. Su documentación es bastante clara, y está dividida en los conceptos necesarios para tal fin en orden de necesidad. Por ejemplo, comenzamos por la estructura (donde puedes utilizar grid o columnas), luego conceptos de estilo (tipografías, colores y componentes) y finalizando con elementos de un formulario (campos, mensajes de error, botones, etc...).
URL | Amazium
Tamaño aprox | ~41KB
6. Blaze CSS
Blaze CSS incorpora un gran número de componentes como botones, acordeones, burbujas, listas, paginaciones, menús, etc... precedidas de otros detalles interesantes como objetos genéricos (contenedores, grids, paneles, ventanas modales, etc...) o utilidades para gestionar alineaciones, tamaños o colores.
Como curiosidad, Blaze CSS sigue una arquitectura de triángulo invertido de CSS (ITCSS) junto a BEM, convenciones bastante modernas e interesantes a la hora de trabajar con el código. Por otra parte, si quieres modularidad disponible directamente, puedes encontrar componentes por separados en el CDN unPkg.
URL | BlazeCSS | Demo | Examples
CDNJS | BlazeCSS en CDNJS
Tamaño aprox | ~69KB
7. Pavilion
Pavilion es un framework ligero que se centra en tener lo justo y necesario para construir una página legible y agradable sin necesidad de «inflarlo». Este framework es estupendo para utilizarse de primer punto de partida y obtener una web minimalista, vistosa y muy legible, o para utilizar de base e ir ampliando su diseño con más características.
Otro framework del mismo tamaño, y muy similar en filosofía e intenciones, es Yeti.CSS.
URL | Pavilion | Docs
CDNJS | Pavilion en CDNJS
Tamaño aprox | ~26KB
8. Baseguide
Continuando con los frameworks ligeros para partir de base y ampliar, tenemos Baseguide. Se trata de un framework muy simple, responsive, con componentes escalables, grids con flexbox y media queries (breakpoints) extensibles. Muy aconsejable para aquellos que trabajan con SASS.
Si no te convence, y buscas algo más parecido a un boilerplate, echa un vistazo a Fictoan.
URL | Baseguide
CDNJS | Baseguide en CDNJS
Tamaño aprox | ~21KB
9. Tachyons
Tachyons se define como un conjunto modular de CSS para construir interfaces de usuario rápidamente, sin necesidad de escribir CSS. Simplemente utilizas el CSS que necesites. Los principios del framework son que todo debe ser responsive, legible y rápido, hacer cambios de diseño y reutilizar código debe ser fácil y el CSS no debe impedir el funcionamiento base del HTML.
En el apartado de componentes puedes echar un vistazo a como construir ciertas estructuras o conjuntos de componentes. Se trata de un framework menos guiado que otras alternativas citadas.
URL | Tachyons | Demos
CDNJS | Tachyons en CDNJS
Tachyons se define como un conjunto modular de CSS para construir interfaces de usuario rápidamente, sin necesidad de escribir CSS. Simplemente utilizas el CSS que necesites. Los principios del framework son que todo debe ser responsive, legible y rápido, hacer cambios de diseño y reutilizar código debe ser fácil y el CSS no debe impedir el funcionamiento base del HTML.
En el apartado de componentes puedes echar un vistazo a como construir ciertas estructuras o conjuntos de componentes. Se trata de un framework menos guiado que otras alternativas citadas.
URL | Tachyons | Demos
CDNJS | Tachyons en CDNJS
Tamaño aprox | ~86KB
10. Concise CSS
Y con Concise CSS, como su propio nombre indica, continuamos con los frameworks simples y concretos, ideales para tomar de base y ampliar a una interfaz con un diseño específico y de nuestra elección. El eslogan de este framework es «Renuncia a frameworks inflados. Olvídate de tropezar con las clases de tu framework. Sé conciso.». Y al echar un vistazo a la documentación entendemos por qué.
Concise CSS es justo eso, un framework muy específico. Utiliza un estilo de codificación llamado RSCSS (Sistema razonable de CSS) que no es más que un conjunto de convenciones para que el código sea claro y lógico. Una vez clara esta primera parte, nos presenta un core con las características más solicitadas en un framework, así como addons útiles o componentes de UI.
URL | Concise CSS | Docs
Tamaño aprox | ~13KB
Y con Concise CSS, como su propio nombre indica, continuamos con los frameworks simples y concretos, ideales para tomar de base y ampliar a una interfaz con un diseño específico y de nuestra elección. El eslogan de este framework es «Renuncia a frameworks inflados. Olvídate de tropezar con las clases de tu framework. Sé conciso.». Y al echar un vistazo a la documentación entendemos por qué.
Concise CSS es justo eso, un framework muy específico. Utiliza un estilo de codificación llamado RSCSS (Sistema razonable de CSS) que no es más que un conjunto de convenciones para que el código sea claro y lógico. Una vez clara esta primera parte, nos presenta un core con las características más solicitadas en un framework, así como addons útiles o componentes de UI.
URL | Concise CSS | Docs
Tamaño aprox | ~13KB
11. Bloom CSS
Bloom llama la atención por ser un framework excesivamente sencillo y minimalista, con el que podremos realizar interfaces simples en apenas unos segundos, ya que la documentación muestra todo lo que podemos hacer en una sola página, dándonos una idea de la interfaz que conseguiríamos con este framework. A su vez, utiliza otros frameworks (o partes de ellos) como Normalize.css, Font Awesome u otros.
URL | Bloom CSS
Tamaño aprox | ~78KB
Bloom llama la atención por ser un framework excesivamente sencillo y minimalista, con el que podremos realizar interfaces simples en apenas unos segundos, ya que la documentación muestra todo lo que podemos hacer en una sola página, dándonos una idea de la interfaz que conseguiríamos con este framework. A su vez, utiliza otros frameworks (o partes de ellos) como Normalize.css, Font Awesome u otros.
URL | Bloom CSS
Tamaño aprox | ~78KB
12. Furatto
Furatto es un framework orientado a crear estructuras de interfaz de usuario de una forma clara y rápida. Un vistazo rápido a la documentación nos divide las estructuras de esqueleto de una página (media queries, grids, responsive, etc...), los elementos de navegación (navbar, sidebars, tabs, paginación...), así como elementos comunes de una página. Además, indica claramente los elementos que requieren Javascript adicional para funcionar desde el menú de documentación del framework.
Otro framework similar es Spectre CSS, que provee una serie de elementos y componentes de interfaz de usuario para crear diseños similares a los resultantes con Furatto.
URL | Furatto | Docs
Tamaño aprox | ~54KB
13. Outline CSS
Outline CSS es un framework simple que permite crear diseños claros, grandes y muy simples. Incorpora la mayoría de elementos de un framework del tipo de Bootstrap (tipografías, botones, formularios, paginación, tablas...), además de, por ejemplo, Susy, un plugin Sass para crear grids.
Otro framework del mismo estilo, con formato simple y básico, es Shine CSS.
URL | Outline CSS | Get Started
Tamaño aprox | ~13KB
Outline CSS es un framework simple que permite crear diseños claros, grandes y muy simples. Incorpora la mayoría de elementos de un framework del tipo de Bootstrap (tipografías, botones, formularios, paginación, tablas...), además de, por ejemplo, Susy, un plugin Sass para crear grids.
Otro framework del mismo estilo, con formato simple y básico, es Shine CSS.
URL | Outline CSS | Get Started
Tamaño aprox | ~13KB
14. Beauter
Beauter se enfoca en permitir crear diseños intuitivos y claros de una forma muy sencilla. Utiliza una metodología de código llamada bol{;} (base, -objeto _capa), similar a BEM. Además de los componentes típicos que incorpora la mayoría de frameworks, Beauter también incorpora elementos como componentes parallax (muy sencillos, eso sí).
URL | Beauter | Docs
Tamaño aprox | ~17KB
Beauter se enfoca en permitir crear diseños intuitivos y claros de una forma muy sencilla. Utiliza una metodología de código llamada bol{;} (base, -objeto _capa), similar a BEM. Además de los componentes típicos que incorpora la mayoría de frameworks, Beauter también incorpora elementos como componentes parallax (muy sencillos, eso sí).
URL | Beauter | Docs
Tamaño aprox | ~17KB
15. Thimble CSS
Thimble CSS hace referencia a la construcción de un sitio a medida, en base a las necesidades de cada proyecto. Se trata de un framework moderno (utiliza estructuras con flexbox) que permite crear diseños de forma ágil. Remarcar que es un framework muy, muy ligero, ya que apenas ocupa 14KB.
Utiliza una guía de estilo bastante atractiva, y al igual que otros frameworks tiene una serie de componentes como grids, justificación rápida, tipografías, botones, tarjetas u otros, que llaman la atención por la simpleza del código.
URL | Thimble CSS | Docs | Style Guide
Tamaño aprox | ~14KB
Thimble CSS hace referencia a la construcción de un sitio a medida, en base a las necesidades de cada proyecto. Se trata de un framework moderno (utiliza estructuras con flexbox) que permite crear diseños de forma ágil. Remarcar que es un framework muy, muy ligero, ya que apenas ocupa 14KB.
Utiliza una guía de estilo bastante atractiva, y al igual que otros frameworks tiene una serie de componentes como grids, justificación rápida, tipografías, botones, tarjetas u otros, que llaman la atención por la simpleza del código.
URL | Thimble CSS | Docs | Style Guide
Tamaño aprox | ~14KB
16. Cardinal
Muchos de los frameworks citados en esta lista, a pesar de autocatalogarse como frameworks, realmente son herramientas de interfaz de usuario (incluyen componentes prediseñados con una carga alta de diseño visual). Cardinal intenta huir de ese aspecto y mantenerse como un framework puro, independiente del aspecto visual final que se le quiera dar al sitio.
Cardinal CSS te ayuda a organizar la estructura del sitio facilmente, mantener el responsive design y facilitar en la medida de lo posible el escalar a diseños más complejos sin tener que hacer demasiados cambios en el código. Utiliza el preprocesador LESS.
URL | Cardinal CSS
Tamaño aprox | ~90KB
Muchos de los frameworks citados en esta lista, a pesar de autocatalogarse como frameworks, realmente son herramientas de interfaz de usuario (incluyen componentes prediseñados con una carga alta de diseño visual). Cardinal intenta huir de ese aspecto y mantenerse como un framework puro, independiente del aspecto visual final que se le quiera dar al sitio.
Cardinal CSS te ayuda a organizar la estructura del sitio facilmente, mantener el responsive design y facilitar en la medida de lo posible el escalar a diseños más complejos sin tener que hacer demasiados cambios en el código. Utiliza el preprocesador LESS.
URL | Cardinal CSS
Tamaño aprox | ~90KB
17. Mini CSS
Continuamos con otro framework que también permanece al margen del diseño visual, intentando enfocarse en la estructura del sitio, en lugar de los aspectos de diseño, que se podrán añadir posteriormente o personalizar a medida y en base al estilo elegido.
Con miniCSS lo que hacemos es organizar la estructura del sitio y crear de forma sencilla interfaces de usuario sin estética visual. La documentación está repleta de ejemplos en Codepen que podemos observar, modificar o utilizar de base.
URL | MiniCSS | Quick Ref
CDNJS | MiniCSS en CDNJS
Tamaño aprox | ~35KB
Continuamos con otro framework que también permanece al margen del diseño visual, intentando enfocarse en la estructura del sitio, en lugar de los aspectos de diseño, que se podrán añadir posteriormente o personalizar a medida y en base al estilo elegido.
Con miniCSS lo que hacemos es organizar la estructura del sitio y crear de forma sencilla interfaces de usuario sin estética visual. La documentación está repleta de ejemplos en Codepen que podemos observar, modificar o utilizar de base.
URL | MiniCSS | Quick Ref
CDNJS | MiniCSS en CDNJS
Tamaño aprox | ~35KB
18. Penguin
Por último, Penguin es un framework de componentes de interfaz de usuario desarrollado por BQ donde tenemos a nuestra disposición un amplio catálogo de código prediseñado listo para utilizar: alertas, botones, formularios, grids, ventanas modales, spinners, pestañas, entre otras. También permite la utilización de temas para modificar la apariencia visual.
Otro framework similar digno de mención podría ser Caramel (~46KB), el cuál incorpora un Showcase donde se puede ver la interfaz de los componentes del framework.
URL | Penguin | Demo
Tamaño aprox | ~22KB
Por último, Penguin es un framework de componentes de interfaz de usuario desarrollado por BQ donde tenemos a nuestra disposición un amplio catálogo de código prediseñado listo para utilizar: alertas, botones, formularios, grids, ventanas modales, spinners, pestañas, entre otras. También permite la utilización de temas para modificar la apariencia visual.
Otro framework similar digno de mención podría ser Caramel (~46KB), el cuál incorpora un Showcase donde se puede ver la interfaz de los componentes del framework.
URL | Penguin | Demo
Tamaño aprox | ~22KB
0 Comentarios