gameboy-css-framework

v1.0.0

Published

4 months ago

A lightweight, pixel-perfect CSS framework inspired by the classic Game Boy.

Downloads

0High
0Medium
0Low

keinan21

css framework gameboy retro 8-bit pixel-art nostalgia nintendo css-framework css-library libarary

Gameboy.css

Introduction

Gameboy.css is a lightweight CSS framework inspired by the iconic design of the original Nintendo Game Boy. It provides a set of pre-designed components and utility classes that allow you to easily create retro-themed websites and user interfaces with a distinctive pixel art aesthetic.

Features

🎮 Pixel-Perfect Design — Replicates the look of the Game Boy.
🧩 Modular — Use only what you need.
📱 Responsive (Basic) — Works on various screen sizes.
🛠️ Customizable — Override styles easily.
🧠 Intuitive Class Names — Easy to remember and use.
📦 Components Included — Headers, Containers, Typography, Buttons, Forms, and more.

Quick Start

Via CDN

Add this to your <head> section:

https://cdn.jsdelivr.net/gh/your-username/[email protected]/gameboy.css

Replace your-username and your-repository with your GitHub info.

Via Package Manager

Install via npm:

npm install your-package-name

Then include it in your HTML or main stylesheet:

<link rel="stylesheet" href="./node_modules/your-package-name/gameboy.css">

Or via CSS import:

@import 'your-package-name/gameboy.css';

Usage

Gameboy.css provides components and utility classes. You define your own layout and apply the styles.

Containers

<div class="gb-card primary">
  <h3>Item Acquired!</h3>
  <p>You found a Super Potion.</p>
</div>

Buttons

<button type="button" class="button primary">START</button>

Fonts

Recommended font: Press Start 2P from Google Fonts.

<head>
  https://fonts.googleapis.com/css?family=Press+Start+2P
  <link rel="stylesheet" href="gameboy.css">
  <style>
    body, h1, h2, h3, h4, h5, h6, p, a, button, input, textarea {
      font-family: 'Press Start 2P', cursive;
    }
  </style>
</head>

Note: This font supports only English characters.

Examples

Showcase: See index.html for a full demo.
Article Example: See comparisson.html. plain HTML vs Gameboy.css.

Contributors

Thanks to the following people for contributing:

Keinan21 — Creator

License

This project is licensed under the MIT License. See the LICENSE file for details.

Support

Found a bug or have a suggestion? Open an issue

Follow the project and stay updated with new features and releases!