Skip to content

v4 Migration Guide

Jump to bottom
devin edited this page Feb 18, 2025 · 4 revisions

dev.css v4 is a new major version of dev.css that makes a lot of changes from v3. As a result of this, when migrating, you will likely have to make some minor changes to your HTML. Here's the main things to keep note of:

  • You will need to change your import links from @3 to @4.
  • You should now place your main body content into a <main> tag - basically, everything that's not a <header> or <footer>. Not doing this could result in issues with document margin/padding and certain add-ons.
  • If you use the sidebar addon, it has been replaced and is now built-in. It no longer uses the <header> for content. To add a sidebar, you need to wrap content in <aside> and <article> tags. Then, place it above your <main> tag. You can have up to two sidebars per page (left and right) and as many articles in the sidebar as you'd like. Here's an example of what your page should look like if you are using a sidebar:
<body>
  <header>
    ...
  </header>
  <aside>
    <article>
      <h1>Header</h1>
      <p>Lorem ipsum dolor sit amet.</p>
    </article>
  </aside>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>
  • All other information on how to use elements properly is listed in the README.

Clone this wiki locally