discord-css

Hello World!

Usage no npm install needed!

<script type="module">
  import discordCss from 'https://cdn.skypack.dev/discord-css';
</script>

README

Quick Start

You can do these to get started quickly:

  • npm install discord-theme

  • yarn add discord-theme

Setup

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/discord-css@1.0.2/css/main.css">

Examples

Input

<input class="dinput" name="input" value="This is text">

input

Checkbox

<label class="check width-40"> <!-- width-10, width-15, width-20, width-25, width-35, width-40, width-45, width-50 -->
  Check box
<input type="checkbox" id="ch">
  <span class="checkmark"></span>
</label>

checkbox

Multi-checkbox

<label class="multicheckbox">Item 1
  <input type="checkbox" name="checkboxitem1">
  <span class="checkmarkcustom"></span>
</label>

<label class="multicheckbox">Item 2
  <input type="checkbox" name="checkboxitem2">
  <span class="checkmarkcustom"></span>
</label>

<label class="multicheckbox">Item 3
  <input type="checkbox" name="checkboxitem3">
  <span class="checkmarkcustom"></span>
</label>

<label class="multicheckbox">Item 4
  <input type="checkbox" name="checkboxitem2">
  <span class="checkmarkcustom"></span>
</label>

multicheckbox

Buttons

  <a href="#" class="dbtn">Button</a>
  <a href="#" class="dbtn-red">Button</a>
  <a href="#" class="dbtn-outline">Button</a>
  <a href="#" class="dbtn-red">Button</a>
  <a href="#" class="dbtn-outline-red">Button</a>
  <a href="#" class="dbtn-link">Button</a>
  <a href="#" class="dbtn-link-blue">Link Button</a>

buttons

Little Checkbox

  <label class="checkbox">
    <input type="checkbox" name="rule">
      <span class="checkbox">
        <span></span>
      </span>
  </label>

chckbox