PEEXEL

Pure CSS Pixel Art Framework - No Dependencies, Just Retro Vibes

Peexel is a lightweight, pure CSS framework that brings the nostalgic aesthetics of 8-bit and 16-bit gaming to modern web applications. Designed as an add-on to Bootstrap or as a standalone solution, Peexel provides a comprehensive set of pixel art styled components without any external dependencies.

Features

• Pure CSS - No JavaScript required for styling
• No Dependencies - Zero npm packages, no supply chain vulnerabilities
• Bootstrap-Compatible - Works as an add-on to existing Bootstrap projects
• Lightweight - Minimal file size, maximum retro charm
• Comprehensive - 20+ ready-to-use components
• Customizable - CSS variables for easy theming
• Responsive - Mobile-friendly designs
• Nostalgic - Authentic pixel art aesthetic

Quick Start

Installation

Simply include the CSS file in your HTML:

<link rel="stylesheet" href="theme.css">

That's it! No build tools, no package managers, no npm install. Just pure CSS.

Basic Usage

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

<div class="card-pixel">
    <div class="card-pixel-header">CHARACTER</div>
    <div class="card-pixel-body">A brave warrior ready for adventure!</div>
    <div class="card-pixel-footer">Level: 25</div>
</div>

Components

Peexel includes a rich set of components inspired by classic gaming interfaces:

Buttons

Chunky, retro-styled buttons with hover effects

• .button-pixel - Standard pixel art button

Cards

Game-style panels with headers, bodies, and footers

• .card-pixel - Main card container
• .card-pixel-header - Card header
• .card-pixel-body - Card content
• .card-pixel-footer - Card footer

Badges

Small status indicators and labels

• .badge-pixel - Default badge
• .badge-pixel-success - Success state (green)
• .badge-pixel-danger - Danger state (red)
• .badge-pixel-info - Info state (cyan)
• .badge-pixel-warning - Warning state (orange)

Alerts

Attention-grabbing message boxes with icons

• .alert-pixel - Base alert
• .alert-pixel-success - Success alert
• .alert-pixel-danger - Danger alert
• .alert-pixel-info - Info alert

Progress Bars

Striped, animated loading indicators

• .progress-pixel - Progress container
• .progress-pixel-bar - Progress fill
• .progress-pixel-bar-animated - Animated shimmer effect

Forms

Retro-styled input elements

• .input-pixel - Text inputs
• .textarea-pixel - Text areas
• .checkbox-pixel - Custom checkboxes with .checkmark
• .radio-pixel - Custom radio buttons with .radiomark

Tables

Styled data tables with hover effects

• .table-pixel - Apply to <table> element

Modals

Dialog boxes and overlays

• .modal-pixel-overlay - Dark background overlay
• .modal-pixel - Modal container
• .modal-pixel-header - Modal header with close button
• .modal-pixel-body - Modal content
• .modal-pixel-footer - Modal footer
• .modal-pixel-close - Close button

Tabs

Switchable content panels

• .tabs-pixel - Tab navigation container
• .tab-pixel - Individual tab button
• .tab-content-pixel - Tab content panel

Tooltips

Hover-activated help text

• .tooltip-pixel - Apply to any element
• data-tooltip="text" - Tooltip content attribute

Accordion

Collapsible content sections

• .accordion-pixel - Container
• .accordion-pixel-item - Individual item
• .accordion-pixel-header - Clickable header
• .accordion-pixel-body - Collapsible content

Dropdown

Clickable menus

• .dropdown-pixel - Container
• .dropdown-pixel-toggle - Toggle button
• .dropdown-pixel-menu - Menu container
• .dropdown-pixel-item - Menu items

Pagination

Page navigation controls

• .pagination-pixel - Container (use <ul>)
• Active state: .active class on <li>

Game Bars

RPG-style health and mana bars

• .bar-pixel-health with .bar-pixel-health-fill
• .bar-pixel-mana with .bar-pixel-mana-fill

Achievement Badges

Gamification elements

• .achievement-pixel - Container
• .achievement-pixel-icon - Icon area
• .achievement-pixel-text - Achievement text

Grid System

12-column responsive layout

• .row-pixel - Row container
• .col-pixel - Flexible column
• .col-pixel-1 through .col-pixel-12 - Fixed width columns

Utilities

• .pixelated - Prevent image smoothing
• .border-pixel - Thick pixel borders
• .divider-pixel - Decorative striped divider
• .code-pixel - Code blocks with syntax highlighting
• .code-pixel-inline - Inline code
• .spinner-pixel - Loading spinner
• .breadcrumb-pixel - Navigation breadcrumbs
• .crt - CRT screen effect
• .crt-container - CRT container wrapper

Customization

Peexel uses CSS custom properties (variables) for easy theming:

:root {
    --pixelart-font-family: 'Press Start 2P', monospace;
    --pixelart-primary-color: #ffcb00;
    --pixelart-secondary-color: #009a44;
    --pixelart-border-radius: 3px;
    --pixelart-font-size: 16px;
    --pixelart-shadow: rgba(0, 0, 0, 0.5);
    --pixelart-button-padding: 10px 20px;
    --pixelart-button-border: 2px solid #000;
    --pixelart-sprite-width: 32px;
    --pixelart-sprite-height: 32px;
    --pixelart-crt-strength: 10%;
}

Override these in your own CSS to create custom themes:

:root {
    --pixelart-primary-color: #ff00ff; /* Purple theme */
    --pixelart-secondary-color: #00ffff; /* Cyan accents */
}

Syntax Highlighting

Peexel includes a lightweight CSS-only syntax highlighter for code blocks. Use these classes inside .code-pixel:

• .number - Numbers (pink)
• .string - Strings (green)
• .keyword - Keywords (blue)
• .function - Function names (yellow)
• .comment - Comments (gray)
• .operator - Operators (orange)
• .tag - HTML tags (blue)
• .attr - HTML attributes (amber)
• .punctuation - Punctuation (light gray)

Example:

<div class="code-pixel">
    <span class="keyword">function</span> <span class="function">greet</span><span class="punctuation">(</span><span class="punctuation">)</span> <span class="punctuation">{</span>
        <span class="keyword">return</span> <span class="string">"Hello World"</span><span class="punctuation">;</span>
    <span class="punctuation">}</span>
</div>

Interactive Components

Some components require minimal JavaScript for interactivity. Here are helper functions:

Modal

function openModal(modalId) {
    document.getElementById(modalId).classList.add('active');
}

function closeModal(modalId) {
    document.getElementById(modalId).classList.remove('active');
}

Tabs

function switchTab(evt, tabId) {
    // Hide all tab contents
    document.querySelectorAll('.tab-content-pixel').forEach(content => {
        content.classList.remove('active');
    });

    // Deactivate all tabs
    document.querySelectorAll('.tab-pixel').forEach(tab => {
        tab.classList.remove('active');
    });

    // Show selected tab
    document.getElementById(tabId).classList.add('active');
    evt.currentTarget.classList.add('active');
}

Accordion

function toggleAccordion(header) {
    const body = header.nextElementSibling;
    header.classList.toggle('active');
    body.classList.toggle('active');
}

Dropdown

function toggleDropdown(dropdownId) {
    document.getElementById(dropdownId).classList.toggle('active');
}

Demo

Check out index.html for a complete showcase of all components with examples and usage instructions. The demo page features:

• Interactive side menu navigation
• Live component examples
• Code snippets for each component
• Story-driven documentation
• Best practices and usage tips

Browser Support

Peexel works in all modern browsers that support:

• CSS Grid
• CSS Flexbox
• CSS Custom Properties (variables)
• CSS Gradients

This includes:

• Chrome 60+
• Firefox 60+
• Safari 12+
• Edge 79+

Philosophy

Peexel follows these principles:

1. No Dependencies - Security through simplicity. No npm packages means no supply chain vulnerabilities.
2. Pure CSS - Styling shouldn't require JavaScript. Interactive components use minimal, optional JS.
3. Lightweight - Small file size, fast loading, no bloat.
4. Nostalgic - Authentic pixel art aesthetic inspired by 8-bit and 16-bit gaming.
5. Practical - Ready-to-use components, not just decorative elements.
6. Compatible - Works alongside Bootstrap or standalone.

Use Cases

Peexel is perfect for:

• Game-related websites and dashboards
• Retro-themed applications
• Gaming portfolios and showcases
• Indie game marketing sites
• Hackathon projects
• Creative web experiments
• Nostalgic user interfaces
• Game jam submissions
• Educational coding projects

Examples

Character Card

<div class="card-pixel">
    <div class="card-pixel-header">WARRIOR</div>
    <div class="card-pixel-body">
        <div class="bar-pixel-health">
            <div class="bar-pixel-health-fill" style="width: 85%;"></div>
        </div>
        <br>
        <div class="bar-pixel-mana">
            <div class="bar-pixel-mana-fill" style="width: 45%;"></div>
        </div>
        <br>
        <span class="badge-pixel">Level 25</span>
        <span class="badge-pixel-success">Active</span>
    </div>
    <div class="card-pixel-footer">
        STR: 45 | DEF: 32 | MAG: 18
    </div>
</div>

Achievement Notification

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

Game Settings Form

<div class="card-pixel">
    <div class="card-pixel-header">SETTINGS</div>
    <div class="card-pixel-body">
        <label class="checkbox-pixel">
            <input type="checkbox" checked>
            <span class="checkmark"></span>
            Enable Sound Effects
        </label>
        <br><br>
        <label class="checkbox-pixel">
            <input type="checkbox" checked>
            <span class="checkmark"></span>
            Enable Music
        </label>
        <br><br>
        <label class="radio-pixel">
            <input type="radio" name="difficulty" checked>
            <span class="radiomark"></span>
            Easy Mode
        </label>
        <br>
        <label class="radio-pixel">
            <input type="radio" name="difficulty">
            <span class="radiomark"></span>
            Hard Mode
        </label>
        <br><br>
        <button class="button-pixel">SAVE SETTINGS</button>
    </div>
</div>

Contributing

Contributions are welcome! Since this is a pure CSS framework with no dependencies, keep these guidelines in mind:

• No npm packages or external dependencies
• Maintain the pixel art aesthetic
• Keep file sizes small
• Follow existing naming conventions
• Test across multiple browsers
• Update index.html with new components

License

MIT License - See LICENSE file for details

Credits

Created with love by pixel art enthusiasts who remember when games came on floppy disks and every pixel mattered.

Special thanks to the retro gaming community for endless inspiration.

Support

• GitHub: https://github.com/catpea/peexel
• Issues: https://github.com/catpea/peexel/issues
• Demo: https://catpea.github.io/peexel

Roadmap

Future additions planned:

• More sprite animation helpers
• Additional color themes
• Scanline effects
• Glitch animations
• Pixel art icon set
• More gaming UI patterns

Made with ♥ by pixel art enthusiasts | Pure CSS | No Dependencies | Retro Forever