LiteStrap

After adding LiteStrap, you can start building your project by including the CSS and JavaScript files in your HTML.
Note: you do not need any additional libraries (like ie. jQuery) to start using LiteStrap.

Here is some very simple webpage with LiteStrap (index.html):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="https://litestrap.dev/dist/litestrap.min.css">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>First LiteStrap Project</title>
  </head>
  <body class="d-flex-column">
    <header>
      <nav>
        <span>LOGO</span>
        <button type="button" class="button" data-role="menu-toggler" aria-controls="navMenu"
            aria-expanded="false" aria-label="Toggle Navigation"><button>
        <ul id="navMenu">
          <li><a href="#">About Us</a></li>
          <li><a href="#">Products</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main class="container">
      <p class="indent-md">Lorem Ipsum...</p>
      <p class="indent-md">Another Lorem Ipsum...</p>
    </main>
    <footer>
      <div class="container w-100">
        <div class="row">
          <div class="col">©2024 Company Name</div>
          <div class="col text-right">Some additional info.</div>
        </div>
      </div>
    </footer>
    <script src="https://litestrap.dev/dist/litestrap.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

styles.css:

@import url("your choosen font url");

body {
  font-family: "font-family", sans-serif;
}

nav span {
  font-size: 3rem;
  font-weight: 800;
  color: var(--ls-color-white);
  text-shadow: var(--ls-shadow-md);
}

app.js:

document.addEventListener("DOMContentLoaded", () => {
  const ls = new LiteStrap();
});