PureCSS permite construir webs sencillas y minimalistas con CSS, sin JavaScript, librerías ni gaitas
Quienes aprecien las virtudes del minimalismo en el diseño y programación de sitios webs seguramente querrán echar un vistazo a PureCSS (o simplemente Pure), que son unos módulos CSS que apenas ocupan espacio (3,7 KB) y sirven para construir todo tipo de webs.
No necesita JavaScript ni complejas librerías, y además está libre de cookies, virtudes ambas importantes para hacer que las páginas sean rápidas como un rayo. Además funciona son diseños adaptables (responsive, de modo que se transforman automáticamente para las versiones de navegador de escritorio (desktop) y móviles.
La idea es que en la misma hoja de estilos CSS básica ya se incluyen muchas definiciones de elementos y sus atributos, de modo que sirvan cual piezas de Lego para construir, con cierta elegancia:
- Páginas grid / modulares
- Formularios
- Tablas
- Menús
- Botones
Para hacerse una idea se puede ver la página de Layouts, donde hay ejemplos de cómo usarlo para construir un blog, una galería de fotos, una app estilo paneles de correo/RSS, una página de productos y precios y una página de presentación (landing page), así como diversos menús verticales y horizontales. Se pueden usar estos mismos ejemplos y modificarlos o ir sección por sección (Base, Grids, Formularios, etcétera) para entender mejor sus secretillos.
Para utilizar este CSS basta incluir una llamada al principio del código de la página, en la sección <head> y listo. En Github: Pure está todo el código libre del proyecto, con licencia Yahoo. No sabía que Yahoo tenía licencias libres personalizadas, pero mira, todo los días se aprende algo.
Relacionado:
- Barras de progreso e indicadores de carga en CSS
- Un generador de botones en CSS
- 10 plantillas en CSS de una sola línea
- Simple, elegante y rápido: new.css simplifica el diseño HTML/CSS
- 10 plantillas en CSS de una sola línea
- Un editor CSS de degradados de color para textos en páginas web
- Un repositorio de código HTML enrevesado
- Vídeo: CSS grid para 10 plantillas con las que crear diseños modernos
- NES.css: para retrotraer el estilo de las páginas web
- 100.000 iconos libres y gratis organizados en colecciones
- Bioicons, un lugar para descargar ilustraciones e iconos científicos
- Un pack de iconos gratuitos sobre el coronavirus
- Heroicons: una colección de iconos minimalistas con licencia libre
- Las banderas del mundo como imágenes con licencia de código abierto
- Las paletas de color de Colorion
- Mastershot es un editor de vídeos online
- Google Fonts añade iconos en estilo Material Design a su colección
- Vectorizer: una sencilla utilidad de gráficos vectoriales