drop-in-css 0.1.3 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +62 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
# drop-in
|
|
2
|
+
|
|
3
|
+
[](https://github.com/luanpotter/drop-in/actions/workflows/ci.yaml)
|
|
4
|
+
[](https://www.npmjs.com/package/drop-in-css)
|
|
5
|
+
[](https://luan.xyz/projects/drop-in)
|
|
6
|
+
[](./LICENSE)
|
|
7
|
+
|
|
8
|
+
The simplest "drop-in" replacement for the browser's default styling.
|
|
9
|
+
|
|
10
|
+
Just **drop-in** to your app and _don't think about CSS again_.
|
|
11
|
+
|
|
12
|
+
<img src="./assets/screenshot.png" alt="drop-in logo" width="720" />
|
|
13
|
+
|
|
14
|
+
## Installation
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
bun add drop-in-css
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
And then import with your bundler:
|
|
21
|
+
|
|
22
|
+
```ts
|
|
23
|
+
import "drop-in-css";
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
Or link it directly:
|
|
27
|
+
|
|
28
|
+
```html
|
|
29
|
+
<link rel="stylesheet" href="https://luan.xyz/projects/drop-in/drop-in.css" />
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Features
|
|
33
|
+
|
|
34
|
+
- minimize ad-hoc CSS - things should look good with just HTML
|
|
35
|
+
- dark theme out-of-the-box; light theme out of the box
|
|
36
|
+
- basic layouts for single column content with menus and content boxes
|
|
37
|
+
- simplified color schema and nice monospace [Writer](https://github.com/tonsky/font-writer) font by [@tonsky](https://github.com/tonsky)
|
|
38
|
+
- basic styling for links, lists, form elements, buttons
|
|
39
|
+
- add your own specific styles on top as needed
|
|
40
|
+
|
|
41
|
+
## Standard Classes
|
|
42
|
+
|
|
43
|
+
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:
|
|
44
|
+
|
|
45
|
+
- `.accent` - for buttons and inline code for that extra highlight
|
|
46
|
+
- `.danger` - for buttons (for destructive actions)
|
|
47
|
+
- `.error` - for fieldsets and spans in certain contexts (such as inside labels or legends)
|
|
48
|
+
|
|
49
|
+
## Variables
|
|
50
|
+
|
|
51
|
+
Customize the theme by overriding these variables:
|
|
52
|
+
|
|
53
|
+
```css
|
|
54
|
+
:root {
|
|
55
|
+
--bg: #3c3c3c;
|
|
56
|
+
--text: #ccc;
|
|
57
|
+
--accent: #e07020;
|
|
58
|
+
--danger: #c04040;
|
|
59
|
+
--border: #666;
|
|
60
|
+
--font: "Writer", monospace;
|
|
61
|
+
}
|
|
62
|
+
```
|