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 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. Our JS file lets you open and close the navbar on smaller screens.


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

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

Just Dark Mode

If you don't want light mode and 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.2.9/dist/simpledev.min.css">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/simpledevio/simpledev-css@v0.2.9/dist/dark.min.css">

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

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.2.9/dist/simpledev.min.css">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/simpledevio/simpledev-css@v0.2.9/dist/dark.min.css" media="(prefers-color-scheme: dark)">

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

No JS

Currently, we only use JS for our navbar component. If you're not using our navbar component, or you're only using our simple navbar component (which doesn't require JS), you can delete the <script> element from the snippets above.


      <!-- DELETE THIS LINE IF YOU'RE NOT USING JS -->
      <script src="https://cdn.jsdelivr.net/gh/simpledevio/simpledev-css@v0.2.9/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>

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.2.9/dist/simpledev.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/simpledevio/simpledev-css@v0.2.9/dist/dark.min.css" media="(prefers-color-scheme: dark)">

        <!-- JS -->
        <script src="https://cdn.jsdelivr.net/gh/simpledevio/simpledev-css@v0.2.9/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.2.9/dist/simpledev.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/simpledevio/simpledev-css@v0.2.9/dist/dark.min.css" media="(prefers-color-scheme: dark)">

        <!-- JS -->
        <script src="https://cdn.jsdelivr.net/gh/simpledevio/simpledev-css@v0.2.9/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>© 2024 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.

Top