Skip to content

v4 Migration Guide

Jump to bottom
devin edited this page Feb 25, 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>
    .. heading, nav, etc ..
  </header>
  <aside>
    <article>
      <h1>Sidebar</h1>
      <p>Lorem ipsum dolor sit amet.</p>
    </article>
  </aside>
  <main>
    <h1>Heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </main>
  <footer>
    .. typical footer stuff ..
  </footer>
</body>
  • bg1 and bg2 colors have been swapped so you may need to update custom themes to reflect that
  • All other information on how to use elements properly is listed in the README.

Clone this wiki locally