lightweight, simple, classless CSS framework inspired by new.css
devcss.devins.page
framework
lightweight
css
classless
stylesheet
1# intergrav/dev.css
2
3[](https://www.npmjs.com/package/@intergrav/dev.css) [](https://cdn.jsdelivr.net/npm/@intergrav/dev.css/) [](https://github.com/intergrav/dev.css)
4
5Tiny, simple, classless CSS framework in the style of Vercel's [Geist](https://vercel.com/geist) design system. Inspired by [xz/new.css](https://github.com/xz/new.css).
6
7The minified stylesheet weighs only **~4.8kb** and can make any plain HTML file look clean and modern. It also has a light and dark theme.
8
9<details>
10<summary>Preview</summary>
11
12<img src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/desktop-light.png" alt="dev.css desktop demo, light mode">
13<img src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/desktop-dark.png" alt="dev.css desktop demo, dark mode">
14<img height="748px" src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/mobile-light.png" alt="dev.css mobile demo, dark mode">
15<img height="748px" src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/mobile-dark.png" alt="dev.css mobile demo, dark mode">
16
17</details>
18
19## Importing
20
21In your HTML's `<head>` all you have to write is this, and you're done! (`.min` means to minify the file)
22
23```html
24<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3">
25```
26
27I also recommend adding a font through [intergrav/fonts](https://github.com/intergrav/fonts). Geist or Inter work with dev.css out of the box. It will use the default system/browser san-serif fonts if those are not available.
28
29### Geist Font
30
31```html
32<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist.min.css">
33```
34
35Recommended, monospace variant:
36
37```html
38<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css">
39```
40
41### Inter Font
42
43```html
44<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/inter.min.css">
45```
46
47## Elements
48
49dev.css takes advantage of semantic HTML elements. Here are some guidelines on how these should be used for the best results.
50
51### Header
52
53Use the `<header>` tag to create a large header for your page. Only use this at the very top of your `<body>`, or else it may look wonky.
54
55For the title, the header should contain an `<h1>` tag. You can also add an `<h4>` tag before the `<h1>` tag if you want to show extra information.
56
57If you need a navigation bar, you can add a `<nav>` with `<a>` links inside it. dev.css will automatically add dividing bullet points between or before the `<a>` tags, depending on whether the user is in topbar or sidebar mode. In sidebar mode, the navigation bar will lay out into separate lines.
58
59Optionally, you could add a `<p>` tag after the `<h1>` tag if you want to give a description of the page the user is currently on.
60
61### Footer
62
63Optionally, use the `<footer>` tag to create a large footer for your page. Only use this at the bottom of your `<body>`, or else it may look wonky. You can add whatever content in here that you'd like.
64
65### Text
66
67Wrap all body text in `<p>` tags, unless it's the sole child of another element. If you want to write quotes, you can use the `<blockquote>` tag. To highlight text, wrap it in the `<mark>` tag. Want to show code? Use `<code>` for short inline code. Use `<pre>` for code blocks. Use `<kbd>` for keyboard input.
68
69### Button
70
71For a link button, you can wrap the button in an `<a>` tag. Here's a code example:
72
73```html
74<a href="https://example.com">
75 <button>Click me!</button>
76</a>
77```
78
79### Details
80
81The `<details>` element can make a toggle-able dropdown without using any JavaScript. Here's a code example:
82
83```html
84<details>
85 <summary>Click me!</summary>
86 <p>Lorem ipsum dolor sit amet.</p>
87</details>
88```
89
90### More
91
92To learn about other HTML elements and how to write HTML, visit [W3Schools/html](https://www.w3schools.com/html/).
93
94## Themes
95
96You can use custom colors and custom fonts in dev.css through themes. See the `/theme` folder to view some premade ones. You can also copy the `boilerplate.css` and make a theme yourself. Simply apply it after the dev.css stylesheet. For example, to apply the terminal theme, put this after your main stylesheet:
97
98```html
99<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/theme/terminal.min.css">
100```