Awesome GitHub RepositoriesCSS Frameworks

This project is a utility-first component library that provides a comprehensive suite of pre-styled, reusable interface elements. It functions as a build-time engine that generates design-system-compliant styles by mapping semantic tokens to standard HTML elements and utility classes. By compiling all component styles into static CSS at build time, the library eliminates the need for client-side style calculation, ensuring efficient performance. The library distinguishes itself through a configuration-driven architecture that manages color palettes and visual styles, enabling dynamic switchin

Foundation Sites is a responsive front-end framework providing a collection of CSS and JavaScript tools to build websites that automatically adapt to different screen sizes and devices. It functions as a responsive design library and cross-browser UI toolkit, offering a grid layout system and pre-styled interface components to ensure consistent rendering across modern web browsers. The framework enables rapid front-end UI prototyping and the integration of interactive components through a scripting interface that manages the lifecycle of UI plugins. It supports custom CSS framework management

Elysia is a high-performance TypeScript web framework designed for building type-safe backend services. It provides a modular, plugin-based architecture that allows developers to compose server logic, middleware, and validation schemas into scalable application instances. By leveraging native web standards, the framework ensures portability across diverse JavaScript runtimes, including Node.js, Deno, and various edge computing environments. The framework distinguishes itself through its focus on end-to-end type safety, automatically synchronizing request and response definitions between the s

This project is a CSS design system framework and modular library providing a standardized set of UI component stylesheets. It establishes a unified system of visual guidelines to ensure a consistent and professional look and feel across web interfaces. The framework is organized as a collection of standalone stylesheets that can be imported individually to minimize bundle size and eliminate unused styles. It utilizes a design token system based on CSS variables to manage theming and a utility-first class system for layout and spacing. The system employs a block element modifier naming conve

This project is a Sass implementation of the Bootstrap framework, providing a collection of responsive, mobile-first UI toolkits and layout systems. It serves as a Sass UI library that allows for the creation of custom CSS frameworks through the use of a preprocessor to generate browser-ready stylesheets. The framework is distinguished by its deep customization capabilities, enabling users to override default themes and visual variables using Sass variables and mixins. It utilizes a modular import system, allowing specific components to be selectively included to control the final CSS bundle

Bourbon is a CSS framework toolset and Sass mixin library designed to standardize styling patterns and reduce repetitive code in web projects. It serves as a workflow optimizer that provides a collection of reusable functions to streamline the process of writing and organizing stylesheets. The toolkit focuses on responsive web design by providing a library of mixins for implementing flexible layouts and standardized breakpoints across different screen sizes. It also includes a suite of command line utilities used to install and manage styling dependencies within a local development environmen

This project is a web development tutorial site and a Ruby on Rails learning resource designed as a beginner programming guide. It serves as a technical workshop curriculum and a structured framework for organizing and coaching community-led programming events. The site functions as a static site generator that converts Markdown content and templates into pre-rendered HTML pages. This architecture supports the delivery of step-by-step guides and instructional materials used to teach new learners how to build web applications. The content covers a broad range of capabilities, including Ruby o

charts.css is a CSS-driven framework designed to transform semantic HTML into accessible data visualizations without relying on JavaScript. It functions as a charting library that uses standard HTML structures, such as tables and lists, to render graphs while maintaining full compatibility with screen readers. The project distinguishes itself by using CSS variables to map numeric data to visual dimensions and utility classes to control chart types and layouts. It supports a wide range of visual styles, including 3D effects, reflection effects, and customized color palettes integrated via a br

Object-Oriented CSS (OOCSS) is a CSS methodology and framework that structures stylesheets around reusable, composable classes. Its core principle is separating layout and structure from visual design, allowing the same structural classes to work with different visual treatments. The approach encourages styling elements based on their own properties rather than their location in the DOM, making components portable across different contexts. The methodology is built on class composition, where complex visual patterns are created by combining multiple single-purpose CSS classes on a single elem

Blueprint-css es un framework de CSS que proporciona un conjunto de estilos predefinidos y un sistema de rejilla (grid) responsivo para construir diseños de páginas web y tipografía consistentes. Incluye un reset de estilos de navegador para eliminar el estilo predeterminado del navegador, asegurando un punto de partida visual uniforme en diferentes entornos. El framework cuenta con un sistema de rejilla responsivo basado en columnas que adapta automáticamente el contenido web a varios tamaños de pantalla y dispositivos. También incluye una hoja de estilos de impresión dedicada para optimizar la apariencia del contenido web específicamente para la impresión física. El proyecto cubre la estandarización de la tipografía, el estilo de los inputs de formularios y la optimización de assets frontend. Se proporciona un script de compilación para minificar hojas de estilos y eliminar características no utilizadas para reducir el tamaño final del bundle de assets. Las herramientas de desarrollo incluyen un sistema de validación de diseño que delinea los elementos en el navegador para señalar declaraciones faltantes o uso incorrecto de clases.

django-crispy-forms is a Django form rendering library used to generate styled HTML output from forms. It employs a programmatic form layout engine that allows the composition of form structures and styling using Python objects rather than handwritten HTML templates. The library uses a template pack system to decouple form logic from visual styling, enabling the application of different CSS frameworks through configuration settings. This ensures frontend UI consistency by swapping the set of HTML templates used for various frameworks. The tool provides a Django template filter to produce com

Este proyecto es una guía completa de desarrollo front-end y hoja de ruta diseñada para ayudar a los ingenieros a dominar las habilidades y estándares profesionales requeridos para el desarrollo web moderno. Sirve como referencia técnica para dominar HTML, CSS y JavaScript, proporcionando rutas de aprendizaje estructuradas y un mapa de las competencias profesionales necesarias para pasar de principiante a ingeniero web profesional. El recurso funciona como un directorio categorizado y una visión general del ecosistema de JavaScript. Cataloga frameworks, bibliotecas y utilidades estándar de la industria, ofreciendo recomendaciones específicas para la gestión de estado, frameworks CSS y generadores de sitios estáticos. La guía cubre un amplio espectro de capacidades de ingeniería, incluyendo arquitectura de UI, optimización del rendimiento web y auditoría de accesibilidad. También proporciona orientación sobre automatización de compilación, estrategias de despliegue y la selección de herramientas de desarrollo para flujos de trabajo profesionales.