55 Repos
Maps visual style rules to element classes for consistent design application.
Distinguishing note: Focuses on selector-based styling logic rather than general CSS frameworks.
Explore 55 awesome GitHub repositories matching user interface & experience · CSS Selectors. Refine with filters or upvote what's useful.
GrapesJS is a modular, web-based visual editor framework designed for building drag-and-drop page builders and custom content management interfaces. It functions as a structural engine that manages hierarchical document models, allowing developers to create reusable design blocks and complex page compositions. By providing a schema-driven approach to UI configuration, the framework enables the construction of design environments where users can assemble layouts and manage component properties visually without writing raw code. The project distinguishes itself through a highly extensible, plug
Maps specific style rules to element classes to enable efficient reuse and consistent design.
Less.js is a CSS preprocessor and compilation engine that transforms a dynamic stylesheet language into standard CSS for web browser rendering. It functions as a tool to compile extended styling syntax, providing variables, mixins, and functions to create maintainable stylesheets. The project includes a source map generator that creates mapping files to link compiled CSS output back to the original source code for debugging. It allows for the integration of custom plugins and functions to automate the generation of final stylesheets within a build process. The engine supports the compilation
Enables flexible styling rules through selector interpolation and case-insensitive attribute selectors.
Short CSS code snippets for all your development needs
Relies on CSS pseudo-classes to drive all interactive visual effects without JavaScript.
Sass is a stylesheet compilation engine and CSS preprocessor that extends standard CSS with variables, nested rules, mixins, and functions. It functions as a comprehensive design system tool, enabling developers to organize complex stylesheets into modular, reusable components while automating the transformation of advanced syntax into browser-compatible CSS. The project distinguishes itself through its sophisticated build automation and language-level extensibility. It provides robust support for programmatic style generation, including conditional logic, iterative loops, and unit-aware math
Combines multiple selectors hierarchically to generate nested CSS rules.
This project is a comprehensive collection of web development reference guides and technical cheat sheets. It provides a curated set of markdown-based documentation designed to help developers quickly locate syntax patterns and API examples for common web technologies and programming languages. The repository serves as a specialized reference library covering several distinct technical domains. It includes extensive guides for CSS, focusing on selectors, Flexbox, Grid, and responsive layout properties, as well as a DevOps command reference for Docker, Kubernetes, AWS, Ansible, and general she
Provides a comprehensive list of CSS selectors and pseudo-classes for targeting HTML elements.
Playwright for Python is a browser automation framework designed for end-to-end testing, web scraping, and user interaction simulation. It functions as a headless browser controller that enables programmatic navigation, data extraction, and the execution of complex workflows across multiple rendering engines. The framework distinguishes itself through an actionability-aware interaction engine that automatically verifies element readiness before performing actions, significantly reducing test flakiness. It utilizes isolated browser contexts to maintain separate storage and cookies for parallel
Finds elements using CSS or XPath expressions when semantic properties are unavailable.
Stylelint ist ein Tool zur statischen Codeanalyse und ein Linter für CSS und stilähnliche Sprachen. Es identifiziert Fehler, erzwingt Codierungskonventionen und fungiert als PostCSS-Plugin, um Stylesheets während Build-Pipelines zu validieren. Das Projekt zeichnet sich durch die Unterstützung nicht standardmäßiger Syntaxen aus, einschließlich Preprocessor-Parsing für SCSS und Less, sowie die Fähigkeit, eingebettete Stile aus JavaScript, HTML und Template-Literalen zu extrahieren und zu linten. Es verfügt über ein automatisiertes Korrektursystem, das reparierbare Stilverstöße programmatisch korrigiert, um Konsistenz sicherzustellen. Das System bietet eine Plugin-Architektur zur Erstellung benutzerdefinierter Regeln, Syntaxen und Formatierer. Es deckt ein breites Spektrum an Qualitätssicherungsfähigkeiten ab, einschließlich der Vermeidung veralteter Syntax, der Validierung der Selektorspezifität und der Durchsetzung von Namensmustern und stilistischen Konventionen. Die Konfiguration wird über eine kaskadierende Zusammenführungslogik verwaltet, die gemeinsam nutzbare Presets und dateispezifische Überschreibungen unterstützt. Das Tool ist über eine Befehlszeilenschnittstelle, eine programmatische API und verschiedene Editor-Integrationen zugänglich.
Ensures selectors adhere to maximum specificity thresholds to maintain a manageable CSS architecture.
Stylus is a CSS preprocessor that transforms a dynamic language into standard CSS. It utilizes a compilation workflow to enable the use of variables, nesting, and arithmetic, which are then rendered into stylesheets for use in frontend asset pipelines. The project is distinguished by a flexible syntax that allows for indentation-based styling, meaning curly braces, colons, and semicolons can be omitted. It further differentiates itself through a JavaScript-driven plugin pipeline and the ability to extend the native syntax with custom JavaScript functions for complex logic. Its capability sur
Implements hierarchical selector nesting to generate nested CSS rules and resolve parent references.
Jsoup is a Java library designed for parsing, extracting, and manipulating HTML and XML content. It provides a document object model that represents web content as a hierarchical tree, allowing for programmatic navigation and modification of elements, attributes, and text. The library functions as a toolkit for web scraping, enabling the retrieval of remote content via standard web protocols and the management of HTTP sessions for automated form interaction. The library distinguishes itself through its fault-tolerant tokenization, which reconstructs valid document structures from malformed or
Uses CSS-style selector syntax to efficiently locate and traverse specific nodes within a document tree.
Spider-flow is a Java-based web crawling and data extraction platform that provides a centralized environment for managing automated information gathering. It functions as a no-code tool, allowing users to define complex data collection pipelines through a visual, drag-and-drop interface rather than manual programming. The platform distinguishes itself through a graph-based workflow orchestration system where users link discrete nodes to define navigation and parsing logic. It supports dynamic content crawling by integrating headless browsers to execute JavaScript and render page content that
Enables targeting DOM elements using CSS or XPath selectors for automated data extraction.
This project is a software engineering reference that provides a cross-language formatting standard and industry-standard practices for architectural patterns, memory management, and identifier naming. Its primary purpose is to implement a unified set of indentation and whitespace rules applied consistently across multiple distinct programming environments. The project specializes in technical documentation localization, providing Chinese language translations of official programming style guides. It maps original English coding standards to Chinese language references to maintain meaning acr
Limits the use of ID selectors in stylesheets to keep specificity low and simplify overrides.
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
Implements UI logic for tabs and input states using pure CSS pseudo-classes.
This project provides an animated Live2D character widget that can be embedded on any web page as an interactive mascot. The widget renders characters using the Cubism SDK on an HTML canvas, and can be deployed either via a content delivery network for zero-setup integration or self-hosted on a personal server for full control over asset delivery. The mascot responds to visitor actions through CSS selector-based interaction binding, displaying custom speech bubbles when users hover over or click specific page elements. Visitors can click and drag the character to reposition it anywhere on the
Displays custom text when users hover over or click specific page elements defined by CSS selectors.
PurifyCSS is a CSS unused style remover and payload optimizer that analyzes HTML and templates to identify and delete unused CSS selectors from stylesheets. It functions as a frontend build automation tool that integrates into development pipelines to automatically strip redundant styles and minify assets during the compilation phase. The tool provides specific optimization for single page applications, identifying and removing redundant CSS while ensuring necessary styles are preserved across dynamic views and states. The utility covers a range of capabilities including static content analy
Analyzes stylesheets and content to delete selectors that do not match any existing elements.
Uncss is a build pipeline CSS optimizer and optimization tool designed to remove unused styles from stylesheets. It analyzes HTML files to identify and strip selectors that do not match any elements in the markup, reducing the final stylesheet size and overall web page weight. The tool functions as a DOM-based CSS analyzer that can simulate runtime document states. It provides mechanisms to preserve required selectors through the use of literal names, regular expressions, and specialized CSS comment markers to ensure styles triggered by user interactions are not deleted. The project supports
Prevents the removal of specific CSS rules using a list of selectors, regular expressions, or comments.
react-draggable is a UI interaction library that provides core primitives and components for adding tactile movement and coordinate-based positioning to web elements. It serves as a tool for making user interface elements movable via mouse or touch interactions within React applications. The library supports the implementation of custom drag handles, allowing the initiation of movement to be restricted to specific child elements identified by CSS selectors. It also provides programmatic drag state management, enabling developers to control element positioning or use callbacks for movement wit
Uses CSS selectors to validate if the clicked element should act as a drag handle.
Ariakit is a headless component library and accessible UI component toolkit. It provides a set of unstyled web components with built-in accessibility patterns to ensure that screen readers and keyboard navigation function correctly. The project includes an adaptive color engine that calculates high-contrast text and dynamic surface colors for light and dark modes. It also features a concentric layout engine for computing nested padding, margins, and border radii for circular interface elements, alongside a design token system for managing global CSS variables. The toolkit covers broad capabi
Adjusts color lightness and chroma based on interaction states like hover or focus using CSS variables.
Pup is a command line tool for extracting and filtering data from HTML documents using CSS selectors. It functions as a parser and selector engine that isolates specific elements based on tags, IDs, classes, and attributes. The project provides utilities for converting selected HTML nodes into plain text, attribute values, or structured JSON objects. It includes a markup formatter that corrects missing tags and applies consistent indentation to improve the readability of HTML documents. The tool handles the retrieval of text content and attributes through a CSS selector engine, supporting co
Implements a CSS selector engine to isolate specific HTML elements within a document.
Styled System is a JavaScript library that provides a style props approach for building UI components, enabling developers to map CSS properties directly to component props for rapid, declarative development. At its core, it resolves design tokens from a centralized theme object into CSS values, ensuring consistent styling across components without writing custom stylesheets. The library supports theme-aware styling that connects component styles to a theme object for scalable, maintainable design systems with dynamic value resolution. The library differentiates itself through several capabil
Maps CSS pseudo-classes like hover and focus directly to component props for interactive styling.
vanilla-lazyload is a JavaScript lazy loading library and viewport-based asset loader designed to improve page load speed by deferring the loading of images, videos, iframes, and backgrounds. It functions as an intersection observer media loader that triggers resource downloads and script execution only when elements enter the browser viewport. The project also serves as a native lazy loading polyfill, utilizing native browser loading attributes where supported and providing a JavaScript fallback for older environments. The library distinguishes itself through active bandwidth management, suc
Enables specifying custom CSS classes and data attributes to identify elements for lazy loading.