index.html

---
layout: base
title: Home
---

<div class="py-5 text-light" style="background-color: black;">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h1 class="display-5 fw-bold">rainboot.css</h1>
        <h3 class="mt-3">Bootstrap with the look of Cloudscape</h3>
        <p>
          rainboot.css is a Bootstrap theme powered by Cloudscape styles.
          Bridge the gap in places where Cloudscape's React components don't
          fit while still having a consistent look across your applications.
        </p>
        <div class="mt-5">
          <a class="btn btn-primary my-2 me-2" href="{{ site.baseurl }}/documentation/quickstart">Get started</a>
          <a class="btn btn-primary my-2" href="https://github.com/rainboot/rainboot.css/tree/main/examples">
            See examples
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<div>
  <div class="container py-5">
    <div class="row my-5">
      <div class="col-md-6 order-1 d-flex justify-content-center">
        <img src="{{ site.baseurl }}/assets/images/img01.png" class="rounded w-50" />
      </div>
      <div class="col-md-6 order-2 d-flex flex-column justify-content-center">
        <h1 class="my-3">Driven by Cloudscape</h1>
        <p>
          rainboot.css emulates the look of Cloudscape by generating directly
          from Cloudscape's <a href="https://cloudscape.design/foundation/visual-foundation/design-tokens">design
            tokens</a>. This means it also interops with Cloudscape custom
          theming. Keep your Cloudscape and rainboot.css themes in sync with a
          single source of truth for styles.
        </p>
      </div>
    </div>
    <div class="row my-5">
      <div class="col-md-6 order-1 order-md-2 d-flex justify-content-center">
        <img src="{{ site.baseurl }}/assets/images/img02.png" class="rounded w-100" />
      </div>
      <div class="col-md-6 order-2 order-md-1 d-flex flex-column justify-content-center">
        <h1 class="my-3">Still just Bootstrap</h1>
        <p>
          rainboot.css is still the Bootstrap you know and love. Fed up with
          complicated build systems? Hate always having to learn 20XX's next
          popular JS framework™? Then don't! Drop rainboot.css into your HTML
          and pretend like React was never invented.
        </p>
      </div>
    </div>
    <div class="row my-5">
      <div class="col-md-6 order-1 d-flex justify-content-center">
        <img src="{{ site.baseurl }}/assets/images/img03.png" class="rounded w-50" />
      </div>
      <div class="col-md-6 order-2 d-flex flex-column justify-content-center">
        <h1 class="my-3">Open-source</h1>
        <p>
          rainboot.css is open source. Found a bug? Want a feature? File an
          issue or make a contribution and then yell at me until I figure out
          what to do. Tired of waiting? Just fork us and do your own thing!
        </p>
      </div>
    </div>
  </div>
</div>

<div class="py-5 w-100 d-flex flex-column align-items-center text-light" style="background-color: black;">
  <h1 class="display-5 fw-bold">Get started!</h1>
  <div class="mt-3">
    <a class="btn btn-primary" href="https://github.com/rainboot/rainboot.css/releases">
      See releases
    </a>
  </div>
</div>