classicy
v0.6.2
Published
A UI framework in React, replicating the user interface of Classic MacOS 8 (called Platinum).
Maintainers
robbiebyrdReadme
Classicy
Previously Platinum
A UI framework using native CSS/JS replications of the Mac OS 8 interface components.
Just curious? Visit our website to learn more.
Demo
See a demo here!
Building and running on localhost
First install dependencies:
npm installTo create a production build:
npm run build-prodTo create a development build:
npm run build-devRunning
Run npm run serve and visit the site in your browser at http://localhost:3000.
Acknowledgements
- New Dawn by
Nathanael Gentry - Scrollbars of the Classic Mac OS by
Jessica Stokes (@ticky) after-dark-css, for the basic System 7.1.1 interfaceflyer, for further inspiration- Robin Casady, for releasing ChicagoFLF into the public domain
- Apple, who maintains the copyright on the background patterns, icons and interface components
Features
Legend
| | | | |:--------:|:-------------------:|:-------------------:| | ✅ | ℹ️ | ⚠️ | | Complete | Partially complete. | Experimental | | | | Subject to change |
- Desktop
- ℹ️ The ubiquitous Finder
- Menubar
- ✅ System Menu
- ✅ App Switcher
- ✅ Widgets
- ✅ Date/Time
- ✅ Sound
- Icons
- ✅ App Shortcuts
- ✅ Cleanup
- Arrange By…
- Sounds
- ✅ Sound Provider
- ✅ Load sound theme from JSON
- ✅ Audio Sprites support
- ℹ️ Sound Manager Control Panel
- ℹ️ Sound Event Handler
- ✅ Event dispatcher/player
- ℹ️ Automatic event intercept and play for known events (map audio sprites to events)
- ℹ️ Sound Event Handler
- Appearance Manager Control Panel (Theme Manager)
- ✅ Appearance Manager Control Panel
- ✅ System
- ✅ Load theme from JSON
- ✅ System events for modifying theme
- UI
- ✅ Typography settings
- ✅ Measurement settings
- ✅ Desktop settings
- ✅ System colors
- ✅ Configurable color variables
- ✅ Color Theme-able components
- App Template
- ⚠️ App Context/Event Handler
- App Switcher
- Window
- Controls
- ✅ Zoom
- ✅ Resize
- ✅ Collapse
- ✅ Close
- Placard
- ✅ Header
- Dialog
- Modal
- Dialog
- ✅ Movable
- ✅ Non-movable
- Alert
- ✅ Movable
- Non-movable
- Dialog
- ✅ Modeless
- Modal
- ✅ Standard
- Controls
- System
- ✅ File System
- ✅ Integrated into Finder.app
- ✅ File System
- UI Components
- ✅ Text Input
- ✅ Text Area
- ✅ Button
- ✅ Tabs
- ✅ Radio Button
- ✅ Drop-down menu
- Multi-select menu
- ✅ Checkbox
- ✅ Bevel Button
- Slider
- Spinner
- ✅ Date Picker
- ✅ Time Picker
- ✅ Expandable (Disclosure)
- ✅ Fieldset
- ✅ Separator
- ✅ Progress
- Menu
- Contextual Menu
- Submenu
- Gallery Picker (Slider)
- Color Picker
Component Organization
<ClassicyDesktopProvider><ClassicyDesktop><ClassicyDesktopMenuBar><ClassicyDesktopIcon?><YourClassicyApp><ClassicyAppContext><ClassicyApp><ClassicyWindow?><ClassicyUIControls?><OtherReactNodes?>
Events
ClassicyDesktopClassicyDesktopClickClassicyDesktopDrag
ClassicySoundPlayClassicyAlertSosumiClassicyAlertWildEepClassicyAlertndigoClassicyBeepClassicyBootClassicyButtonClickDownClassicyButtonClickUpClassicyInputRadioClickDownClassicyInputRadioClickUpClassicyMenuCloseClassicyMenuItemClickClassicyMenuItemHoverClassicyMenuOpenClassicyWindowCloseClassicyWindowCollapseClassicyWindowControlClickDownClassicyWindowControlClickUpClassicyWindowExpandClassicyWindowFocusClassicyWindowMoveIdleClassicyWindowMoveMovingClassicyWindowMoveStopClassicyWindowOpenClassicyWindowResizeIdleClassicyWindowResizeResizingClassicyWindowResizeStopClassicyWindowZoomMaximizeClassicyWindowZoomMinimize
ClassicyDesktopIconClassicyDesktopClickClassicyDesktopAltClickClassicyDesktopDoubleClickClassicyDesktopDrag
ClassicyAppClassicyAppOpenClassicyAppCloseClassicyAppHideClassicyAppFocus
ClassicyWindowClassicyWindowOpenClassicyWindowCloseClassicyWindowZoomClassicyWindowCollapseClassicyWindowResizeClassicyWindowDragClassicyWindowFocusClassicyWindowContentScrollClassicyWindowContentClick
ClassicyMenuClassicyMenuHoverClassicyMenuClickClassicyMenuChange