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://discord.gg/m5tUgaM3uK) [](https://github.com/intergrav/dev.css)
4
5dev.css is a tiny, 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 **~5.5kb** and includes both light and dark themes.
6
7You can find the website at <a href="https://devcss.devins.page">devcss.devins.page</a>, which contains a demo page.
8
9<details>
10<summary>Click to view preview</summary>
11<img src=".github/static/preview-desktop-light.png" alt="dev.css desktop demo, light mode">
12<img src=".github/static/preview-desktop-dark.png" alt="dev.css desktop demo, dark mode">
13<img height="748px" src=".github/static/preview-mobile-light.png" alt="dev.css mobile demo, light mode">
14<img height="748px" src=".github/static/preview-mobile-dark.png" alt="dev.css mobile demo, dark mode">
15</details>
16
17## Who is this for?
18
19dev.css is a great choice for:
20
21- A simple blog
22- A simple "about me" website
23- Collecting your most used links
24- Prototyping your raw HTML
25
26dev.css was not meant for very complex websites. An example of a site that uses dev.css is [SkywardMC's wiki](https://skywardmc.org).
27
28## Importing
29
30To use dev.css in your HTML, simply add the following line to the `<head>` section of your HTML file:
31
32```html
33<link
34 rel="stylesheet"
35 href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4"
36/>
37```
38
39You can also load a font from [intergrav/fonts](https://github.com/intergrav/fonts#readme) (or anywhere else) if you'd like a consistent font. 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.
40
41## Elements and Structure
42
43dev.css takes advantage of semantic HTML elements. Here are some guidelines on how to use them for the best results.
44
45### Header
46
47It's recommended that you add a header to your page. To add one, place a `<header>` tag at the top of your `<body>`. You can use an `<h1>` tag as your website's title. You can also add a `<p>` element as an optional short description of the site.
48
49If you want to add a traditional navigation element, you should lay out your `<nav>` element like this:
50
51```html
52<header>
53 <h1>Website Title</h1>
54 <p>An optional description of the website.</p>
55 <nav>
56 <ul>
57 <li><a href="https://example.com">Demo</a></li>
58 <li><a href="https://example.com">GitHub</a></li>
59 <li><a href="https://example.com">npm</a></li>
60 <li><a href="https://example.com">jsDelivr</a></li>
61 </ul>
62 </nav>
63</header>
64```
65
66
67
68If you'd like, you could instead use [breadcrumb navigation](https://en.wikipedia.org/wiki/Breadcrumb_navigation). If you're using the header-oneline addon while doing this, it's recommended to remove all other elements in the header and move `<h1>` to `<main>`.
69
70```html
71<header>
72 <nav>
73 <a href="../..">dev.css</a> / <a href="..">Blog</a> / Making a Website
74 </nav>
75 <h1>Making a Website</h1>
76 <p>Making a basic website with dev.css.</p>
77</header>
78```
79
80
81
82### Main
83
84For your main content, or the actual content of the page, it is heavily recommended that you wrap all of it in a `<main>` tag. Otherwise, certain features from dev.css may not work properly. It may also benefit search engine optimization. Here's an example:
85
86```html
87<main>
88 <h1>Page 1</h1>
89 <p>Welcome to my website's first page! This is an example.</p>
90</main>
91```
92
93### Sidebar
94
95Optionally, you can add a sidebar to your page for pretty much anything you'd like. A good usage for this could be, for example, complex navigation on a docs website, where you wouldn't be able to fit it all into the header. The sidebar will sort normally with the rest of the content on smaller screens. To make a sidebar, place an `<aside>` tag. You must put it above the `<main>` content. Here's an example:
96
97```html
98<aside>
99 <h1>Sidebar</h1>
100 <nav>
101 <ul>
102 <li><a href="https://example.com">Page 1</a></li>
103 <li>
104 <a href="https://example.com">Page 2</a>
105 <ul>
106 <li><a href="https://example.com">Page 2.1</a></li>
107 <li><a href="https://example.com">Page 2.2</a></li>
108 </ul>
109 </li>
110 <li><a href="https://example.com">Page 3</a></li>
111 <li><a href="https://example.com">Page 4</a></li>
112 </ul>
113 </nav>
114</aside>
115```
116
117### Footer
118
119Optionally, you can add a footer to your page. This could include copyright information, what the website was built with, it's source link, anything really. To make a footer, place a `<footer>` tag at the bottom of your `<body>`. It also formats the nav element in the same way that the header does.
120
121### Final Structure
122
123In the end, this is what your page structure should look like if you decide to add everything:
124
125```html
126<html>
127 <head>
128 ...
129 </head>
130 <body>
131 <header>...</header>
132 <aside>...</aside>
133 <main>...</main>
134 <footer>...</footer>
135 </body>
136</html>
137```
138
139### Text
140
141Wrap 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 wrap that with `<pre>` for code blocks. Use `<kbd>` for keyboard input.
142
143### Button
144
145To create a link button, wrap the button in an `<a>` tag. Here's an example:
146
147```html
148<a href="https://example.com">
149 <button>Click me!</button>
150</a>
151```
152
153### Details
154
155The `<details>` element can be used to create a toggle-able dropdown without using any JavaScript. Here's an example:
156
157```html
158<details>
159 <summary>Click me!</summary>
160 <p>Lorem ipsum dolor sit amet.</p>
161</details>
162```
163
164### More
165
166To learn about other HTML elements and how to write HTML, visit [W3Schools/html](https://www.w3schools.com/html/).
167
168## Addons
169
170dev.css provides a basic set of styles. Addons are small CSS or JS snippets that can be used to adjust or add functionality to dev.css based on your needs. Here are the built-in addons.
171
172### `header-oneline.css`
173
174This addon makes the header much more compact on narrow viewports. To use, add the following line after the `dev.css` import:
175
176```html
177<link
178 rel="stylesheet"
179 href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/header-oneline.min.css"
180/>
181```
182
183### `header-sticky.css`
184
185This 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. If using with `header-oneline.css`, place this after. To use, add the following line after the `dev.css` import:
186
187```html
188<link
189 rel="stylesheet"
190 href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/header-sticky.min.css"
191/>
192```
193
194### `scroll-to-top.js`
195
196This addon creates a small "scroll to top" button in the bottom right corner of your website when the user scrolls down. The button uses the default dev.css button style. The button is slightly opaque so that you can see it but it doesn't block the view. To use this addon, add the following line after the `dev.css` import:
197
198```html
199<script
200 src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/addon/scroll-to-top.min.js"
201 defer
202></script>
203```
204
205## Themes
206
207dev.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 night and day themes, a set of Catppuccin themes, and a terminal theme. For example, to apply the terminal theme, add the following line after the `dev.css` import:
208
209```html
210<link
211 rel="stylesheet"
212 href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/theme/terminal.user.min.css"
213/>
214```
215
216If you are creating your own theme, see the `boilerplate.user.css` file.
217
218### Userstyles
219
220The built-in themes can also be installed to your userstyle manager, such as Stylus. That theme will override any website using dev.css. To install one, open the theme's file in your browser.
221
222## Credits
223
224- [xz/new.css](https://github.com/xz/new.css) being a major inspiration for this project
225- Vercel's [Geist](https://vercel.com/geist/introduction) design system
226- [Catppuccin](https://github.com/catppuccin) for the colors used in the Catppuccin themes