BrowserUX.css
browserux.css
browserux.css is a minimal CSS base focused on user experience and accessibility. Designed to enhance native HTML and CSS behaviors, it provides a clean, modern baseline that improves usability across all devices, without utility classes, heavy frameworks, or JavaScript.
npm install browserux.css
browserux.css
/* Reset: consistent box model */
*,
::before,
::after {
box-sizing: inherit;
}
html { box-sizing: border-box; }
/* UX: Smooth scrolling unless the user refuses it */
@media (prefers-reduced-motion: no-preference) {
:root { scroll-behavior: smooth; }
}
/* A11y: keyboard focus visible */
:where(a, button, input, select, textarea, summary, [contenteditable], [tabindex]):focus-visible {
outline: var(--bux-focus-width) solid var(--bux-focus-color);
outline-offset: var(--bux-focus-offset);
}
// browserux.css is built around four fundamental axes, present in every CSS rule.
Removes unwanted default margins, paddings, and browser styles, while preserving useful semantic behaviors.
Harmonizes HTML element rendering across browsers to ensure consistent behavior regardless of the environment.
Optimizes UX interaction flow and reduces friction across all types of devices.
Ensures the site remains usable for all users, including those using assistive technologies.
// browserux.css is organized into four logical sections.
Using CSS variables allows for easy theme customization.
Handles user-specific preferences detected via media queries.
Applies visual customization to native browser elements.
A balanced integration of the four core principles, organized in a logical structure.
browserux.lab.css is a documented watchlist of emerging CSS features that may fit the browserux.css philosophy later. A working document, not a shipping stylesheet.