Star ⭐️ this project on GitHub!

Getting Started

This guide will go over how to add the proper link and script elements, and how to add custom CSS.

Add files Templates

Just Light Mode

If you don't want dark mode and only want to have a light theme, just add the following code to your <head> element. Our main CSS file includes modern-normalize.css to help with any browser compatibility issues.


      <!-- CSS -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/simpledevio/simpledev-css@v0.3.4/dist/simpledev.min.css">

Just Dark Mode

If you don't want light mode and only want to have a dark theme, add the following code to your <head> element. This code adds a <meta> tag and a second <link> element.


      <meta name="color-scheme" content="dark">

      <!-- CSS -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/simpledevio/simpledev-css@v0.3.4/dist/simpledev.min.css">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/simpledevio/simpledev-css@v0.3.4/dist/dark.min.css">

Light and Dark Mode

If you want a light and dark mode depending on the user's system preferences, add the following code to your <head> element. This snippet looks similar to the last one, but it has a different value for the content attribute and a media query on the second <link> element.


      <meta name="color-scheme" content="light dark">

      <!-- CSS -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/simpledevio/simpledev-css@v0.3.4/dist/simpledev.min.css">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/simpledevio/simpledev-css@v0.3.4/dist/dark.min.css" media="(prefers-color-scheme: dark)">

Add JS

Currently, we only use JS for our navbar component. If you're using our navbar component, you can add this <script> element to the <head> element underneath the <link> elements.


      <!-- JS -->
      <script src="https://cdn.jsdelivr.net/gh/simpledevio/simpledev-css@v0.3.4/dist/navbar.min.js" defer></script>

Download Files

If you want to host the files yourself, you can download the latest version of simpledev.css, download the latest version of our JS file, and download the latest version of dark.css. If you want to download a specific version, you can visit our Releases page.

Assuming you have a css folder and a js folder in your project folder, your HTML might look something like this:


      <meta name="color-scheme" content="light dark">

      <!-- CSS -->
      <link rel="stylesheet" href="css/simpledev.css">
      <link rel="stylesheet" href="css/dark.css" media="(prefers-color-scheme: dark)">

      <!-- JS -->
      <script src="js/navbar.js" defer></script>

You can also go to the repo and copy or download the code for individual components (like the buttons or navbars).

Add custom CSS

Lastly, we encourage adding your own custom CSS using your own CSS file. You can technically just stick with the default styles, but we recommend adding your own colors and fonts to make your site unique.

For example, if you have a file called custom.css inside your css folder, you should add the following <link> element after the other two link elements we listed above. You can always name the file something else or put it in a different folder (just make sure the path is right).

<link rel="stylesheet" href="css/custom.css">

Basic Template

You can copy and paste this into an empty HTML file to quickly get started. This template also includes the dark mode <link> element. You can replace the code in the <head> element if you only want light mode or dark mode. If you want to add custom CSS, you'll have to add the link element for that yourself. You can also download the Basic Template.


      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Template</title>

        <meta name="color-scheme" content="light dark">

        <!-- CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/simpledevio/simpledev-css@v0.3.4/dist/simpledev.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/simpledevio/simpledev-css@v0.3.4/dist/dark.min.css" media="(prefers-color-scheme: dark)">

        <!-- JS -->
        <script src="https://cdn.jsdelivr.net/gh/simpledevio/simpledev-css@v0.3.4/dist/navbar.min.js" defer></script>
      </head>

      <body>
        <h1>Template</h1>
      </body>
      </html>

Advanced Template

Copy and paste this code into an empty HTML file if you want a template that already has a navbar, container, and footer. This template also includes the dark mode <link> element. You can replace the code in the <head> element if you only want light mode or dark mode. If you want to add custom CSS, you'll have to add the link element for that yourself. You can also download the Advanced Template.


      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Advanced Template</title>

        <meta name="color-scheme" content="light dark">

        <!-- CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/simpledevio/simpledev-css@v0.3.4/dist/simpledev.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/simpledevio/simpledev-css@v0.3.4/dist/dark.min.css" media="(prefers-color-scheme: dark)">

        <!-- JS -->
        <script src="https://cdn.jsdelivr.net/gh/simpledevio/simpledev-css@v0.3.4/dist/navbar.min.js" defer></script>
      </head>

      <body>
        <nav class="navbar">
          <div class="navbar-bar">
            <a href="" class="navbar-brand">Brand</a>
            <button type="button" class="navbar-menu">Menu</button>
          </div>
          <ul class="navbar-links">
            <li><a href="" class="active">Home</a></li>
            <li><a href="">Pricing</a></li>
            <li><a href="">About</a></li>
            <li><a href="" class="button">Contact</a></li>
          </ul>
        </nav>

        <div class="container">
          <h1>Advanced Template</h1>
        </div>

        <footer class="footer">
          <ul class="footer-links">
            <li><a href="">Facebook </a></li>
            <li><a href="">Twitter</a></li>
            <li><a href="">Instagram</a></li>
            <li><a href="">LinkedIn</a></li>
            <li><a href="">YouTube</a></li>
          </ul>
          <small>© 2025 Business Name.</small>
        </footer>
      </body>
      </html>

GitHub Template

You can download a sample project to play around with by visiting our simpledev.css template repo. Just click the green Code button and select Download ZIP. This project includes a file called custom.css where you can add custom CSS code.

CodePen

You can play around with simpledev.css right in your browser by visiting our simpledev.css Pen.

Demo Site

You can view a demo site that uses simpledev.css on GitHub Pages. You can also view the demo site repo on GitHub.

Custom Build

If you want to create a custom build of the framework, you can download the repo and edit the combine_css.sh script. Just comment out the files you want to exclude from the list at the top (or add more files to the bottom). Just add a # symbol to comment out the file. As an example, lets say you wanted to comment out the navbar.css file because you're not going to use it. That would look something like this:


      #!/bin/bash

      # Define an array of CSS file paths
      css_files=(
          "css/base/_modern-normalize.css"
          "css/base/base.css"
          "css/base/forms.css"
          "css/base/tables.css"
          "css/accessibility/skip-link.css"
          "css/accessibility/visually-hidden.css"
          "css/button/button.css"
          "css/button/button-outline.css"
          "css/button/button-mods.css"
          # "css/navbar/navbar.css"
          "css/navbar/navbar-message.css"
          "css/navbar/navbar-simple.css"
          "css/code.css"
          "css/container.css"
          "css/layout.css"
          "css/footer.css"
          "css/grid.css"
          "css/utilities.css"
          # Add more file paths as needed
      )

You can also delete the line entirely instead of commenting it. The rest of the script should remain unchanged. Just run bash combine_css.sh in the root of the folder to concatenate all of the files in the array.

Top