dev.css #

A tiny, classless CSS framework inspired by new.css. Drop it in and any plain HTML file becomes modern and responsive. The minified stylesheet weighs ~5kb. 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: https://devcss.devins.page

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

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

<a href="https://devcss.devins.page"
	><img
		src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@6/badge.svg"
		alt="powered by dev.css"
/></a>

Installing #

HTML #

<link
	rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@6"
/>

npm / pnpm / etc #

npm add @intergrav/dev.css

pnpm add @intergrav/dev.css

You can also load a font from 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>
	<head>
		...
	</head>
	<body>
		<header>...</header>
		<aside>...</aside>
		<main>...</main>
		<footer>...</footer>
	</body>
</html>

Header #

Place a <header> at the top of <body>. Use <h1> for the site title, <p> for an optional description, and <nav> for navigation.

Traditional nav:

<header>
	<h1>Website Title</h1>
	<p>An optional description.</p>
	<nav>
		<ul>
			<li><a href="#">Demo</a></li>
			<li><a href="#">GitHub</a></li>
		</ul>
	</nav>
</header>

Breadcrumb nav (recommended with header-oneline.css, move <h1> to <main> in that case):

<header>
	<nav>
		<a href="../..">dev.css</a> / <a href="..">Blog</a> / Making a Website
	</nav>
	<h1>Making a Website</h1>
</header>

Main #

Wrap your page content in <main>. Required for the sidebar layout and recommended for SEO.

<main>
	<h1>Page Title</h1>
	<p>Content goes here.</p>
</main>

Sidebar #

Place an <aside> before <main> for a sidebar. Up to two sidebars are supported, the second appears on the right. Wrap contents in <details> to make it collapsible. If you'd like to make it look like a container, you can wrap the contents inside <aside> with an <article>.

<aside>
	<details open>
		<summary>Sidebar</summary>
		<nav>
			<ul>
				<li><a href="#">Page 1</a></li>
				<li><a href="#">Page 2</a></li>
			</ul>
		</nav>
	</details>
</aside>

Footer #

Place a <footer> at the bottom of <body>. Formats nav the same way as the header.

Text elements #

• Body text: <p>
• Quotes: <blockquote>
• Highlighted text: <mark>
• Inline code: <code>
• Code blocks: <pre><code>
• Keyboard input: <kbd>
• Dropdowns: <details> / <summary>

For more HTML elements, see W3Schools/html.

Addons #

Small CSS/JS snippets that add or adjust functionality.

header-oneline.css #

Makes the header compact and horizontally laid out.

<link
	rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@6/addon/header-oneline.min.css"
/>

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.

<link
	rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@6/addon/header-sticky.min.css"
/>

scroll-to-top.js #

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

<script
	src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@6/addon/scroll-to-top.min.js"
	defer
></script>

responsive-sidebar.js #

Auto-opens/closes <details> inside sidebars at wide viewports.

<script
	src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@6/addon/responsive-sidebar.min.js"
	defer
></script>

Themes #

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

<link
	rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@6/theme/terminal.user.min.css"
/>

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 for being a major inspiration
• Catppuccin for the colors used in the Catppuccin themes