Star ⭐️ this project on GitHub!

Recipes

This page shows some code snippets that you can add directly to your custom CSS file (the sticky navbar and navbar message snippet also requires modifying your HTML). NOTE: If you inspect some of the elements on this page, we're using rounded and pill classes to show off different styles, but you won't need those classes in your own code.

Custom container width


    .container {
      max-width: 900px;
    }

Use this snippet to change the max width of your containers. Feel free to change the number.


    .navbar {
      background-color: #fff;
      border-bottom: solid 1px #0f172a1a;
      position: sticky;
      top: 0px;
      z-index: 11;
    }

    html {
      scroll-padding-top: 5rem;
    }
  

    @media (prefers-color-scheme: dark) {
      .navbar {
        background-color: var(--darkest-bg);
        border-bottom: solid 1px #f8fafc0f;
      }
    }

Add this code to your custom CSS file to make the navbar stick to the top of the browser. You can wrap this code in a media query to limit this behavior to only large or small screens. Add the second snippet if you're using dark mode.

Sticky navbar message


    .navbar-message {
      position: sticky;
      top: 0px;
      z-index: 11;
    }

    html {
      scroll-padding-top: 3rem;
    }

Add this code to your custom CSS file to make the navbar message stick to the top of the browser. You can wrap this code in a media query to limit this behavior to only large or small screens.


    <div class="navbar-group">
      <div class="navbar-message">Test navbar message.</div>
      <nav class="navbar">
        <div>
          <a href="">Brand</a>
          <button type="button">Menu</button>
        </div>
        <ul>
          <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>
  

    .navbar-group {
      position: sticky;
      top: 0px;
      z-index: 11;
    }

    .navbar {
      background-color: #fff;
      border-bottom: solid 1px #0f172a1a;
    }

    html {
      scroll-padding-top: 5rem;
    }
  

    @media (prefers-color-scheme: dark) {
      .navbar {
        background-color: var(--darkest-bg);
        border-bottom: solid 1px #f8fafc0f;
      }
    }

If you want the navbar and navbar message to stick to the top of the browser, first you should wrap them in a div and then give it a class. In our example, we called it navbar-group. Then add the rules to your custom CSS file. You can wrap this code in a media query to limit this behavior to only large or small screens. Add the last snippet if you're using dark mode.

Rounded corners

Anchor Anchor 
echo "hello world"
Summary text Details text 

    .button,
    .button-floating,
    .button-outline,
    button,
    input,
    textarea,
    details,
    .code {
      border-radius: .375rem;
    }

Add this code to your custom CSS file if you want rounded corners instead of square corners. You can change the value depending on how round you want your corners to be. This snippet will give other elements rounded corners as well. You can delete the bottom four selectors if you only want the buttons to have rounded corners.

Pill buttons

Anchor Anchor 

    .button,
    .button-floating,
    .button-outline,
    button {
      border-radius: 9999px;
    }

Add this code to your custom CSS file if you want pill buttons. You may want to increase the padding-inline property as well.

Hide Floating Button

If you want to hide the floating button on smaller screens, add the following code to your custom CSS. Feel free to change the number. If you want the floating button to be hidden on larger screens, change max-width to min-width.


    @media (max-width: 575.98px) {
      .button-floating {
        display: none;
      }
    }

Striped tables

Caption text
Header 1 Header 2
Cell 1 Cell 2 

    tr:nth-child(even) {
      background-color: #f1f3f5;
    }
  

    /* Dark mode */
    @media (prefers-color-scheme: dark) {
      tr:nth-child(even) {
        background-color: #495057;
      }
    }

If you want every other row to be striped, add the CSS rules above to your custom CSS (the second rule is only necessary if you're supporting dark mode). This snippet will make the even rows striped. If you want the odd rows to be striped, change even to odd. Add the second snippet if you're also using dark mode.

Smooth Scrolling

Smooth scrolling is not enabled by default. If you want to enable smooth scrolling, you can add the following code snippet to your custom CSS file.


  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

HTML recipes

The following recipes are not specific to simpledev.css. They can be used with any HTML page.

Meta description

Use the meta description to control the text displayed when your page is listed in search engine results.

<meta name="description" content="Insert page description here.">

OG tags

Use Open Graph tags to control how your page is displayed when shared on social media.


    <meta property="og:title" content="Example Title">
    <meta property="og:description" content="This is an example of an Open Graph description.">
    <meta property="og:url" content="https://www.example.com/page">
    <meta property="og:image" content="https://www.example.com/image.jpg">
    <meta property="og:type" content="website">

Twitter card tags

Use Twitter card tags to control how your page is displayed when shared on X. If you don't add these, X will just look for the OG tags mentioned above instead.


    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@yourwebsite">
    <meta name="twitter:creator" content="@yourtwitterhandle">
    <meta name="twitter:title" content="your title">
    <meta name="twitter:description" content="your description.">
    <meta name="twitter:image" content="https://where-your-image-is-hosted/name.jpg">
Top