# dev.css [![NPM Version](https://img.shields.io/npm/v/@intergrav/dev.css)](https://www.npmjs.com/package/@intergrav/dev.css) [![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/@intergrav/dev.css)](https://cdn.jsdelivr.net/npm/@intergrav/dev.css/) [![Discord](https://img.shields.io/discord/1262738186338308126?logo=discord&logoColor=%23fff&color=%235865F2)](https://discord.gg/m5tUgaM3uK) [![GitHub Repo stars](https://img.shields.io/github/stars/intergrav/dev.css)](https://tangled.org/devins.page/dev.css) A tiny, classless CSS framework inspired by [new.css](https://newcss.net). Drop it in and any plain HTML file becomes modern and responsive. The minified stylesheet weighs ~4.8kb. Good for simple blogs, personal sites, link pages, and HTML prototyping. Not meant for very complex web apps or sites, though you can build from it. Website and demo:

Preview (not completely up-to-date im lazy)

If you use dev.css, feel free to add the badge: ```html

```

## Installing ### HTML ```html ``` ### npm / pnpm / etc ```sh npm add @intergrav/dev.css pnpm add @intergrav/dev.css ``` You can also load a font from [fontsource.org](https://fontsource.org) if you want a consistent font. By default, system sans-serif and monospace fonts are used. ## Structure dev.css uses semantic HTML. Here's the recommended page structure: ```html ...

...

``` ### Header Place a `

` at the top of ``. Use `

` for the site title, `

` for an optional description, and `

` for navigation. Traditional nav: ```html

Website Title

An optional description.

``` ![Example of a header using traditional navigation](.tangled/static/header-traditional.png) Breadcrumb nav (recommended with `header-oneline.css`, move `

` to `

` in that case): ```html

Making a Website

``` ![Example of a header using breadcrumb navigation](.tangled/static/header-breadcrumb.png) ### Main Wrap your page content in `

`. Required for the sidebar layout and recommended for SEO. ```html

Page Title

Content goes here.

``` ### Sidebar Place an `

` before `

` for a sidebar. Up to two sidebars are supported, the second appears on the right. Wrap contents in `

` to make it collapsible. If you'd like to make it look like a container, you can wrap the contents inside `

` with an `

`. ```html ``` ### Footer Place a `

` at the bottom of ``. Formats nav the same way as the header. ### Text elements - Body text: `

` - Quotes: `

` - Highlighted text: `` - Inline code: `

`
- Code blocks: ``
- Keyboard input: ``
- Dropdowns: `` / ``

For more HTML elements, see [W3Schools/html](https://www.w3schools.com/html/).

## Addons

Small CSS/JS snippets that add or adjust functionality.

### `header-oneline.css`

Makes the header compact and horizontally laid out.

```html

```

### `header-sticky.css`

Makes the header stick to the top of the screen. Recommended for small headers, pair with `header-oneline.css` for best results.

```html

```

### `scroll-to-top.js`

Adds a small scroll-to-top button in the bottom right corner when the user scrolls down.

```html

```

### `responsive-sidebar.js`

Auto-opens/closes `` inside sidebars at wide viewports.

```html

```

## Themes

Apply a theme after the dev.css import. Can modify colors, fonts, and other variables.

```html

```

Available built-in themes: `day`, `night`, `terminal`, `catppuccin-mocha`, `catppuccin-frappe`, `catppuccin-macchiato` (Latte is included for light mode in each of the catppuccin themes for accessibility). To make your own, see `boilerplate.user.css`.

Themes can also be installed as userstyles (e.g. via Stylus) to apply to any site using dev.css.

## Credits

- [xz/new.css](https://github.com/xz/new.css) for being a major inspiration
- [Catppuccin](https://github.com/catppuccin) for the colors used in the Catppuccin themes