Awesome GitHub RepositoriesCSS-Only UI Components

WeUI is a mobile web UI library and design system consisting of CSS components and HTML templates. It is specifically designed to replicate the visual identity and interface of the WeChat messaging ecosystem, providing a standardized set of components to build responsive mobile web interfaces. The library functions as a stateless component system, utilizing a pure CSS architecture and HTML templates that rely on external JavaScript for interactivity. It employs a BEM-based class naming convention to manage component nesting and prevent style leakage across complex layouts. The framework incl

NES.css is an 8-bit CSS framework and styling system that transforms standard HTML elements into pixelated interfaces inspired by classic gaming consoles. It serves as a retro UI component library and toolkit for rendering text, borders, and icons with a blocky aesthetic. The framework uses pure CSS to emulate 8-bit graphics without relying on external images or JavaScript rendering. It implements pixel-art border simulations and integrates pixel-style web fonts to maintain a consistent gaming aesthetic across different browsers. The system provides a suite of game-themed interface elements,

Short CSS code snippets for all your development needs

Ratchet is a web-based mobile UI framework and component-based library designed to create responsive mobile application interfaces. It provides a CSS mobile layout system that allows for the development of application frontends using standard web technologies. The framework focuses on mobile app interface design and rapid prototyping, utilizing pre-styled visual elements to ensure consistent styling across various screen sizes and resolutions. The system employs a CSS-only approach to define interactive states and layouts, incorporating a grid-based responsive layout and utility-first styles

This project is a CSS flag icon library and UI component set providing scalable national flag graphics for web interfaces. It delivers a collection of vector-based flags implemented as CSS classes to ensure visual consistency across different screen sizes and resolutions. The library uses ISO-3166-1-alpha-2 naming to map CSS class identifiers directly to international standard two-letter country codes. This allows for predictable asset lookup and the integration of regional visual identifiers to support web interface localization. The system covers CSS-based iconography, utilizing SVG backgr

Spectre is a comprehensive CSS framework and UI utility toolkit designed for building responsive web interfaces. It functions as a CSS component library that provides pre-styled interface elements and helper classes to facilitate frontend UI development. The framework is distinguished by a pure-CSS component architecture that avoids dependence on external JavaScript runtimes. It utilizes a SASS-based build pipeline that supports class prefixing, stylesheet pruning, and a variable-based theme system for creating custom design systems. The project covers a wide range of layout and interface ca

98.css is a CSS retro UI framework and component library designed to recreate the visual aesthetic of legacy desktop operating systems. It serves as a retro design system and web UI emulator, providing a collection of styles to build faithful reproductions of vintage user interfaces. The framework employs a CSS-only component architecture to emulate classic software environments. It uses border-shadow emulation and state-based visual transitions to simulate physical button presses and three-dimensional panels without requiring external JavaScript logic. The library covers a wide range of int

This project is a curated collection of galleries and component libraries that demonstrate pure CSS visual effects, 3D transforms, animation patterns, and layout solutions. It serves as a visual catalog of interactive UI elements and graphics built exclusively with HTML and CSS. The collection distinguishes itself by implementing complex interactivity, such as state management and animation triggers, using only CSS pseudo-classes and keyframes without any JavaScript. It also features a system for generative art and algorithmic patterns, as well as spatial 3D constructions using perspective an

hint.css is a pure CSS tooltip library and styling framework used to create accessible informational pop-ups. It functions as a lightweight user interface component that transforms ARIA attributes into visible tooltips without the use of JavaScript. The framework is designed to be customizable, offering a system of configurable class prefixes to prevent naming conflicts within larger web projects. It utilizes a BEM-inspired namespace to ensure stylesheets remain conflict-free when integrated into existing environments. The library covers a range of UI capabilities, including directional posi

CSS Layout is a pure CSS pattern library that provides pre-built layout components for common page structures, implemented entirely with CSS using flexbox and grid. The collection focuses on reusable, encapsulated components that handle overlapping elements, vertical centering, sticky footers, and classic page layouts without requiring any JavaScript for rendering or interactivity. The library offers a range of practical layout implementations including centered navigation menus, element stacking techniques, holy grail page layouts, and responsive grid systems. Each pattern is built as a self

This project is a collection of lightweight animated loading indicators and pure CSS UI components. It provides a library of pre-made styles and keyframes for rendering visual motion effects and loading spinners without the use of JavaScript. The library prioritizes minimal document object model overhead by utilizing a single-element HTML structure for each loader. It employs pseudo-elements to create complex shapes and relies on font-size based scaling to ensure proportional resizing across different dimensions. These components function as user interface feedback systems, providing visual

Magic of CSS is a structured tutorial series that teaches web developers advanced CSS layout, typography, and animation techniques through hands-on examples. The course covers the full spectrum of CSS capabilities, from foundational box model and positioning concepts to sophisticated animation and interactive state management, all without relying on JavaScript. The series distinguishes itself by teaching practical, real-world CSS patterns such as inline-block justified grids, percentage-based absolute positioning, table-display vertical centering, and letter-span styling techniques. It demons

balloon.css 是一个轻量级的 CSS 框架，用于实现可定制的工具提示（tooltip）和文本覆盖层。它是一个纯 CSS 库，无需 JavaScript 运行时即可创建信息丰富的弹出元素。 该框架使用 CSS 变量来支持颜色、字体和动画的自定义。工具提示可以相对于触发元素在特定方向上定位，并支持嵌入富文本内容，如 HTML 特殊字符和图标字体。 可见性主要通过悬停触发器管理，但系统也支持通过切换特定的 HTML 属性来实现程序化控制。渲染引擎利用绝对定位和伪元素，根据用户交互或定义的各种状态来显示内容。

该项目是实现 CSS 布局、排版和视觉效果的参考指南和可复用模式集合。它作为一个样式片段库和实现指南，用于构建网页并创建常见的用户界面模式。 该仓库为视觉效果和 UI 组件模式提供了专门的展示库。这些包括创建玻璃拟态、复杂几何形状以及交互式元素（如手风琴、工具提示和动画标签指示器）的技术。 该项目涵盖了广泛的前端能力，包括响应式设计、灵活的网格布局系统以及排版优化。它还包括用于构建交互式运动效果、颜色混合和图像过滤的资源，以解决常见的渲染问题并增强界面美观度。

hugo-book 是一个专为 Hugo 设计的文档主题和静态网站框架，旨在创建结构化的技术手册、文档书籍和多语言知识库。它将目录结构转换为分层导航菜单和格式化的技术内容。 该框架包含一个专业的 OpenAPI 文档渲染器，可将规范转换为结构化的参考页面。它还提供了全文客户端搜索集成，并支持具有从右到左布局镜像的多语言内容。 该项目涵盖了广泛的内容渲染功能，包括数学公式排版、图表生成、终端录制集成，以及标签页和折叠块等交互元素。它还集成了按时间顺序排列的博客系统，以及用于生成目录和步骤列表的工具。 视觉定制通过颜色主题支持、CSS 样式覆盖和自定义 HTML 注入来处理。

instagram.css 是一个 CSS 图像滤镜库和纯 CSS UI 组件。它提供了一系列预定义的样式表，旨在为 Web 图像应用摄影滤镜和色彩分级。 该库无需使用 JavaScript 或外部图像处理库即可实现这些视觉效果。它使用 CSS 滤镜函数系统来编排亮度、对比度和饱和度，将特定的美学名称映射到硬编码的属性集。 该项目涵盖了客户端图像处理和前端 UI 自定义。它允许应用照片滤镜以创建图像库的一致外观，并提供在源样式表中自定义滤镜样式的能力。

devices.css 是一个纯 CSS 组件库，用于渲染响应式设备框架和硬件模型。它提供了一系列样式，无需使用外部图像或 JavaScript 即可创建智能手机、平板电脑和笔记本电脑的视觉表示。 该项目通过基于 CSS 的框架和模型系统实现硬件边框和边框的模拟。这些组件允许在各种屏幕尺寸和设备型号上可视化响应式设计和 UI 组件。 该库利用 CSS 自定义属性进行颜色和尺寸的主题化，使用相对单位和伪元素来渲染相机镜头和扬声器格栅等硬件细节。这些样式支持通过 CSS 类进行不同的硬件方向和型号切换。

Picnic 是一个轻量级 CSS 框架，旨在加速响应式 Web 界面的开发。它提供了一个基础样式库，将视觉设计直接应用于原生 HTML 元素，从而无需大量自定义类名即可创建简洁且易于访问的布局。 该框架通过完全通过 CSS 实现交互式 UI 组件（如模态框、选项卡和导航菜单）而脱颖而出。通过利用伪类和兄弟选择器，它无需外部 JavaScript 逻辑即可管理组件状态和交互性。这种方法确保了复杂的界面元素保持功能性和轻量级。 该库包括一套全面的结构和展示工具，包括基于 Flexbox 的网格系统、垂直元素堆叠以及自动调整到不同屏幕尺寸的响应式布局引擎。它还为数据展示（如表格和卡片）提供标准化样式，以及拖放文件上传区和上下文工具提示等专门的输入组件。

This project is a comprehensive frontend engineering study guide designed to cover the essential technical concepts of modern web development. It serves as a multi-disciplinary reference for mastering the browser execution engine, the JavaScript language, and the structural fundamentals of the web. The collection provides deep dives into JavaScript language internals, including execution contexts, closures, prototypes, and the event loop. It further details web browser internals, focusing on the critical rendering path, DOM construction, and engine mechanics. The guide also covers web securi