Peexel - Pixel Art CSS Framework

// WELCOME TO PEEXEL

The Story: In the golden age of 8-bit and 16-bit gaming, pixels weren't just dots on a screen—they were art. Every sprite, every menu, every dialog box was carefully crafted with bold colors, chunky borders, and that unmistakable retro charm.

Peexel brings that aesthetic to the modern web. This is a pure CSS framework designed as an add-on to Bootstrap or any existing project. No npm dependencies to worry about, no supply chain attacks, just good old-fashioned CSS that makes your websites look like they're straight out of an arcade cabinet.

Each component tells a story. Use them to build game interfaces, retro dashboards, or just add some nostalgic flair to your projects.

// BUTTONS

The Story: Remember pressing START on your favorite arcade game? That satisfying chunky button with bold text and a crisp border? That's what these buttons are all about. They respond to hover with a color shift that feels like you're actually pressing something physical.

Basic Button

</> HTML

<button class="button-pixel">PRESS START</button>

How to Use

Simply add the button-pixel class to any button or link element. The button automatically gets the retro pixel art styling with hover effects. Perfect for CTAs, form submissions, or navigation.

// CARDS

The Story: In RPGs, every item, character, and stat had its own card or window. These pixel art cards recreate that feeling—complete with headers, bodies, and footers. They even lift slightly on hover, like they're jumping off the screen.

WARRIOR

A brave fighter with high strength and defense. Specializes in melee combat and protecting allies.

MAGE

A mystical spellcaster with powerful magic abilities. Weak defense but devastating attacks.

</> HTML

<div class="card-pixel"> <div class="card-pixel-header">TITLE</div> <div class="card-pixel-body">Content goes here</div> <div class="card-pixel-footer">Footer info</div> </div>

// BADGES

The Story: Status indicators, notifications, labels—badges are the little helpers that communicate important info at a glance. Think of those HP/MP labels in your favorite JRPG.

NEW SUCCESS DANGER INFO WARNING

</> HTML

<span class="badge-pixel">NEW</span> <span class="badge-pixel-success">SUCCESS</span> <span class="badge-pixel-danger">DANGER</span>

// ALERTS

The Story: Every good game has alert messages—"Level Up!", "Quest Complete!", "Game Over". These alert boxes bring that same energy with bold borders and icon indicators that grab attention.

Quest completed successfully! You earned 1000 XP and found a legendary sword.

Critical error! Your health is low. Find a healing potion immediately.

New area discovered: The Haunted Forest. Proceed with caution.

</> HTML

<div class="alert-pixel alert-pixel-success"> Success message here </div>

// PROGRESS BARS

The Story: Loading screens, experience bars, download progress—these striped progress bars use that classic diagonal pattern that screams "80s arcade". Watch them fill up with satisfaction.

Static Progress

25%

50%

75%

Animated Progress

Loading...

</> HTML

// FORMS

The Story: Character creation screens, option menus, save game dialogs—every retro game had forms. These inputs feature chunky borders and a glow effect on focus that feels like selecting an option with a D-pad.

Text Input

Textarea

Checkboxes

Enable sound effects
Enable music

Radio Buttons

Easy Mode
Hard Mode

</> HTML

<input type="text" class="input-pixel"> <label class="checkbox-pixel"> <input type="checkbox"> <span class="checkmark"></span> Label text </label>

// TABLES

The Story: Leaderboards, item inventories, character stats—tables are essential for organizing data in a retro interface. These feature alternating row colors and hover effects that make scanning data a breeze.

Rank	Player	Score	Level
1	ZORK_MASTER	999,999	99
2	PIXEL_KING	888,888	87
3	RETRO_ACE	777,777	75

</> HTML

<table class="table-pixel"> <thead> <tr> <th>Header</th> </tr> </thead> <tbody> <tr> <td>Data</td> </tr> </tbody> </table>

// MODALS

The Story: Dialog boxes, pop-ups, important messages—modals are those windows that appear over the game demanding your attention. Click the button below to see one in action!

</> HTML

<div class="modal-pixel-overlay" id="myModal"></div> <div class="modal-pixel" id="myModalContent"> <div class="modal-pixel-header"> TITLE <span class="modal-pixel-close">X</span> </div> <div class="modal-pixel-body">Content</div> </div>

JavaScript Helper

// Add 'active' class to show modal function openModal() { document.getElementById('myModal').classList.add('active'); }

// TABS

The Story: Menu systems with multiple pages—equipment, status, map, options. Tabs let you organize content into switchable views, just like those classic game menus.

EQUIPMENT

STATUS

MAGIC

Equipment

Iron Sword +5 | Leather Armor +3 | Health Potion x12

Status

HP: 450/450 | MP: 250/250 | STR: 45 | DEF: 32

Magic

Fireball | Ice Storm | Lightning Bolt | Heal

</> HTML

<div class="tabs-pixel"> <div class="tab-pixel active">TAB 1</div> </div> <div class="tab-content-pixel active">Content</div>

// TOOLTIPS

The Story: Hover over items to see their stats, point at abilities to read descriptions—tooltips provide context without cluttering the interface.

Hover over the items below:

</> HTML

<span class="tooltip-pixel" data-tooltip="Tooltip text"> Hover me </span>

// ACCORDION

The Story: Collapsible sections perfect for FAQs, game guides, or organizing large amounts of information into manageable chunks.

CHAPTER 1: THE BEGINNING

Your journey begins in the village of Pixelton. The elder has summoned you with urgent news about a mysterious darkness spreading across the land.

CHAPTER 2: THE QUEST

You must travel through the Haunted Forest to reach the ancient temple. Beware of monsters and traps along the way!

</> HTML

<div class="accordion-pixel"> <div class="accordion-pixel-item"> <div class="accordion-pixel-header">Title</div> <div class="accordion-pixel-body">Content</div> </div> </div>

// DROPDOWN

The Story: Dropdown menus for selecting options, choosing weapons, or navigating nested menus. Click to reveal the options!

</> HTML

<div class="dropdown-pixel"> <div class="dropdown-pixel-toggle">Toggle</div> <div class="dropdown-pixel-menu"> <div class="dropdown-pixel-item">Item</div> </div> </div>

// PAGINATION

The Story: Navigate through multiple pages of content, inventory items, or level selections with these chunky pagination buttons.

<<
1
2
3
4
5
>>

</> HTML

// GAME BARS (HP/MP)

The Story: No RPG is complete without health and mana bars! These specialized bars use classic red for health and blue for mana, with the same satisfying striped pattern.

Health Bar

Mana Bar

</> HTML

// ACHIEVEMENT BADGES

The Story: Achievement unlocked! These badges celebrate milestones with icons and text, perfect for gamification or showing off accomplishments.

★

First Victory

♔

Level 50 Reached

♦

Treasure Hunter

</> HTML

<div class="achievement-pixel"> <div class="achievement-pixel-icon">★</div> <div class="achievement-pixel-text">Title</div> </div>

// GRID SYSTEM

The Story: Layout your retro interfaces with a flexible 12-column grid system. Just like Bootstrap, but with pixel art vibes!

COL 4

One third width

COL 4

One third width

COL 4

One third width

COL 6

Half width

COL 6

Half width

</> HTML

<div class="row-pixel"> <div class="col-pixel-6">Half width</div> <div class="col-pixel-6">Half width</div> </div>