Document.css

About

Document.css — is styles that are applied to any element inside the one with "Document" class. It do not do much but what it does is enough for not to think about styles of your document:

Pretty fonts with adjusted fallbacks;
Main thread width limitation;
Light and dark modes switching by system settings;
Some other stuff.

I made this stylesheet for this exact site. I wanted to describe my stuff on Github without all that installing-building-bundling process that gives us all our favorite components architecture but requires to add extra actions to publish process, requires to keep all the packages updated and makes it hard to change the same thing in different projects. So here it is — the stylesheet that just prettifies vanilla HTML markup that never gets old. I just write one HTML file for each page that do not require any components or other files (except this stylesheet), that can be deployed by just moving the file to HTTP server (hello, Github pages!) and updating that one style file cause updates in all pages that uses it. The result you can see in this very page you are reading right now.

Sizes and indents

The interesting part of this styles is how they handles sizes and indents. You can read about it on indents page.

about indents

Guide

Connection

To make it work you should add a stylesheet link to "https://800147.github.io/document/src/document.css" and add a "Document" class to parent element. If you choose your body tag as a document root, it will also limit the width of your main tag to make it more readable.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document.css example</title>
    <meta name="color-scheme" content="light dark">
    <link rel="stylesheet" href="https://800147.github.io/document/src/document.css">
  </head>
  <body class="Document">
    <main>
      <h1>title</h1>
      <p>Some text</p>
    </main>
  </body>
</html>

And that's it! It really all you need to style your HTML document. Just make sure you use proper tags for the content and Document.css will try to make it pretty.

Supported tags

Here is the list of supported tags:

body
main
section
h1, h2, h3, h4
hr
p
ul, ol
a
button
code
pre
figure, img, picture, video, figcaption
q, blockquote
table

You can check how all this look at the example page.

example page

Breadcrumbs

As a basic navigation solution there is a Breadcrumbs component. To add them to your page, add an element with "Document-Breadcrumbs" class containing the list of navigation links:

<body class="Document">
  <nav class="Document-Breadcrumbs">
    <ul>
      <li><a href="../../">Root</a></li>
      <li><a href="../">Parent page</a></li>
    </ul>
  </nav>
  <main>
    <h1>title</h1>
    <p>Some text</p>
  </main>
</body>

Breadcrumbs are always appear at the top of the page. When window width is small, only last element is shown.

Button component

If you want for some reason to style link as a button, you can do this by adding "Document-Button" class to link (or other element):

<section class="Document">
  <p>
    <button>button</button>
  </p>
  <p>
    <a href="">link</a>
  </p>
  <p>
    <a class="Document-Button" href="">button-styled link</a>
  </p>
</section>

Elements exclusion

As any styles that related to tag names, Document.css can case problems with other styles that usually do not expect basic elements styling. To prevent given elements from styling, you can wrap them with element with "Document-Exclude" class.

<section class="Document">
  <h1>Styled title</h1>
  <p>Styled text</p>
  <p class="Document-Exclude">
    <button>Non-styled button</button>
  </p>
  <p>
    <button>Styled button</button>
  </p>
</section>

Colors for highlightjs

If you want to add syntax highlighting to code blocks, there are color bindings to classes generated by highlightjs. Just connect the highlightjs library in proper way:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document.css example</title>
    <link rel="stylesheet" href="https://800147.github.io/document/src/document.css">
    <script type="module">
      // https://highlightjs.org/usage/
      import hljs from 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/es/highlight.min.js';
      hljs.highlightAll();
    </script>
  </head>
  <body class="Document">
    <main>
      <h1>My code</h1>
      <pre><code class="language-javascript">console.log('Hello world!');</code></pre>
    </main>
  </body>
</html>

Md-reader

Document.css styles are used in Md-reader — an HTML template that lets you use Markdown for writing the content of the page.

Md-reader

Sources

The sources can be found on Github:

sources on Github