SNES.CSS

SNES.CSS is a css framework inspired in the 90's 16bit videogames, bringing a nostalgic pixel art style and taking a high learning and inspiration from B.C.Rikko's framework: nes.css.

Installation

You can install SNES.CSS via npm or directly via CDN. Please, read the complete instructions here.

Details

This framework doesn't provides layout styles or javascript code, this makes it a nice fit with modern frameworks integrations such as React.js or Tailwind.

Texts

Normal

Nature

Plumber

Sunshine

Ocean

Turquoise

Phantom

Rose

Galaxy

Ember


  <p>Normal</p>
  <p class="text-nature-color">Nature</p>
  <p class="text-plumber-color">Plumber</p>
  <p class="text-sunshine-color">Sunshine</p>
  <p class="text-ocean-color">Ocean</p>
  <p class="text-turquoise-color">Turquoise</p>
  <p class="text-phantom-color">Phantom</p>
  <p class="text-rose-color">Rose</p>
  <p class="text-galaxy-color">Galaxy</p>
  <p class="text-ember-color">Ember</p>

Links

Links can have any of the main colors with different underline color


  <a href="#" class="snes-link">Normal</a>
  <a href="#" class="snes-link text-nature-color">Nature</a>
  <a href="#" class="snes-link text-plumber-color">Plumber</a>
  <a href="#" class="snes-link text-sunshine-color">Sunshine</a>
  <a href="#" class="snes-link text-ocean-color">Ocean</a>
  <a href="#" class="snes-link text-turquoise-color">Turquoise</a>
  <a href="#" class="snes-link text-phantom-color">Phantom</a>
  <a href="#" class="snes-link text-rose-color">Rose</a>
  <a href="#" class="snes-link text-galaxy-color">Galaxy</a>
  <a href="#" class="snes-link text-ember-color">Ember</a>

Buttons


  <button class="snes-button">Nature</button>
  <button class="snes-button has-plumber-color">Plumber</button>
  <button class="snes-button has-sunshine-color">Sunshine</button>
  <button class="snes-button has-ocean-color">Ocean</button>
  <button class="snes-button has-turquoise-color">Turquoise</button>
  <button class="snes-button has-phantom-color">Phantom</button>
  <button class="snes-button has-rose-color">Rose</button>
  <button class="snes-button has-galaxy-color">Galaxy</button>
  <button class="snes-button has-ember-color">Ember</button>
  <button class="snes-button has-ember-color" disabled> Disabled</button>

Lists

List icons can be of any of the main colors

  • Sorry, Mario
  • But the Princess
  • Is in another castle
  • Ma'am, you're mistaken.
  • I'm not a pet.
  • I'm a Knight.
  • And master swordsman.
  • Estuans interius
  • Ira vehementi
  • SEPHIROTH!
  • It's easy to forget
  • what a sin is
  • in the middle of a battlefield

  <ul class="snes-list is-plumber-list-color">
    <li>Sorry, Mario</li>
    <li>But the Princess</li>
    <li>Is in another castle</li>
  </ul>
  <ul class="snes-list is-nature-list-color">
    <li>Ma'am, you're mistaken.</li>
    <li>I'm not a pet.</li>
    <li>I'm a Knight.</li>
    <li>And master swordsman.</li>
  </ul>
  <ul class="snes-list is-phantom-list-color">
    <li>Estuans interius</li>
    <li>Ira vehementi</li>
    <li>SEPHIROTH!</li>
  </ul>
  <ul class="snes-list is-ocean-list-color">
    <li>It's easy to forget</li>
    <li>what a sin is</li>
    <li>in the middle of a battlefield</li>
  </ul>

Inputs

Selects

Textareas

Range controls

Range tracks can have of any of the main colors and range thumbs can have any of the background colors

Radio controls

The Radio control icon colors can be selected individually or as a group

Checkboxes

The checkbox icon colors can be selected individually or as a group

Blockquotes

Blockquotes can have a background color with a darker version of every main color

Papers, please!

What is a man? A miserable little pile of secrets.

Once something's alive... it doesn't die easy... You have to bury every last cinder!

No gods or kings. Only man.


  <blockquote class="snes-blockquote">
    <p>Papers, please!</p>
  </blockquote>
  <blockquote class="snes-blockquote has-plumber-bg">
    <p>What is a man? A miserable little pile of secrets.</p>
  </blockquote>
  <blockquote class="snes-blockquote has-phantom-bg">
    <p>
      Once something's alive... it doesn't die easy... You have to bury
      every last cinder!
    </p>
  </blockquote>
  <blockquote class="snes-blockquote has-ember-bg">
    <p>No gods or kings. Only man.</p>
  </blockquote>