# intergrav/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://github.com/intergrav/dev.css) dev.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.9kb** and includes both light and dark themes. 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. An example of a site that uses dev.css is [SkywardMC's wiki](https://skywardmc.org). ## Importing To use dev.css in your HTML, simply add the following line to the `` section of your HTML file: ```html ``` You 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. ## 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. You must put it above the `

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