Getting started

Create a new index.html file in your project root and copy the HTML code below you'll need to get started.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link href="https://replitcss.replit.app/replit.css" rel="stylesheet" type="text/css"/>
  </head>
  <body>
    <section class="container">
    </section>
    <script src="https://replitcss.replit.app/replit.js"></script>
  </body>
</html>

The main body content will go in the container classes, while the navbar will go outside of the container section and at the beginning.

Navbar

Our fully responsive navbar, including dropdowns, buttons and a menu on mobile for maximum interactivity.

<nav class="navbar">
  <a href="#" class="nav-logo"><img class="align-middle" src="image.png"/>Title</a>
  <ul class="nav-links">
    <input type="checkbox" id="checkbox_toggle"/>
    <label for="checkbox_toggle" class="hamburger">☰</label>
    <div class="menu">
      <li class="nav-dropdown">
        <a href="#" class="dropdown-link">Docs</a>
        <ul class="dropdown">
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
          <li><a href="#">Item</a></li>
        </ul>
      </li>
      <li><a href="#">Link</a></li>
      <li><a href="#">About</a></li>
      <li><a class="btn btn-primary" href="#">Link</a></li>
    </div>
  </ul>
</nav>

Added in v1.3.6

You can also add a nav-alert for further, exclusive content.

<div class="nav-alert" id="nav-alert">Content<span class="nav-alert-delete" id="nav-alert-delete"></span></div>

Headers

Our toolkit includes basic styling and other utilities for headers.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

You can additionally add the text-glow utility class to create a glowing box shadow similar to Replit.

<h4 class="text-glow">Text glow</h4>

Text glow

Text

Paragraph, bold, italic, underlined, strikethrough, and link text.

<b>Bold text</b>
<i>Italic text</i>
<s>Strikethrough text</s>
<u>Underline text</u>
<p>Paragraph text</p>

Paragraph text

Bold text Italic text ~~Strikethrough text~~ Underline text Link

You can also use our special utility class link-accent to make individual links look better and more interactive, as depicted in the homepage.

<a class="link-accent" href="#">Link</a>

Link

Lists

A basic unordered and ordered list.

<ul class="list-container">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>
<ol class="list-container">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>

List item
List item
List item
List item

List item
List item
List item
List item

Images

<img src="image.jpg"/>

Buttons

This library includes several pre-defined buttons, each serving their own purpose. First up is perhaps the three most commonly used buttons on Replit.

<button class="btn btn-primary">Primary button</button>
<button class="btn btn-secondary">Secondary button</button>
<button class="btn btn-outline-secondary">Secondary outline button</button>

Colorful buttons to make your website look more vibrant.

<button class="btn btn-red">Red button</button>
<button class="btn btn-orange">Orange button</button>
<button class="btn btn-yellow">Yellow button</button>
<button class="btn btn-lime">Lime button</button>
<button class="btn btn-green">Button button</button>
<button class="btn btn-teal">Teal button</button>
<button class="btn btn-blue">Blue button</button>
<button class="btn btn-purple">Purple button</button>
<button class="btn btn-magenta">Magenta button</button>
<button class="btn btn-pink">Pink button</button>
<button class="btn btn-grey">Gray button</button>
<button class="btn btn-brown">Brown button</button>

Large and small buttons.

<button class="btn btn-secondary btn-lg">Large button</button>
<button class="btn btn-secondary btn-sm">Small button</button>

Disabled buttons with a slight bit of shaded opacity to emphasize the "disabled" effect.

<button class="btn btn-primary" disabled>Disabled button</button>
<button class="btn btn-outline-secondary" disabled>Disabled button</button>

Added in v1.3.6

Replit's default Auth button, using auth.js.

<script src="https://replitcss.replit.app/auth.js" authed="location.replace('/')"></script>

Inputs

A basic input and textarea element, found all over Replit.

<input type="text" placeholder="Input"/>
<textarea placeholder="Textarea"></textarea>

Be sure to assign the type attribute to a value for a normal input tag to work.

You can also add the disabled state to make inputs seem untypable.

Added in v1.2.1

A simple dropdown with the select tag.

<select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  </select>

Select files with our very own file selector.

<div class="file-container">
  <label class="btn btn-primary" for="upload">Upload file</label>
  <input id="upload" type="file">
</div>

Upload file

A toggle switch. You can add the checked state to make the toggle switch checked by default.

<label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label>

You can also apply the checked state to checkbox inputs to set the checked checkboxes.

<label class="checkbox-container">Option 1
  <input type="checkbox" checked>
  <span class="checkbox-mark"></span>
</label> 
<label class="checkbox-container">Option 2
  <input type="checkbox">
  <span class="checkbox-mark"></span>
</label>
<label class="checkbox-container">Option 3
  <input type="checkbox">
  <span class="checkbox-mark"></span>
</label>
<label class="checkbox-container">Disabled option
  <input type="checkbox" disabled>
  <span class="checkbox-mark"></span>
</label>

Option 1 Option 2 Option 3 Disabled option

This radio input will have very similar features to the checkbox input, which means that you can also apply the checked state to check elements by default.

<label class="radio-container">Option 1
  <input type="radio" name="radio" checked>
  <span class="radio-mark"></span>
</label> 
<label class="radio-container">Option 2
  <input type="radio" name="radio">
  <span class="radio-mark"></span>
</label>
<label class="radio-container">Option 3
  <input type="radio" name="radio">
  <span class="radio-mark"></span>
</label>
<label class="radio-container">Disabled option
  <input type="radio" name="radio" disabled>
  <span class="radio-mark"></span>
</label>

Option 1 Option 2 Option 3 Disabled option

Tables

Header	Header
Item	Item
Item	Item
Item	Item

Cards

Cards, built fully with flexbox. The flexbox will fit two cards per row, but you can change that by adding flex: 0 1 <percentage>, where the percentage is 1 divided by the number of cards you want per row minus 2-3% for the gap space of each card. Note that any cards extra will be displayed as the full, body width.

<div class="card-container">
  <div class="card">
    <img class="card-cover" src="https://replitcss.replit.app/image.jpg" />
    <h2 class="title">Card title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc mi ipsum faucibus vitae aliquet. Odio eu feugiat pretium nibh ipsum. Aliquam eleifend mi in nulla posuere. A cras semper auctor neque vitae tempus quam.</p>
  </div>
  <div class="card">
    <img class="card-cover" src="https://replitcss.replit.app/image.jpg" />
    <h2 class="title">Card title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc mi ipsum faucibus vitae aliquet. Odio eu feugiat pretium nibh ipsum. Aliquam eleifend mi in nulla posuere. A cras semper auctor neque vitae tempus quam.</p>
  </div>
  <div class="card">
    <img class="card-cover" src="https://replitcss.replit.app/image.jpg" />
    <h2 class="title">Card title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc mi ipsum faucibus vitae aliquet. Odio eu feugiat pretium nibh ipsum. Aliquam eleifend mi in nulla posuere. A cras semper auctor neque vitae tempus quam.</p>
  </div>
</div>

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc mi ipsum faucibus vitae aliquet. Odio eu feugiat pretium nibh ipsum. Aliquam eleifend mi in nulla posuere. A cras semper auctor neque vitae tempus quam.

Card title

Spinners

A cool and sastifying spinner animation.

<span class="spinner"></span>

Alerts

An alert that uses color to convey hints. Green for positive, primary for normal, and red for negative.

<div class="alert alert-primary">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle-fill alert-icon" viewBox="0 0 16 16">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  </svg>Primary alert content.
</div>
<div class="alert alert-positive">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle-fill alert-icon" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </svg>
Positive alert content.</div>
<div class="alert alert-negative">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-triangle-fill alert-icon" viewBox="0 0 16 16">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </svg>
Negative alert content.</div>

Primary alert content.

Positive alert content.

Negative alert content.

Badges

Badges to signify roles, stats, and way more. Since this uses the em unit, you will have to put this in a header or p tag in order for the size to be displayed relative to the parent.

<p>@username
  <span class="badge badge-yellow">Admin</span>
  <span class="badge badge-teal">Community Moderator</span>
  <span class="badge badge-green">Detective</span>
  <span class="badge badge-blue">Verified</span>
  <span class="badge badge-red">Replit Rep</span>
  <span class="badge badge-purple">Patron</span>
  <span class="badge badge-orange">Core</span>
</p>

@username Admin Community Moderator Detective Verified Replit Rep Patron Core

Footer

A decent footer to finish your website. You may need to add margin-top to make it fixed to the bottom of the page.

<div class="footer">© Company, Inc.</div>