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 inspired by Vercel's [Geist](https://vercel.com/geist) design system. It is designed to make any plain HTML file look clean and modern. The minified stylesheet weighs only **~4.8kb** and includes both light and dark themes.
6
7<details>
8<summary>Click to view preview</summary>
9<img src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/desktop-light.png" alt="dev.css desktop demo, light mode">
10<img src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/desktop-dark.png" alt="dev.css desktop demo, dark mode">
11<img height="748px" src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/mobile-light.png" alt="dev.css mobile demo, dark mode">
12<img height="748px" src="https://raw.githubusercontent.com/intergrav/branding/main/dev.css/preview/mobile-dark.png" alt="dev.css mobile demo, dark mode">
13</details>
14
15## Importing
16
17To use dev.css in your HTML, simply add the following line to the `<head>` section of your HTML file:
18
19```html
20<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3">
21```
22
23You can also add a font from [intergrav/fonts](https://github.com/intergrav/fonts#readme) to improve the experience, however it will increase the website download size. Geist and Inter fonts work with dev.css out of the box, other fonts will require a theme to be used. If these fonts are not available, the default system/browser sans-serif and monospace fonts will be used, such as Microsoft's Segoe UI or Apple's San Francisco.
24
25## Elements
26
27dev.css takes advantage of semantic HTML elements. Here are some guidelines on how to use them for the best results.
28
29### Header
30
31Use the `<header>` tag to create a large header for your page. Place it at the very top of your `<body>`. For the title, use an `<h1>` tag. You can also add an optional `<h4>` tag before the `<h1>` tag to provide extra information. If you need a navigation bar, add a `<nav>` element with a `<ul>` that contains `<li>` items with `<a>` links. dev.css will automatically lay out the navigation items horizontally, with dividing bullet points between them. If you are using the `header-sidebar.css` addon, the navigation items will be laid out vertically when in sidebar mode. Optionally, you can add a `<p>` tag after the `<h1>` tag to provide a description of the current page.
32
33### Footer
34
35Optionally, use the `<footer>` tag to create a footer for your page. Place it at the bottom of your `<body>`. You can add any content you like inside the footer.
36
37### Text
38
39Wrap all body text in `<p>` tags, unless it's the sole child of another element. Use the `<blockquote>` tag for quotes. To highlight text, wrap it in the `<mark>` tag. For code, use `<code>` for short inline code snippets and `<pre>` for code blocks. Use `<kbd>` for keyboard input.
40
41### Button
42
43To create a link button, wrap the button in an `<a>` tag. Here's an example:
44
45```html
46<a href="https://example.com">
47 <button>Click me!</button>
48</a>
49```
50
51### Details
52
53The `<details>` element can be used to create a toggle-able dropdown without using any JavaScript. Here's an example:
54
55```html
56<details>
57 <summary>Click me!</summary>
58 <p>Lorem ipsum dolor sit amet.</p>
59</details>
60```
61
62### More
63
64To learn about other HTML elements and how to write HTML, visit [W3Schools/html](https://www.w3schools.com/html/).
65
66## Addons
67
68dev.css provides a basic set of styles. Addons are small CSS snippets that can be used to adjust or add functionality to dev.css based on your needs. If you are adding an addon, make sure to include it **after** the main dev.css file. Here are a few built-in addons.
69
70### `header-sticky.css`
71
72This addon makes the header sticky, always staying at the top of the screen. Note that this addon is recommended for small headers, as it may affect the usability of your site if the header is large and takes up a lot of space. To use this addon, add the following line after the `dev.css` import:
73
74```html
75<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sticky.min.css">
76```
77
78### `header-sidebar.css`
79
80This addon turns the header into a sidebar on wide displays. The navigation items are listed vertically in this mode. The sidebar will responsively switch back to the default state if the viewport is too narrow to contain everything. If you are using this addon with `header-sticky.css`, make sure to include it **after** the `header-sticky.css` import. To use this addon, add the following line after the `dev.css` import:
81
82```html
83<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sidebar.min.css">
84```
85
86## Themes
87
88dev.css supports custom colors and fonts through themes. You can find some pre-made themes in the `/theme` folder. To use a theme, simply apply it after the dev.css stylesheet. There are themes inspired by terminals, night and day themes, and a set of Catppuccin themes. For example, to apply the terminal theme, add the following line after the `dev.css` import:
89
90```html
91<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/theme/terminal.min.css">
92```
93
94If you are creating a custom theme, it is recommended to use the `boilerplate-auto.css` template for better accessibility.
95
96## Credits
97
98- [xz/new.css](https://github.com/xz/new.css) is the main inspiration for this project