UX-First CSS Foundation for Modern Web – Browserux.css

Preview:

Description:

browserux.css is a minimal CSS library that enhances native HTML and CSS behaviors into a clean, modern baseline for improved usability and accessibility. Think of it as a thoughtful evolution of `normalize.css`, built with current UX and accessibility best practices in mind.

The main idea here is to address those initial browser inconsistencies and enhance the user experience from the ground up. It tackles things like default form styling, scrollbar appearance, text selection, and focus states, all while respecting user preferences like dark mode or reduced motion.

Features:

• CSS Reset: A targeted reset that handles margins, paddings, box-sizing, and sensible defaults for lists, buttons, and media.
• Cross-Browser Normalization: Standardizes typography, form elements, and media rendering for a more consistent look across modern browsers.
• Enhanced Usability: Implements smooth scrolling (respecting user preferences), optimizes mobile tap handling with touch-action: manipulation, and ensures scrollbars are always visible to prevent layout jank.
• Accessibility First: Natively supports prefers-color-scheme (dark mode), prefers-reduced-motion, and provides clear, keyboard-friendly :focus-visible states.
• Themeable via CSS Variables: Leverages CSS custom properties extensively, making it straightforward to customize colors, typography, scrollbar styles, and more.
• Styled Native Elements: Provides improved styling for text selection, scrollbars (WebKit & Firefox), form controls including validation states, and progress bars using native CSS.

How to use it:

1. Install browserux.css and import it into your project.

# NPM
$ npm install browserux.css

// In your main JS file (e.g., main.js or app.js)
import 'browserux.css/browserux.css';
/* Or in your main CSS file */
@import 'browserux.css/browserux.css';
<!-- Or in your HTML file -->
<link rel="stylesheet" href="/path/to/your/css/browserux.min.css">

2. You can easily create your own themes by overriding the default CSS variables.

:root {
  /* Global colors */
  --ui-page-bg: #eaeaea;
  --ui-page-color: #121212;
  --ui-color-primary: #f05e0e;
  --ui-color-secondary: #0e93f0;
  --ui-transparent: transparent;
  /* Form validation colors */
  --ui-valid-border-color: #29b94c;
  --ui-valid-bg-color: #f0fff5;
  --ui-invalid-border-color: #dc303e;
  --ui-invalid-bg-color: #fff0f0;
  --ui-placeholder-color: #aaa;
  --ui-invalid-placeholder-color: #dc303e;
  
  /* Progress bar colors */
  --ui-progress-bar-bg: #efefef;
  --ui-progress-value-bg: #29b94c;
  /* Text selection */
  --ui-selection-bg: var(--ui-page-color);
  --ui-selection-color: var(--ui-page-bg);
  --ui-selection-text-shadow: none;
  /* Scrollbar */
  --ui-scrollbar: var(--ui-page-bg);
  --ui-scrollbar-track: #ddecf6;
  --ui-scrollbar-thumb: var(--ui-color-secondary);
  --ui-scrollbar-thumb-hover: var(--ui-color-primary);
  --ui-scrollbar-vertical-width: 10px;
  --ui-scrollbar-horizontal-height: 10px;
  /* Typography */
  --ui-typo-font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --ui-typo-mono-font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
  --ui-typo-font-size: 1.6rem;
  --ui-typo-line-height: 1.6;
}

Comparison with Alternatives

normalize.css: normalize.css aims for consistent browser defaults while preserving useful ones. browserux.css builds on this philosophy by actively enhancing these defaults for better UX and accessibility. It’s more opinionated about scrollbars, focus states, and user preferences. If you want the absolute minimum intervention, normalize.css is a solid choice. If you appreciate a more polished starting point out-of-the-box, browserux.css is a step further.

Traditional reset.css : Resets are typically more aggressive, stripping nearly all default browser styling to provide a “blank slate.” This means you have to define everything from scratch. browserux.css is less destructive; it refines rather than obliterates. For projects where you want to leverage and improve upon sensible browser defaults, browserux.css is a better fit than a hard reset.

Tailwind CSS Preflight: Preflight, which is part of Tailwind CSS, is also built upon normalize.css and provides a set of base styles. However, Preflight is designed to work seamlessly within the Tailwind utility-first ecosystem. browserux.css is framework-agnostic, much lighter, and focuses purely on enhancing native browser elements without introducing a utility-class system or any opinions on how you should build components.

FAQs

Q: Is browserux.css a full UI framework like Bootstrap or Materialize?
A: No, not at all. browserux.css is a foundational CSS layer. It improves the default styling and behavior of native HTML elements. You’d typically use it as a starting point, before or alongside more comprehensive styling solutions or your custom CSS. It doesn’t provide pre-built components or utility classes.

Q: How does browserux.css handle dark mode if I have my own JavaScript-based theme switcher?
A: browserux.css uses the prefers-color-scheme: dark CSS media query to automatically adjust its internal CSS variables for a dark theme. If your JS theme switcher modifies these same CSS variables (e.g., --ui-page-bg, --ui-page-color) or your own set of theme variables that browserux.css might inherit from, they can work together. The key is that browserux.css respects the OS-level preference by default. You can always override its variables with higher specificity or directly via JS if your switcher manipulates styles that way.

Q: What if I disagree with some of its opinions, like the always-visible scrollbar?
A: Most visual aspects, like scrollbar width or colors, are controlled by CSS variables (e.g., --ui-scrollbar-vertical-width). You can override these in your own stylesheet. For behavioral styles like overflow-y: scroll; on the html element, you’d need a CSS rule with equal or higher specificity in your stylesheet, for example, html { overflow-y: auto; }. It’s generally quite straightforward to tweak.

Q: Will browserux.css conflict with my project’s existing CSS?
A: It’s designed as a base layer, so its selectors are mostly for raw HTML elements and have relatively low specificity. Conflicts are possible if your existing CSS also styles basic elements without classes or with similarly low specificity. Generally, your own class-based styles or more specific selectors should override browserux.css without issues. I’d recommend loading browserux.css before your custom stylesheets.

Q: Why does it set font-size: 62.5% on the html element?
A: This is a common technique. Assuming the browser’s default font size is 16px, setting font-size: 62.5% on html makes 1rem equal to 10px (16px * 0.625 = 10px). This can simplify converting px values to rem units in your head during development. The actual body font size is then set using var(--ui-typo-font-size), which defaults to 1.6rem (translating to 16px in this setup).

Changelog:

v2.0.0 (06/07/2025)

• To improve project scalability and avoid naming collisions with other libraries or design systems, all CSS variables previously prefixed with –ui- have been renamed to –bux-.

v1.0.2 (05/12/2025)

• Minor fixes and cleanup