FAQ — Search Help Center | CSS Vars Framework

What browsers does CSS Vars Framework support?

The framework relies on modern CSS features — clamp(), color-mix(), @layer, and the :checked toggle pattern — so it targets current evergreen browsers. Older browsers without support for these features will see a simplified, unstyled layout rather than a broken one.

How is CSS Vars Framework different from Bootstrap or Tailwind?

There's no build step and no configuration file — everything is controlled through CSS custom properties in :root. It's a fluid, viewport-responsive alternative best suited for static and server-rendered sites, marketing pages, and small teams who want to iterate quickly without a compiler.

Can I mix utility classes with my own custom CSS?

Yes. Utility classes live in their own @layer, declared after layout and component layers, so your own stylesheet can safely override framework defaults when needed.

Why isn't the gap utility working on my grid row?

The .row/.col-* flex grid uses flex-shrink: 0 by default. Add the opt-in .col-gap class to the row, which sets flex-shrink: 1 and min-width: 0 together on the children — both are required, and either alone will fail silently.

How do I build accessible toggles and menus?

Interactive patterns use native form controls (checkboxes and radios) paired with <label> elements, which keeps them keyboard- and screen-reader-friendly out of the box. Accessibility improvements remain an active area of ongoing work.

Where do I report drift between the docs and the stylesheet?

Open an issue on GitHub. Documentation and block-library drift is tracked and audited regularly against the current cssvars.css source.