26 Repos
Foundational style definitions that establish the default visual baseline for an application's user interface.
Explore 26 awesome GitHub repositories matching user interface & experience · CSS Base Styles. Refine with filters or upvote what's useful.
Bootstrap is a comprehensive, mobile-first CSS framework designed for building responsive web interfaces. It provides a standardized library of reusable UI components, such as navigation bars, modals, and forms, alongside a robust grid system that ensures consistent layout alignment across diverse viewport sizes. By establishing a baseline through browser normalization and standardized typography, the project enables developers to create accessible, cross-browser compatible web applications. The framework distinguishes itself through a modular Sass-based architecture that allows for deep cust
Sets global box-sizing to border-box to ensure consistent element dimension calculations across all components.
Utility-first CSS framework for fast, design-system-friendly styling.
Normalize cross-browser inconsistencies and manage default element resets to establish a predictable foundation for custom design systems.
This project is a curated knowledge base and technical reference for professional web styling. It serves as a comprehensive guide to modern CSS best practices, focusing on techniques that leverage native browser capabilities to create efficient, maintainable, and scalable stylesheets. The collection emphasizes the use of declarative style logic and modern layout engines to replace brittle, imperative approaches. By prioritizing native pseudo-class state management, logical property mapping, and relative unit scaling, the guide demonstrates how to build responsive interfaces that remain consis
Configures global box-sizing and resets browser-specific margins to ensure consistent element sizing.
UnoCSS is an atomic CSS engine and utility-first framework that generates styles on-demand based on the specific classes used in your source code. By scanning your project files during the build process, it produces only the CSS necessary for your application, effectively minimizing bundle size and eliminating unused styles. The engine distinguishes itself through a highly modular, configuration-driven architecture that allows for deep customization of design tokens, rules, and presets. It supports advanced styling patterns such as attribute-based styling, tag-based styling, and dynamic varia
Applies hover styles conditionally based on device capabilities to prevent persistent hover states on touch screens.
Yoga is a cross-platform layout engine and embeddable core that determines the dimensions and offsets of hierarchical element trees. It provides a C++ implementation of the Flexbox layout model to calculate element positions and sizes based on web standards, ensuring a uniform appearance across diverse devices and operating systems. The engine is designed for portability via a C API, allowing the layout logic to be integrated into various host languages and platforms. It utilizes an incremental layout system that identifies modified subtrees and recalculates positions only for changed nodes a
Manages how element dimensions are calculated relative to padding and borders to ensure uniform spacing.
This project is a visual layout and styling package for the Hexo static site generator. It provides a static site template that converts Markdown files into a styled website, featuring a responsive interface with built-in support for internationalization and localized content display. The theme includes a specialized presentation layer for source code with syntax highlighting and customizable color schemes. It further enables the creation of professional portfolios by integrating social profile linking and external commenting platforms. The system organizes content through a taxonomy-based o
Provides multiple visual schemes that users can apply to change the entire aesthetic of their static site.
A minimalist CSS framework.
Applies a minimal set of clean, responsive base styles so a page looks good without any custom CSS.
NexT is a responsive, elegant static blog theme for Hexo that generates HTML pages from Markdown posts. It is designed as a pre-built visual design for the Hexo framework, producing mobile-friendly layouts that adapt across devices with support for dark mode and multiple visual schemes. The theme distinguishes itself through extensive customization options, including five built-in code highlighting themes for technical blog posts and a multilingual interface supporting over 15 languages. It offers configuration flexibility by allowing theme settings to be stored either in the main Hexo config
Offers multiple pre-built visual schemes switchable via configuration settings.
Radium is a CSS-in-JS styling library that transforms static inline styles into dynamic, responsive, and animated CSS for React components. It functions as a component style toolchain and React inline style enhancer, allowing developers to define styles using plain JavaScript objects while gaining capabilities like browser state handling, vendor prefixing, and style composition. The library extends React's inline style system by automatically resolving browser state styles for hover, focus, and active interactions without manual event handlers. It supports inline media queries that evaluate a
Processes style objects through a plugin-based pipeline for prefixing, media queries, and keyframe generation.
modern-normalize is a CSS reset stylesheet and browser style normalizer. It provides a minimal set of global style overrides designed to remove inconsistent default user-agent styles and prevent browser-specific rendering quirks. The project establishes a predictable frontend layout baseline by standardizing typography and layout properties. It specifically enforces a consistent layout model by applying border-box sizing across all HTML elements. The stylesheet uses tag-based global targeting to apply normalization rules directly to HTML elements, removing the need for specific class names.
Enforces a consistent layout model by setting the box-sizing property to border-box globally.
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
Switch between content-box and border-box to control whether padding and border are included in an element's total width and height.
Tailwind CSS Typography is a plugin for the Tailwind CSS framework that provides hand-tuned typographic defaults for blocks of vanilla HTML content, such as content from Markdown or a CMS. It applies beautiful prose styles to HTML content using a single class, eliminating the need for custom CSS to style rich text. The plugin distinguishes itself by offering deep customization and control over typography. Users can adjust the overall font size of prose content across five predefined sizes, select from five built-in gray-scale palettes to match a project's color scheme, and seamlessly adapt ty
Adds global base styles like typography defaults and font-face rules to the CSS output.
carbon-now-cli ist ein Kommandozeilentool, das Quellcode in hochwertige Bilder rendert. Es dient als terminalbasierter Renderer und Bild-Exporter, der rohe Textdateien oder Eingabeströme in stilisierte visuelle Assets umwandelt. Das Tool konzentriert sich auf präzise Inhaltskontrolle und ermöglicht es Benutzern, exakte Zeilenbereiche für gezielte Code-Extraktion anzugeben. Es unterstützt Multi-Format-Exportoptionen, wodurch Bilder als Dateien gespeichert oder direkt in die Systemzwischenablage gesendet werden können. Die visuelle Anpassung wird über ein System von Styling-Presets verwaltet. Benutzer können benutzerdefinierte Farben, Schriftarten und Auflösungen über lokale Konfigurationsdateien definieren und speichern, um konsistente visuelle Stile über verschiedene Projekte hinweg beizubehalten.
Implements a system to map JSON configuration presets to CSS properties for consistent visual output.
Basscss is a lightweight CSS utility toolkit built on an atomic, single-purpose class architecture. Each class performs exactly one visual function, enabling immutable, side-effect-free styling where no class ever overrides or conflicts with another. The system provides a predefined spacing scale, responsive breakpoint prefixes for conditional styling across device widths, and accessible visibility control that keeps content programmatically available to assistive technologies. The framework distinguishes itself through a float-based grid system that constructs layouts using floated percentag
Provides utility classes for applying border-box sizing to individual elements.
Theme-ui ist ein React-Theme-Framework und CSS-in-JS-Utility für den Aufbau themenfähiger Benutzeroberflächen. Es fungiert als Design-System-Tool, das zentralisierte, einschränkungsbasierte Skalen für Farben, Typografie und Abstände festlegt, um visuelle Konsistenz über Anwendungen hinweg zu gewährleisten. Das Framework zeichnet sich durch eine Array-basierte responsive Kurzschreibweise für Mobile-First-Layouts und einen dedizierten Color-Mode-Manager aus, der mit Browsereinstellungen synchronisiert wird und Benutzerauswahlen beibehält. Es bietet zudem ein System zur Erstellung benannter Style-Varianten, um das Komponenten-Erscheinungsbild über Eigenschaften zu steuern, und bietet Synchronisationsfunktionen, um Theme-Konfigurationen in Figma-Styles zu übersetzen. Das Projekt deckt eine breite Palette an Styling-Funktionen ab, einschließlich globaler CSS-Injektion für Element-Resets, verschachtelter Theme-Overrides via Context und ein Deep-Merge-Konfigurationssystem zur Erweiterung von Design-Presets. Es enthält zudem eine Reihe themenfähiger Layout-Komponenten, wie responsive Grids und standardisierte Formulareingaben. Ein dediziertes Plugin ist für die Integration des Design-Systems in Gatsby-Sites verfügbar.
Establishes foundational CSS base styles and resets to ensure a consistent visual baseline.
sanitize.css is a CSS normalizer and reset library that provides a standardized baseline for typography, form controls, and element layouts. It removes browser default inconsistencies to establish a predictable foundation for web design and modern applications. The project implements a modern CSS baseline focusing on system interface fonts and consistent rendering across different web browsers and operating systems. It integrates a system-font stack to ensure consistent typography and fast rendering on various platforms. The stylesheet covers core layout and accessibility capabilities, inclu
Standardizes the box-sizing property globally to ensure predictable element dimension calculations.
sanitize.css is a CSS reset library and normalizer that provides a baseline stylesheet for web projects. It establishes a uniform visual starting point by removing inconsistent browser-specific default styles and implementing a global CSS reset. The project focuses on cross-browser style normalization, ensuring that typography, form controls, and HTML elements render consistently across different browsers and devices. It implements a system-font stack to eliminate rendering discrepancies and applies box-sizing normalization to ensure a predictable layout model. The library also includes acce
Implements global box-sizing settings to ensure a predictable layout model across all elements.
Blueprint-css is a CSS framework that provides a set of predefined styles and a responsive grid system for building consistent web page layouts and typography. It includes a browser style reset to remove default browser styling, ensuring a uniform visual starting point across different environments. The framework features a column-based responsive grid system that automatically adapts web content across various screen sizes and devices. It also includes a dedicated print stylesheet to optimize the appearance of web content specifically for physical printing. The project covers typography sta
Provides foundational style definitions that establish the default visual baseline for the user interface.
Fuelux ist ein JavaScript-UI-Framework und eine Frontend-Komponentenbibliothek für konsistente, einheitliche Benutzeroberflächen. Es bietet eine Sammlung leichtgewichtiger Controls und CSS-Erweiterungen, um visuelle und funktionale Konsistenz über verschiedene Web-Views hinweg zu gewährleisten. Das Projekt verwendet eine modulare Frontend-Architektur, die Funktionalität in unabhängige JavaScript-Control-Module organisiert. Dieses Design hält das Framework leichtgewichtig und erweiterbar, während es das funktionale Verhalten von visuellen CSS-Definitionen entkoppelt. Das Framework steuert die Interface-Entwicklung durch komponentenbasiertes State-Management und zustandsgesteuertes Rendering, wobei das Document Object Model direkt aktualisiert wird. Es nutzt ein System von Style-Erweiterungen, um standardisierte Themes und visuelle Präsentationen innerhalb der Anwendung bereitzustellen.
Establishes a foundational visual baseline using a shared set of CSS style extensions.
Buttons is a CSS button framework and UI component library providing a set of reusable visual elements for mobile and desktop web environments. It functions as a CSS utility system and variable-driven theming engine that enables the creation of consistent buttons using configurable typography and shapes. The system utilizes a modular CSS architecture where independent style and color classes are composed on single elements to produce varied visual effects, such as 3D or flat designs. It employs a declarative design framework that maps configuration options to real-time visual attributes via c
Centralizes visual properties in configuration files to drive the generation of consistent UI elements.