@polight/lego/docs/_site/index.html

Tiny Web Components lib for future-proof HTML mentors

<title>LEGO – Native Web-Components for Low-Tech Lovers ♥️</title>
<meta charset="UTF-8" />

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />

<div class="px-4 py-5 my-5 text-center">
  <img class="d-block mx-auto mb-4" src="./assets/images/lego.svg" alt="Lego Web components" />
  <h1 class="display-5 fw-bold">Web-Components for Low-Tech Lovers</h1>
  <div class="col-lg-6 mx-auto">
    <p class="lead mb-4">Lego is a minimalist 🪶 native Web-Components library for low-tech lovers ♥️ 
      with serious needs of long-term future-proof applications.</p>
    <p class="lead mb-4">Read the documentation for installation, usage instruction and hacking the tool.</p>
    <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
      <a href="./v2" class="btn btn-primary btn-lg px-4 gap-3">Current version (v2.0 Alpha)</a>
      <a href="./v1" class="btn btn-outline-secondary btn-lg px-4">Previous version (v1 Stable)</a>
    </div>
  </div>
</div>

<style>
  h1.display-5 {
    font-size: 2rem;
  }
  img {
    min-width: 400px;
    max-width: 600px;
  }
</style>