Skip to content

Latest commit

 

History

History
96 lines (63 loc) · 2.43 KB

File metadata and controls

96 lines (63 loc) · 2.43 KB

Getting started

browserux.css integrates in a single line into any workflow. Choose the method that fits your project.


Via CDN

The fastest way. Add the link in the <head> of your HTML, before your own stylesheets:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/browserux.css@5.0.0/browserux.css">
<link rel="stylesheet" href="/assets/css/styles.css">

Recommended for prototypes, demos, or learning.

The CDN example is intentionally version-pinned. When upgrading, replace 5.0.0 with the version you want to load.


Via npm

For projects with a build tool (Vite, Webpack, Parcel…):

npm install browserux.css

JavaScript import

import 'browserux.css/browserux.css';

The root entry remains the default and backwards-compatible path.

Modular public bundles

For advanced integrations, browserux.css also exposes public bundles with stable import paths:

import 'browserux.css/core.css';
import 'browserux.css/a11y.css';
import 'browserux.css/browser-ui.css';
Bundle Includes Use when
browserux.css Full base You want the complete default experience
core.css Tokens + default styles You want the safest baseline
a11y.css Tokens + user preferences + default styles You want system preferences without the full browser UI layer
browser-ui.css Tokens + browser UI layer You want the opinionated browser UI layer on top of your own base

Direct link from node_modules/

<link rel="stylesheet" href="./node_modules/browserux.css/browserux.css">

Local install

Download the browserux.css file and place it in your project:

<link rel="stylesheet" href="/assets/css/browserux.css">
<link rel="stylesheet" href="/assets/css/styles.css">

Summary

Method Recommended for
CDN Prototypes, learning, simple static sites
npm Projects with a bundler (Vite, Webpack, Parcel…)
Local Full control, source file customization

For a deeper breakdown of the modular architecture, see Modular Bundles.


Load order

browserux.css must always be loaded first, before your own styles. It lays the base. Your rules come on top and override or complement as needed.

<!-- 1. Base -->
<link rel="stylesheet" href="browserux.css">

<!-- 2. Your styles -->
<link rel="stylesheet" href="styles.css">