NES.css

NES-style CSS Framework.

Fork me
on GitHub

Buttons

Copied!
<button type="button" class="nes-btn">Normal</button>
<button type="button" class="nes-btn is-primary">Primary</button>
<button type="button" class="nes-btn is-success">Success</button>
<button type="button" class="nes-btn is-warning">Warning</button>
<button type="button" class="nes-btn is-error">Error</button>
<button type="button" class="nes-btn is-disabled">Disabled</button>

Containers

Container.is-centered

Good morning. Thou hast had a good night's sleep, I hope.

Container.is-dark

Good morning. Thou hast had a good night's sleep, I hope.

Good morning. Thou hast had a good night's sleep, I hope.

Good morning. Thou hast had a good night's sleep, I hope.

Copied!
<div class="nes-container with-title is-centered">
  <p class="title">Container.is-centered</p>
  <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
</div>
<div class="nes-container is-dark with-title">
  <p class="title">Container.is-dark</p>
  <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
</div>
<div class="nes-container is-rounded">
  <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
</div>
<div class="nes-container is-rounded is-dark">
  <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
</div>

Dialogs

Dialog

Alert: this is a dialog.

Dark dialog

Alert: this is a dialog.

Rounded dialog

Alert: this is a dialog.

Dark and Rounded dialog

Alert: this is a dialog.

NES.css does not include any JavaScript. If you want to use dialog element other than Chrome, you need polyfill.

Copied!
<section>
  <button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-default').showModal();">Open dialog</button>
  <dialog class="nes-dialog" id="dialog-default">
    <form method="dialog">
      <p class="title">Dialog</p>
      <p>Alert: this is a dialog.</p>
      <menu class="dialog-menu">
        <button class="nes-btn">Cancel</button>
        <button class="nes-btn is-primary">Confirm</button>
      </menu>
    </form>
  </dialog>
</section>

<section>
  <button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-dark').showModal();">Open dark dialog</button>
  <dialog class="nes-dialog is-dark" id="dialog-dark">
    <form method="dialog">
      <p class="title">Dark dialog</p>
      <p>Alert: this is a dialog.</p>
      <menu class="dialog-menu">
        <button class="nes-btn">Cancel</button>
        <button class="nes-btn is-primary">Confirm</button>
      </menu>
    </form>
  </dialog>
</section>

<section>
  <button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-rounded').showModal();">Open rounded dialog</button>
  <dialog class="nes-dialog is-rounded" id="dialog-rounded">
    <form method="dialog">
      <p class="title">Rounded dialog</p>
      <p>Alert: this is a dialog.</p>
      <menu class="dialog-menu">
        <button class="nes-btn">Cancel</button>
        <button class="nes-btn is-primary">Confirm</button>
      </menu>
    </form>
  </dialog>
</section>

<section>
  <button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-dark-rounded').showModal();">Open dark and rounded dialog</button>
  <dialog class="nes-dialog is-dark is-rounded" id="dialog-dark-rounded">
    <form method="dialog">
      <p class="title">Dark and Rounded dialog</p>
      <p>Alert: this is a dialog.</p>
      <menu class="dialog-menu">
        <button class="nes-btn">Cancel</button>
        <button class="nes-btn is-primary">Confirm</button>
      </menu>
    </form>
  </dialog>
</section>

Radios

Copied!
<label>
  <input type="radio" class="nes-radio" name="answer" checked />
  <span>Yes</span>
</label>
<label>
  <input type="radio" class="nes-radio" name="answer" />
  <span>No</span>
</label>

Checkboxes

Copied!
<label>
  <input type="checkbox" class="nes-checkbox" checked />
  <span>Enable</span>
</label>
<label>
  <input type="checkbox" class="nes-checkbox is-dark" checked />
  <span>Dark</span>
</label>

Avatars

Gravatar Image Example Gravatar Image Example Gravatar Image Example Gravatar Image Example Gravatar Image Example Gravatar Image Example Gravatar Image Example Gravatar Image Example
Copied!
<img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-small" alt="Gravatar Image Example" style="image-rendering: pixelated;">
<img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar" alt="Gravatar Image Example" style="image-rendering: pixelated;">
<img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-medium" alt="Gravatar Image Example" style="image-rendering: pixelated;">
<img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-large" alt="Gravatar Image Example" style="image-rendering: pixelated;">
<img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-rounded" alt="Gravatar Image Example" style="image-rendering: pixelated;">
<img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-small is-rounded" alt="Gravatar Image Example" style="image-rendering: pixelated;">
<img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-medium is-rounded" alt="Gravatar Image Example" style="image-rendering: pixelated;">
<img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-large is-rounded" alt="Gravatar Image Example" style="image-rendering: pixelated;">

Form

Copied!
<div class="nes-field">
  <label for="name_field">Your name</label>
  <input type="text" id="name_field" class="nes-input">
</div>
<div class="nes-field is-inline">
  <label for="inline_field">.input.is-success</label>
  <input type="text" id="inline_field" class="nes-input is-success" placeholder="NES.css">
</div>
<div class="nes-field is-inline">
  <label for="warning_field">.input.is-warning</label>
  <input type="text" id="warning_field" class="nes-input is-warning" placeholder="8bit.css">
</div>
<div class="nes-field is-inline">
  <label for="error_field">.input.is-error</label>
  <input type="text" id="error_field" class="nes-input is-error" placeholder="awesome.css">
</div>
<div class="field">
  <label for="textarea_field">Textarea</label>
  <textarea id="textarea_field" class="nes-textarea"></textarea>
</div>

<div id="selects" class="selects">
  <div class="nes-select">
    <select required>
      <option value="" disabled selected hidden>Select...</option>
      <option value="0">To be</option>
      <option value="1">Not to be</option>
    </select>
  </div>
  <div class="nes-select is-success">
    <select required>
      <option value="" disabled selected hidden>Select...</option>
      <option value="0">To be</option>
      <option value="1">Not to be</option>
    </select>
  </div>
  <div class="nes-select is-warning">
    <select required>
      <option value="" disabled selected hidden>Select...</option>
      <option value="0">To be</option>
      <option value="1">Not to be</option>
    </select>
  </div>
  <div class="nes-select is-error">
    <select required>
      <option value="" disabled selected hidden>Select...</option>
      <option value="0">To be</option>
      <option value="1">Not to be</option>
    </select>
  </div>
</div>

Balloons

Hello NES.css

Good morning. Thou hast had a good night's sleep, I hope.

Copied!
<div class="message -left">
  <i class="nes-bcrikko"></i>
  <div class="nes-balloon from-left">
    <p>Hello NES.css</p>
  </div>
</div>
<div class="message -right">
  <div class="nes-balloon from-right">
    <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
  </div>
  <i class="nes-bcrikko"></i>
</div>

Lists

  • Good morning.
  • Thou hast had a good night's sleep, I hope.
  • Thou hast had a good afternoon
  • Good night.
  • Good morning.
  • Thou hast had a good night's sleep, I hope.
  • Thou hast had a good afternoon
  • Good night.
Copied!
<div class="lists">
  <ul class="nes-list is-disc">
    <li>Good morning.</li>
    <li>Thou hast had a good night's sleep, I hope.</li>
    <li>Thou hast had a good afternoon</li>
    <li>Good night.</li>
  </ul>
</div>

<div class="lists">
  <ul class="nes-list is-circle">
    <li>Good morning.</li>
    <li>Thou hast had a good night's sleep, I hope.</li>
    <li>Thou hast had a good afternoon</li>
    <li>Good night.</li>
  </ul>
</div>

Texts

Normal Primary Success Warning Error Disabled
Copied!
<span class="nes-text">Normal</span>
<span class="nes-text is-primary">Primary</span>
<span class="nes-text is-success">Success</span>
<span class="nes-text is-warning">Warning</span>
<span class="nes-text is-error">Error</span>
<span class="nes-text is-disabled">Disabled</span>

Tables

Table.is-bordered Table.is-centered Table.is-centered Table.is-centered
Thou hast had a good morning Thou hast had a good afternoon Thou hast had a good evening Thou hast had a good night
Thou hast had a good morning Thou hast had a good afternoon Thou hast had a good evening Thou hast had a good night
Table.is-dark Table.is-bordered Table.is-bordered Table.is-bordered
Thou hast had a good morning Thou hast had a good afternon Thou hast had a good evening Thou hast had a good night
Thou hast had a good morning Thou hast had a good afternoon Thou hast had a good afternoon Thou hast had a good afternoon
Copied!
<div class="nes-table-responsive">
  <table class="nes-table is-bordered is-centered">
    <thead>
      <tr>
        <th>Table.is-bordered</th>
        <th>Table.is-centered</th>
        <th>Table.is-centered</th>
        <th>Table.is-centered</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Thou hast had a good morning</td>
        <td>Thou hast had a good afternoon</td>
        <td>Thou hast had a good evening</td>
        <td>Thou hast had a good night</td>
      </tr>
      <tr>
        <td>Thou hast had a good morning</td>
        <td>Thou hast had a good afternoon</td>
        <td>Thou hast had a good evening</td>
        <td>Thou hast had a good night</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="nes-table-responsive">
  <table class="nes-table is-bordered is-dark">
    <thead>
      <tr>
        <th>Table.is-dark</th>
        <th>Table.is-bordered</th>
        <th>Table.is-bordered</th>
        <th>Table.is-bordered</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Thou hast had a good morning</td>
        <td>Thou hast had a good afternon</td>
        <td>Thou hast had a good evening</td>
        <td>Thou hast had a good night</td>
      </tr>
      <tr>
        <td>Thou hast had a good morning</td>
        <td>Thou hast had a good afternoon</td>
        <td>Thou hast had a good afternoon</td>
        <td>Thou hast had a good afternoon</td>
      </tr>
    </tbody>
  </table>
</div>

Progress

Copied!
<progress class="nes-progress" value="90" max="100"></progress>
<progress class="nes-progress is-primary" value="80" max="100"></progress>
<progress class="nes-progress is-success" value="50" max="100"></progress>
<progress class="nes-progress is-warning" value="30" max="100"></progress>
<progress class="nes-progress is-error" value="10" max="100"></progress>
<progress class="nes-progress is-pattern" value="50" max="100"></progress>

Badges

NES.css is a great framework! npm 1.1.0 test 100% Icons hi Text
Copied!
<a href="#" class="nes-badge">
  <span class="is-dark">NES.css</span>
</a>
<a href="#" class="nes-badge">
  <span class="is-primary">is</span>
</a>
<a href="#" class="nes-badge">
  <span class="is-success">a</span>
</a>
<a href="#" class="nes-badge">
  <span class="is-warning">great</span>
</a>
<a href="#" class="nes-badge">
  <span class="is-error">framework!</span>
</a>
<a href="#" class="nes-badge is-splited">
  <span class="is-dark">npm</span>
  <span class="is-primary">1.1.0</span>
</a>
<a href="#" class="nes-badge is-splited">
  <span class="is-dark">test</span>
  <span class="is-success">100%</span>
</a>
<a href="#" class="nes-badge is-icon">
  <span class="is-warning">
      <i class="nes-icon star is-small"></i>
  </span>
  <span class="is-primary">Icons</span>
</a>
<a href="#" class="nes-badge is-icon">
  <span class="is-dark">hi</span>
  <span class="is-warning">Text</span>
</a>

Icons

Reaction

Copied!
<i class="nes-icon heart is-small"></i>
<i class="nes-icon heart"></i>
<i class="nes-icon heart is-medium"></i>
<i class="nes-icon heart is-large"></i>
<i class="nes-icon heart is-empty"></i>

<i class="nes-icon star is-small"></i>
<i class="nes-icon star"></i>
<i class="nes-icon star is-medium"></i>
<i class="nes-icon star is-large"></i>

<i class="nes-icon star is-half is-small"></i>
<i class="nes-icon star is-half"></i>
<i class="nes-icon star is-half is-medium"></i>
<i class="nes-icon star is-half is-large"></i>

<i class="nes-icon star is-transparent is-small"></i>
<i class="nes-icon star is-transparent"></i>
<i class="nes-icon star is-transparent is-medium"></i>
<i class="nes-icon star is-transparent is-large"></i>

<i class="nes-icon star is-empty"></i>

<i class="nes-icon like is-small"></i>
<i class="nes-icon like"></i>
<i class="nes-icon like is-medium"></i>
<i class="nes-icon like is-large"></i>
<i class="nes-icon like is-empty"></i>

SNS

Copied!
<i class="nes-icon twitter is-small"></i>
<i class="nes-icon twitter"></i>
<i class="nes-icon twitter is-medium"></i>
<i class="nes-icon twitter is-large"></i>

<i class="nes-icon facebook is-small"></i>
<i class="nes-icon facebook"></i>
<i class="nes-icon facebook is-medium"></i>
<i class="nes-icon facebook is-large"></i>

<i class="nes-icon github is-small"></i>
<i class="nes-icon github"></i>
<i class="nes-icon github is-medium"></i>
<i class="nes-icon github is-large"></i>

<i class="nes-icon youtube is-small"></i>
<i class="nes-icon youtube"></i>
<i class="nes-icon youtube is-medium"></i>
<i class="nes-icon youtube is-large"></i>

<i class="nes-icon google is-small"></i>
<i class="nes-icon google"></i>
<i class="nes-icon google is-medium"></i>
<i class="nes-icon google is-large"></i>

<i class="nes-icon medium is-small"></i>
<i class="nes-icon medium"></i>
<i class="nes-icon medium is-medium"></i>
<i class="nes-icon medium is-large"></i>

<i class="nes-icon twitch is-small"></i>
<i class="nes-icon twitch"></i>
<i class="nes-icon twitch is-medium"></i>
<i class="nes-icon twitch is-large"></i>

<i class="nes-icon reddit is-small"></i>
<i class="nes-icon reddit"></i>
<i class="nes-icon reddit is-medium"></i>
<i class="nes-icon reddit is-large"></i>

<i class="nes-icon whatsapp is-small"></i>
<i class="nes-icon whatsapp"></i>
<i class="nes-icon whatsapp is-medium"></i>
<i class="nes-icon whatsapp is-large"></i>

<i class="nes-icon gmail is-small"></i>
<i class="nes-icon gmail"></i>
<i class="nes-icon gmail is-medium"></i>
<i class="nes-icon gmail is-large"></i>

<i class="nes-icon linkedin is-small"></i>
<i class="nes-icon linkedin"></i>
<i class="nes-icon linkedin is-medium"></i>
<i class="nes-icon linkedin is-large"></i>

Others

Copied!
<i class="nes-icon close is-small"></i>
<i class="nes-icon close"></i>
<i class="nes-icon close is-medium"></i>
<i class="nes-icon close is-large"></i>

<i class="nes-octocat animate"></i>

<i class="nes-icon trophy is-small"></i>
<i class="nes-icon trophy"></i>
<i class="nes-icon trophy is-medium"></i>
<i class="nes-icon trophy is-large"></i>

<i class="nes-icon coin is-small"></i>
<i class="nes-icon coin"></i>
<i class="nes-icon coin is-medium"></i>
<i class="nes-icon coin is-large"></i>

<i class="nes-mario"></i>
<i class="nes-ash"></i>
<i class="nes-pokeball"></i>

<i class="nes-bulbasaur"></i>
<i class="nes-charmander"></i>
<i class="nes-squirtle"></i>

<i class="nes-smartphone"></i>
<i class="nes-phone"></i>
<i class="nes-kirby"></i>

Controllers

Copied!
<i class="nes-logo"></i>
<i class="nes-jp-logo"></i>
<i class="snes-logo"></i>
<i class="snes-jp-logo"></i>