GAMEBOY.CSS

Game Boy console image

The pixel-perfect CSS framework for retro-inspired projects.

Show Code 

<section class="gb-hero">
  <h1>GAMEBOY.CSS</h1>
  <img width="100" class="no-border" src="/assets/gameboy.webp" alt="Game Boy console image" />
  <p>The pixel-perfect CSS framework for retro-inspired projects.</p>
  <button type="button" class="button primary">Get Started</button>
</section>

Card

Use these containers to hold various in-game information.

Game Save File

This is a brief description of your saved game file.

Show Code 

<article class="gb-card">
  <h3 class="title">Game Save File</h3>
  <p>This is a brief description of your saved game file.</p>
</article>

Item Card

A simple card container to display an item in your inventory.

Show Code 

<div class="gb-card primary">
  <h4 class="title">Item Card</h4>
  <p>A simple card container to display an item in your inventory.</p>
</div>

Quest Complete!

A success message after finishing a quest.

Show Code 

<div class="gb-card secondary">
  <h4 class="title">Quest Complete!</h4>
  <p>A success message after finishing a quest.</p>
</div>

tiny ball tiny ball tiny ball tiny ball

Pikachu Stats

HP: 20

ATTACK: 11

DEFENSE: 8

Show Code 

<div class="gb-card pokemon-card">
  <img src="assets/tiny-ball.webp" class="no-border pokemon-corner pokemon-corner-top-left"></img>
  <img src="assets/tiny-ball.webp" class="no-border pokemon-corner pokemon-corner-top-right"></img>
  <img src="assets/tiny-ball.webp" class="no-border pokemon-corner pokemon-corner-bottom-left"></img>
  <img src="assets/tiny-ball.webp" class="no-border pokemon-corner pokemon-corner-bottom-right"></img>
  <h3 class="title">Pikachu Stats</h3>
  <p>HP: 20</p>
  <p>ATTACK: 11</p>
  <p>DEFENSE: 8</p>
</div>

World 1-1

The first level with mushrooms and coins.

World 1-2

An underground level filled with puzzles.

World 1-3

An above-the-clouds level, be careful not to fall!

World 1-4

The first castle, get ready for the boss fight!

Show Code 

<section class="gb-grid">
  <div class="gb-card">
    <h4 class="title">World 1-1</h4>
    <p>The first level with mushrooms and coins.</p>
  </div>
  <div class="gb-card">
    <h4 class="title">World 1-2</h4>
    <p>An underground level filled with puzzles.</p>
  </div>
</section>

This is a dialog box. Press A to continue.
Show Code 

<button type="button" data-gb-dialog-target="#example-dialog">
  Show Dialog
</button>

<dialog id="example-dialog">
  <p>This is a dialog box. Press A to continue.</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

Typography

This is how various text types will appear in your game.

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6
Show Code 

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

This is a paragraph of the story. It contains monster descriptions, spells you've learned, and a link Awakening. Don't forget to highlight important hints from NPCs!

"Hello! Sorry I'm not home, but I have gone to rescue my friends who were captured by Bowser." - Yoshi 🐾
Show Code 

<blockquote>
  "It's dangerous to go alone! Take this."
  <cite>- Old Man</cite>
</blockquote>
          

// Code blocks should look retro!
function onStart() {
  console.log("Welcome to Hyrule!");
}
Show Code 

<pre><code>
  // Code blocks should look retro!
  function onStart() {
    console.log("Welcome to Hyrule!");
  }
</code></pre>

Interactive Elements

Interactive elements that can be found in game menus or on screen.

Buttons

Show Code 

<button type="button">Default</button>
<button type="button" class="button dark">Dark</button>
<button type="button" class="button border">Border</button>
<button type="button" disabled>Disabled</button>

Details (Accordion)

Default

A legendary sword said to seal the darkness.

Show Code 

<details>
  <summary>Default</summary>
  <p>A legendary sword said to seal the darkness.</p>
</details>

.detail-card

A legendary sword said to seal the darkness.

Show Code 

<details class="detail-card">
  <summary>Default</summary>
  <p>A legendary sword said to seal the darkness.</p>
</details>

.detail-group

Item Potion

Heals 20 HP.

Item Ether

Restores 50 MP.

Item Phoenix Down

Revives a fallen ally.

Show Code 

<div class="detail-group">
  <details>...</details>
  <details>...</details>
  <details>...</details>
</div>

Progress Bar

Loading saved data...

Show Code 

<h3>Progress Bar</h3>
<p>Loading saved data...</p>
<progress value="75" max="100"></progress>

Lists

Different list styles for in-game inventory or items.

Unordered List Default

Show Code 

<h3>Unordered List</h3>
<ul>
  <li>Potion</li>
  <li>Ether</li>
  <li>Phoenix Down</li>
</ul>

Unordered List Star

Show Code 

<h3>Unordered List</h3>
<ul class="star">
  <li>Starman</li>
  <li>Super Star</li>
  <li>Power Star</li>
</ul>

Unordered List Coin

Show Code 

<h3>Unordered List</h3>
<ul class="coin">
  <li>100 Gold</li>
  <li>10 Silver</li>
  <li>1 Bronze</li>
</ul>

Unordered List Goombo (Goomba's friend)

Show Code 

<h3>Unordered List</h3>
<ul class="goombo">
  <li>Goomba</li>
  <li>Koopa</li>
  <li>Piranha Plant</li>
</ul>

Ordered List

  1. Choose your starter
  2. Battle your rival
  3. Become the champion
Show Code 

<h3>Ordered List</h3>
<ol>
  <li>Choose your starter</li>
  <li>Battle your rival</li>
  <li>Become the champion</li>
</ol>

Forms

Form styles for player registration or game settings menu.

New Player Registration
Show Code 

<form>
  <fieldset>
    <legend>New Player Registration</legend>

    <label for="name">Player Name:</label>
    <input type="text" id="name" name="name" placeholder="e.g., Mario" />
    
    <!-- ... more form elements ... -->
    
    <input type="submit" value="Press Start" />
  </fieldset>
</form>

Media & Tables

Displaying media and tables, as seen in game menus.

The legendary device
Fig. 1 - The legendary device for an adventure.
Show Code 

<figure>
  <img src="/assets/mario-land.webp" alt="The legendary device">
  <figcaption>Fig. 1 - The legendary device for an adventure.</figcaption>
</figure>
High Scores
Rank Player Score
1 MARIO 999990
2 LUIGI 754320
3 ZELDA 640000
4 KIRBY 450000
5 SAMUS 387500
Show Code 

<table>
  <caption>High Scores</caption>
  <thead>
    <tr>
      <th>Rank</th>
      <th>Player</th>
      <th>Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>MARIO</td>
      <td>999990</td>
    </tr>
    <tr>
      <td>2</td>
      <td>LUIGI</td>
      <td>754320</td>
    </tr>
    <tr>...</tr>
  </tbody>
</table>

Utility Classes

Helper classes to quickly adjust elements.

Text Sizing

This is an extra-small text (text-xs).

This is a small text (text-sm).

This is a medium text (text-md).

This is a large text (text-lg).

This is an extra-large text (text-xl).

Show Code 

<p class="text-xs">...</p>
<p class="text-sm">...</p>
<p class="text-md">...</p>
<p class="text-lg">...</p>
<p class="text-xl">...</p>

Text Colors

This text is dark gray.

This text uses the primary color.

This text uses the secondary color.

This text is light.

Show Code 

<p class="text-dark">...</p>
<p class="text-primary">...</p>
<p class="text-secondary">...</p>
<p class="text-light">...</p>

Container Utilities

Default Container

This container has a default shadow and border.

No Shadow

This container has no shadow but keeps its border.

No Shadow, No Border

This container has a completely flat design.

Show Code 

<div class="gb-card primary">...</div>
<div class="gb-card primary no-shadow">...</div>
<div class="gb-card primary no-shadow no-border">...</div>

Default Responsive Image

Mario Land

The image above is responsive by default (max-width: 100%) and has a border. you can adjust the size using width inline styling.

Show Code 

<img src="/assets/mario-land.webp" alt="Mario Land" style="width: 250px;">

Image Avatar

Player Avatar

The image above uses the `.img-avatar` class to make it circular.

Show Code 

<img src="/assets/logo.webp" alt="Player Avatar" class="img-avatar">

Contributors

A big thanks to the people who helped make this project possible.

Keinan21

Creator