bevel.css
A simple stylesheet that decorates your apps with a hint of nostalgia: Bootstrap 2.0’s glossy buttons, dark top bar and sunken fields, on CSS that will still work in ten years.
Who it’s for
Small server-rendered apps with little or no JavaScript: a dashboard, a tracker, a tool for one. Each app keeps its own copy and upgrades when it likes.
Not for old browsers, or for sites that want all of Bootstrap: there are no jQuery plugins, no 12-column grid and no Sass.
Why bevel
Light from above. Glossy buttons, sunken fields and embossed text, at 2.0’s measurements.
Built to last. One plain file and no build step, using only CSS every major browser has had for 30 months.
Nothing else to load. Under 20 KB gzipped, with no web fonts, images or JavaScript.
Your CSS wins. It all sits in @layer bevel.*, so your unlayered CSS overrides it.
Today’s contrast. WCAG 2.2 AA, with a focus ring on everything and states styled from ARIA.
Get started
Copy bevel-0.2.0.css into your app’s static folder and link it before your own stylesheet:
<link rel="stylesheet"
href="/static/bevel-0.2.0.css">
<link rel="stylesheet"
href="/static/app.css">Override any --bv- token in your own :root. Before 1.0, breaking changes are flagged in the changelog.