drop-in

The simplest "drop-in" replacement for the browser's default styling.

Just drop-in to your app and don't think about CSS again.

Installation

bun add drop-in-css

And then import with your bundler:

import "drop-in-css";

Or link it directly:

<link rel="stylesheet" href="https://luan.xyz/projects/drop-in/drop-in.css" />

Features

• minimize ad-hoc CSS - things should look good with just HTML
• dark theme out-of-the-box; light theme out of the box
• basic layouts for single column content with menus and content boxes
• simplified color schema and nice monospace Writer font by @tonsky
• basic styling for links, lists, form elements, buttons
• add your own specific styles on top as needed

Standard Classes

While the main objective is to have as minimal as possible ad-hoc CSS or custom classes, there are a few standard classes you can use to modify certain elements:

• .accent - for buttons and inline code for that extra highlight
• .danger - for buttons (for destructive actions)
• .error - for fieldsets and spans in certain contexts (such as inside labels or legends)
• .disabled - for buttons and menu items

Variables

Customize the theme by overriding these variables:

:root {
  --bg: #3c3c3c;
  --text: #ccc;
  --accent: #e07020;
  --danger: #c04040;
  --border: #666;
  --font: "Writer", monospace;
}