A retro Apple System OS (1984-1991) theme for Bootstrap 5, based on system.css by @sakofchit.
⚠️ This is a first version for testing purposes. Feedback and contributions are welcome!
- Authentic Retro Design: Faithful recreation of the classic Apple System OS interface (1984-1991)
- Full Bootstrap 5 Compatibility: All Bootstrap components styled with the retro aesthetic
- Original Fonts: Includes authentic Chicago, Chicago_12, Monaco, and Geneva_9 fonts
- Era-Appropriate Color Palette: Darkened Apple QuickDraw colors for better contrast
- System.css Components: Includes additional retro UI elements (windows, title bars, etc.)
- No JavaScript Required: Pure CSS theme overlay for Bootstrap 5
git clone https://github.com/YOUR_USERNAME/bootstrap-system-css-theme.git
cd bootstrap-system-css-theme<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Retro App</title>
<!-- Bootstrap 5.3.8 CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- System.css Theme Override -->
<link href="css/bootstrap-system-theme.css" rel="stylesheet">
</head>
<body>
<!-- Your Bootstrap content here -->
<!-- Bootstrap JS Bundle -->
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>The included index.html demonstrates all Bootstrap components with the retro theme applied.
- Bootstrap 5.3.8: Complete framework with all standard components
- Retro-styled components: Buttons, forms, cards, alerts, tables, modals, navbar, pagination, badges
- System.css specific elements: Windows, title bars, separators
- Custom fonts: Chicago, Chicago_12, Monaco, Geneva_9
Era-appropriate darkened colors inspired by Apple QuickDraw:
- Primary: Dark Blue (#0033cc)
- Secondary: Dark Gray (#555555)
- Success: Dark Green (#006600)
- Danger: Dark Red (#aa0000)
- Warning: Dark Orange (#cc5500)
- Info: Dark Cyan (#0099cc)
- Light: Medium Gray (#999999)
- Dark: Black (#000000)
Tested on modern browsers:
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Original system.css: @sakofchit - system.css
- Bootstrap 5: Bootstrap Team
- Fonts: Chicago, Chicago_12, Monaco, Geneva_9 from the system.css project
- Theme Development: EIRL Richard Déloge - https://deloge.io
This project was developed with assistance from Claude (Anthropic) for code generation and theme customization.
MIT License - see LICENSE file for details.
Original system.css by @sakofchit is also MIT licensed. Bootstrap 5 is MIT licensed.
This is a first version for testing purposes. If you find bugs or have suggestions:
- Open an issue on GitHub Issues
- Submit a pull request - see CONTRIBUTING.md
For questions, contact: richard@teknoo.software
Enjoy the nostalgia! 🍎