gameboy-css-framework
Version:
A lightweight, pixel-perfect CSS framework inspired by the classic Game Boy.
147 lines (95 loc) • 3.47 kB
Markdown
# Gameboy.css
<p align="center">
<img src="assets/banner.jpg" alt="Gameboy.css Banner" style="max-width: 100%;" width="600" height="315">
<br>
The pixel-perfect CSS framework for retro-inspired projects. Bring the nostalgic look and feel of the classic Game Boy to your web applications.
</p>
[](https://www.npmjs.com/package/your-package-name)
[](https://www.jsdelivr.com/package/gh/your-username/your-repository)
[](https://github.com/your-username/your-repository/blob/main/LICENSE)
## Table of Contents
- [Introduction](#introduction)
- [Features](#features)
- [Quick Start](#quick-start)
- [Usage](#usage)
- [Fonts](#fonts)
- [Examples](#examples)
- [Contributors](#contributors)
## 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:
```html
https://cdn.jsdelivr.net/gh/your-username/your-repository@1.0.0/gameboy.css
```
> Replace `your-username` and `your-repository` with your GitHub info.
### Via Package Manager
Install via npm:
```bash
npm install your-package-name
```
Then include it in your HTML or main stylesheet:
```html
<link rel="stylesheet" href="./node_modules/your-package-name/gameboy.css">
```
Or via CSS import:
```css
@import 'your-package-name/gameboy.css';
```
## Usage
Gameboy.css provides components and utility classes. You define your own layout and apply the styles.
### Containers
```html
<div class="gb-card primary">
<h3>Item Acquired!</h3>
<p>You found a Super Potion.</p>
</div>
```
### Buttons
```html
<button type="button" class="button primary">START</button>
```
## Fonts
Recommended font: **Press Start 2P** from Google Fonts.
```html
<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](https://github.com/keinan21/gameboy-css-framework)
Follow the project and stay updated with new features and releases!