lightweight, simple, classless CSS framework inspired by new.css
devcss.devins.page
framework
lightweight
css
classless
stylesheet
1# 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://tangled.org/devins.page/dev.css)
4
5dev.css is a tiny, simple, classless CSS framework inspired by [new.css](https://newcss.net). It is designed to make any plain HTML file modern and responsive. The minified stylesheet weighs only **~4.8kb**. It also has some extra features, such as an optional sidebar and addons.
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=".tangled/static/preview-desktop-light.png" alt="dev.css desktop demo, light mode">
12<img src=".tangled/static/preview-desktop-dark.png" alt="dev.css desktop demo, dark mode">
13<img height="748px" src=".tangled/static/preview-mobile-light.png" alt="dev.css mobile demo, light mode">
14<img height="748px" src=".tangled/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. Although, if you need something more complex, you could build from/modify this stylesheet for your website. An example of a site that uses dev.css is [SkywardMC's wiki](https://skywardmc.org).
27
28If you're using dev.css on your site, feel free to use this "powered by dev.css" badge if you want to promote the project:
29
30```html
31<a href="https://devcss.devins.page"
32 ><img
33 src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@5/badge.svg"
34 alt="powered by dev.css"
35/></a>
36```
37
38<a href="https://devcss.devins.page"><img src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@5/badge.svg" alt="powered by dev.css" /></a>
39
40## Installing
41
42### HTML import
43
44To use dev.css in your HTML, simply add the following line to the `<head>` section of your HTML file:
45
46```html
47<link
48 rel="stylesheet"
49 href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@5"
50/>
51```
52
53### `npm`, `pnpm`, etc
54
55Another way to install dev.css is to add the npm package to your project through your preferred package manager. This command adds the latest version to your project.
56
57```sh
58npm add @intergrav/dev.css
59# or
60pnpm add @intergrav/dev.css
61```
62
63### Importing fonts
64
65You can also load a font from [fontsource.org](https://fontsource.org) if you'd like a consistent font. By default, the system/browser sans-serif and monospace fonts will be used, such as Microsoft's Segoe UI or Apple's San Francisco.
66
67## Elements and Structure
68
69dev.css takes advantage of semantic HTML elements. Here are some guidelines on how to use them for the best results.
70
71### Header
72
73It'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.
74
75If you want to add a traditional navigation element, you should lay out your `<nav>` element like this:
76
77```html
78<header>
79 <h1>Website Title</h1>
80 <p>An optional description of the website.</p>
81 <nav>
82 <ul>
83 <li><a href="https://example.com">Demo</a></li>
84 <li><a href="https://example.com">GitHub</a></li>
85 <li><a href="https://example.com">npm</a></li>
86 <li><a href="https://example.com">jsDelivr</a></li>
87 </ul>
88 </nav>
89</header>
90```
91
92
93
94If 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>`.
95
96```html
97<header>
98 <nav>
99 <a href="../..">dev.css</a> / <a href="..">Blog</a> / Making a Website
100 </nav>
101 <h1>Making a Website</h1>
102 <p>Making a basic website with dev.css.</p>
103</header>
104```
105
106
107
108### Main
109
110For 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:
111
112```html
113<main>
114 <h1>Page 1</h1>
115 <p>Welcome to my website's first page! This is an example.</p>
116</main>
117```
118
119### Sidebar
120
121Optionally, 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. You can have up to two sidebars per page - the second one will appear on the right side. You can also make a sidebar collapsible by wrapping it's contents in a `<details>` tag - adding the `open` attribute will make it open by default. Here's an example:
122
123```html
124<aside>
125 <details open>
126 <summary>Sidebar</summary>
127 <nav>
128 <ul>
129 <li><a href="https://example.com">Page 1</a></li>
130 <li>
131 <a href="https://example.com">Page 2</a>
132 <ul>
133 <li><a href="https://example.com">Page 2.1</a></li>
134 <li><a href="https://example.com">Page 2.2</a></li>
135 </ul>
136 </li>
137 <li><a href="https://example.com">Page 3</a></li>
138 <li><a href="https://example.com">Page 4</a></li>
139 </ul>
140 </nav>
141 </details>
142</aside>
143```
144
145### Footer
146
147Optionally, 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.
148
149### Final Structure
150
151In the end, this is what your page structure should look like if you decide to add everything:
152
153```html
154<html>
155 <head>
156 ...
157 </head>
158 <body>
159 <header>...</header>
160 <aside>...</aside>
161 <main>...</main>
162 <footer>...</footer>
163 </body>
164</html>
165```
166
167### Text
168
169Wrap 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.
170
171### Details
172
173The `<details>` element can be used to create a toggle-able dropdown without using any JavaScript. Here's an example:
174
175```html
176<details>
177 <summary>Click me!</summary>
178 <p>Lorem ipsum dolor sit amet.</p>
179</details>
180```
181
182### More
183
184To learn about other HTML elements and how to write HTML, visit [W3Schools/html](https://www.w3schools.com/html/).
185
186## Addons
187
188dev.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.
189
190### `header-oneline.css`
191
192This addon makes the header much more compact on narrow viewports. To use, add the following line after the `dev.css` import:
193
194```html
195<link
196 rel="stylesheet"
197 href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@5/addon/header-oneline.min.css"
198/>
199```
200
201### `header-sticky.css`
202
203This 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:
204
205```html
206<link
207 rel="stylesheet"
208 href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@5/addon/header-sticky.min.css"
209/>
210```
211
212### `scroll-to-top.js`
213
214This 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:
215
216```html
217<script
218 src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@5/addon/scroll-to-top.min.js"
219 defer
220></script>
221```
222
223### `responsive-sidebar.js`
224
225This addon automatically opens and closes `<details>` elements inside sidebars at the 82rem breakpoint. This prevents sidebars from looking awkward on wide screens and improves usability on small screens. To use this addon, add the following line after the `dev.css` import:
226
227```html
228<script
229 src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@5/addon/responsive-sidebar.min.js"
230 defer
231></script>
232```
233
234## Themes
235
236dev.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:
237
238```html
239<link
240 rel="stylesheet"
241 href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@5/theme/terminal.user.min.css"
242/>
243```
244
245If you are creating your own theme, see the `boilerplate.user.css` file.
246
247### Userstyles
248
249The 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.
250
251## Credits
252
253- [xz/new.css](https://github.com/xz/new.css) being a major inspiration for this project
254- Vercel's [Geist](https://vercel.com/geist/introduction) design system
255- [Catppuccin](https://github.com/catppuccin) for the colors used in the Catppuccin themes