# 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) dev.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 **~5.5kb**. It also has some extra features, such as an optional sidebar and addons. You can find the website at devcss.devins.page, which contains a demo page.

Click to view preview

## Who is this for? dev.css is a great choice for: - A simple blog - A simple "about me" website - Collecting your most used links - Prototyping your raw HTML dev.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). If 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: ```html

```

## Installing ### HTML import To use dev.css in your HTML, simply add the following line to the `` section of your HTML file: ```html ``` ### `npm`, `pnpm`, etc Another 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. ```sh npm add @intergrav/dev.css # or pnpm add @intergrav/dev.css ``` ### Importing fonts You can also load a font from [intergrav/fonts](https://tangled.org/devins.page/fonts) (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. ## Elements and Structure dev.css takes advantage of semantic HTML elements. Here are some guidelines on how to use them for the best results. ### Header It's recommended that you add a header to your page. To add one, place a `

` tag at the top of your ``. You can use an `

` tag as your website's title. You can also add a `

` element as an optional short description of the site. If you want to add a traditional navigation element, you should lay out your `

` element like this: ```html

Website Title

An optional description of the website.

``` ![Example of a header using traditional navigation](.github/static/header-traditional.png) If 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 `

` to `

`. ```html

Making a Website

Making a basic website with dev.css.

``` ![Example of a header using breadcrumb navigation](.github/static/header-breadcrumb.png) ### Main For your main content, or the actual content of the page, it is heavily recommended that you wrap all of it in a `

` tag. Otherwise, certain features from dev.css may not work properly. It may also benefit search engine optimization. Here's an example: ```html

Page 1

Welcome to my website's first page! This is an example.

``` ### Sidebar Optionally, 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 `

` tag, and then it's also recommended to put an `

` inside if you want a background. You must put it above the `

` 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 `

` tag - adding the `open` attribute will make it open by default. Here's an example: ```html ``` ### Footer Optionally, 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 `