awesome-repositories.com
Blog
MCP
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectMCP serverAboutHow we rankPress
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
marcj avatar

marcj/css-element-queries

0
View on GitHub↗
4,243 stars·478 forks·JavaScript·MIT·15 viewsmarcj.github.io/css-element-queries↗

Css Element Queries

This project is a responsive CSS library and element dimension monitor. It provides a polyfill for CSS container queries, enabling styles to be applied based on an element's specific dimensions in environments where native browser support is unavailable.

The library monitors the width and height of target DOM elements in real time, triggering custom callbacks whenever dimensions change. It adapts UI components by executing layout adjustments and style changes based on predefined size thresholds rather than the overall browser window size.

The tool manages these adaptations through several mechanisms, including the injection of dynamic CSS variables, threshold-based class toggling, and the use of the ResizeObserver API to synchronize element dimensions with style sheets.

Features

  • Container Queries - Implements size-based styling logic for elements, providing a polyfill for CSS container queries.
  • Dynamic Component Layouts - Automatically adjusts the appearance of UI components as their containing space expands or shrinks.
  • Element Resize Callbacks - Executes custom callback functions immediately whenever the dimensions of a target element change.
  • ResizeObserver Integrations - Uses the ResizeObserver API to watch for changes in element dimensions and trigger style updates.
  • Container Query Polyfills - Provides a polyfill for applying styles based on element dimensions in browsers lacking native container query support.
  • Container-Relative Styling - Applies different CSS rules based on the size of a specific element rather than the browser window.
  • CSS Custom Property Injections - Calculates element sizes and injects them as CSS custom properties for use in style sheets.
  • Element Dimension Tracking - Monitors the width and height of specific HTML elements and triggers updates when they change.
  • Geometric State Mappings - Binds specific CSS rules to the real-time geometric state of target DOM elements.
  • Threshold-Based Styling - Allows CSS rules to change automatically when an element reaches defined width or height thresholds.
  • State-Driven Callbacks - Executes user-defined JavaScript functions when element dimensions cross specific size thresholds.
  • Responsive Layout Adapters - Ships a set of styles and logic for fluid layouts that adapt to parent container sizes.
  • CSS Class-Based Styling - Toggles specific CSS classes when an element crosses predefined width or height boundaries.

Star history

Star history chart for marcj/css-element-queriesStar history chart for marcj/css-element-queries

How this analysis was created: This summary and feature list are AI-generated from collected project material and can contain mistakes. Stars, license and language are imported from GitHub. Inclusion does not mean that we have tested or audited this project. Check the source documentation for any feature you depend on. Learn more on our About page.

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI

Projects sharing features with Css Element Queries

These projects share indexed features with Css Element Queries. Shared tags can include platform or build tooling; verify the primary use case before treating a result as a replacement.
  • angular-slider/angularjs-sliderangular-slider avatar

    angular-slider/angularjs-slider

    1,220View on GitHub↗

    The angularjs-slider repository provides a lightweight slider directive built specifically for the AngularJS framework. It offers single-handle and dual-handle numeric selection components with no external dependencies, allowing users to pick values or ranges by dragging interactive handles along a track. The component supports extensive customization options, including minimum and maximum boundaries, forbidden zones, step increments, decimal precision, and custom markup templates. Developers can configure these parameters through instance-level attributes or via a centralized service provide

    JavaScriptangularjavascriptrange-slider
    View on GitHub↗1,220
  • jackmoore/autosizejackmoore avatar

    jackmoore/autosize

    5,092View on GitHub↗

    autosize is a client-side JavaScript utility that automatically adjusts the height of HTML textarea elements to fit their text content. It functions as a DOM layout tool designed to manage the dimensions and scrolling behavior of input fields in real time. The utility handles dynamic resizing during user typing and window resize events. It supports height constraints by comparing calculated dimensions against CSS minimum and maximum properties to restore overflow scrolling when limits are reached. The tool provides capabilities to monitor resize events, manually trigger layout refreshes for

    JavaScript
    View on GitHub↗5,092
  • sbstjn/timesheet.jssbstjn avatar

    sbstjn/timesheet.js

    6,979View on GitHub↗

    timesheet.js is a JavaScript library for rendering time-series data and event lists as responsive HTML and CSS timelines. It serves as a date-based event renderer that converts lists of dated activities into visual chronologies, supporting the creation of web-based timesheets and activity logs. The library provides components for generating visual timelines, time-tracking tables, and project scheduling displays. It transforms raw event data—including start dates, end dates, descriptions, and categories—into structured HTML interfaces that adapt to different screen sizes.

    JavaScript
    View on GitHub↗6,979
  • ripple-ts/rippleRipple-TS avatar

    Ripple-TS/ripple

    7,379View on GitHub↗

    Ripple is a full-stack TypeScript web framework and reactive UI library used for building interfaces with server-side rendering. It organizes user interfaces into a hierarchy of reusable, scoped components with built-in state management and client-side hydration. The framework is distinguished by its fine-grained reactivity, which updates specific DOM elements without requiring full component re-renders. It integrates server-side logic and client-side components within a single TypeScript codebase, enabling a unified full-stack development workflow. The system covers a broad range of capabil

    JavaScript
    View on GitHub↗7,379
Compare all 30 related projects→

Frequently asked questions

What does marcj/css-element-queries do?

This project is a responsive CSS library and element dimension monitor. It provides a polyfill for CSS container queries, enabling styles to be applied based on an element's specific dimensions in environments where native browser support is unavailable.

What are the main features of marcj/css-element-queries?

The main features of marcj/css-element-queries are: Container Queries, Dynamic Component Layouts, Element Resize Callbacks, ResizeObserver Integrations, Container Query Polyfills, Container-Relative Styling, CSS Custom Property Injections, Element Dimension Tracking.

Which projects share features with marcj/css-element-queries?

Projects with overlapping indexed features include: angular-slider/angularjs-slider — The angularjs-slider repository provides a lightweight slider directive built specifically for the AngularJS… jackmoore/autosize — autosize is a client-side JavaScript utility that automatically adjusts the height of HTML textarea elements to fit… sbstjn/timesheet.js — timesheet.js is a JavaScript library for rendering time-series data and event lists as responsive HTML and CSS… ripple-ts/ripple — Ripple is a full-stack TypeScript web framework and reactive UI library used for building interfaces with server-side… jekip/naive-ui-admin — Naive UI Admin is a Vue 3 admin dashboard framework built with TypeScript, Vite, and the Naive UI component library.… cewendel/swtableviewcell — SWTableViewCell is a UIKit component and library for adding interactive swipe-to-reveal action buttons to table view…