{"id":30766186,"url":"https://github.com/alek-niko/deck","last_synced_at":"2025-09-04T19:03:15.437Z","repository":{"id":311678879,"uuid":"1044571893","full_name":"alek-niko/deck","owner":"alek-niko","description":"Deck: Modern-Only Lean Material Web Framework","archived":false,"fork":false,"pushed_at":"2025-08-25T22:32:19.000Z","size":54026,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-26T00:20:12.186Z","etag":null,"topics":["cyberdeck","esbuild","frontend","lean-web","minimalist-design","modern-web","open-source","performance","sass","ui-framework","vanillajs","webdevelopment"],"latest_commit_sha":null,"homepage":"https://cyberpunk.xyz/deck","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alek-niko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-25T22:29:01.000Z","updated_at":"2025-08-25T22:35:49.000Z","dependencies_parsed_at":"2025-08-26T00:32:16.354Z","dependency_job_id":null,"html_url":"https://github.com/alek-niko/deck","commit_stats":null,"previous_names":["alek-niko/deck"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/alek-niko/deck","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alek-niko%2Fdeck","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alek-niko%2Fdeck/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alek-niko%2Fdeck/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alek-niko%2Fdeck/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alek-niko","download_url":"https://codeload.github.com/alek-niko/deck/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alek-niko%2Fdeck/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273657085,"owners_count":25145003,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-04T02:00:08.968Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cyberdeck","esbuild","frontend","lean-web","minimalist-design","modern-web","open-source","performance","sass","ui-framework","vanillajs","webdevelopment"],"created_at":"2025-09-04T19:01:30.915Z","updated_at":"2025-09-04T19:03:15.396Z","avatar_url":"https://github.com/alek-niko.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Deck\nA modern, lean, and open-source front-end framework.\n\n**Deck** is a modern-only, lean, open-source front-end framework designed for developers who value minimalism, performance, and efficiency. Built entirely with **Vanilla JavaScript** and **Sass**, Deck eliminates unnecessary complexity and delivers a finely tuned environment for building modern web applications.\n\n---\n\n## 🚀 Why Deck?\n\n- **Minimal \u0026 Modern:** Focused on minimalism; clean, efficient, and lightweight.  \n- **Peak Performance:** Ultra-fast loading speeds and compact bundle size. \n- **No External Dependencies:** Uses system fonts (System UI) and SVG icons to minimize network requests.\n- **Customizable with Sass:** Seamless theming and style consistency across components.\n- **Streamlined Build Process:** Uses **esbuild** to generate optimized `deck.js` and `deck.css` files.  \n---\n\n## 🌟 Core Features\n- **Component-Based JS:** A modular, class-based architecture with a global Deck instance for easy component management (register() and autoload()).\n- **Tokenized SCSS:** A robust Sass system built on design tokens for effortless theming, dark mode, and responsive design. Includes a library of utility classes, animations, and transform mixins.\n- **Pub/Sub System:** A built-in event bus for seamless communication between different components.\n- **Real-Time Ready:** Includes optional WebSocket integration for building dynamic, real-time user experiences.\n- **Optimized Tooling:** Uses [esbuild](https://esbuild.github.io/) and [esbuild-sass-plugin](https://github.com/glromeo/esbuild-sass-plugin)  for an incredibly fast and simple build process.\n---\n\n## 🏗 Core Architecture\nThe project structure is organized for clarity and scalability.\n\n```text\ndeck/\n├─ build/         # Compiled JS and CSS outputs\n├─ images/        # Avatars, logos, photos, SVG illustrations\n├─ js/            # JavaScript source files\n│  ├─ core/       # Deck core classes and utilities\n│  ├─ components/ # UI components (Accordion, Modal, Tab, Lightbox, etc.)\n│  ├─ pages/      # Page-specific scripts\n│  ├─ ui/         # Layout and UI helpers\n│  └─ util/       # Utility functions\n├─ scss/          # Sass source files\n│  ├─ abstracts/  # Variables, mixins, and tokens\n│  ├─ base/       # Base styles, resets, overrides\n│  ├─ components/ # Component styles (buttons, cards, modals, forms, tables, tooltips, etc.)\n│  ├─ layouts/    # Layout utilities, grids, page areas\n│  └─ themes/     # Theme and color schemes (dark mode, palette management)\n└─ main.scss      # Entry point for SCSS\n```\n- **SCSS:** Fully tokenized, responsive, and dark-mode ready  \n- **JS:** Component-based, modular, with `Deck.register()` and `Deck.autoload()`  \n- **Build:** Uses esbuild to generate optimized `deck.js` and `deck.css` files \n\n---\n\n## 📦 Getting Started\n\n### 1. Installation\n\nClone the repository and install the development dependencies.\n\n```bash\ngit clone https://github.com/alek-niko/deck.git\ncd deck\nnpm install\n```\n\nDeck has only 3 dependencies:\n- esbuild\n- esbuild-sass-plugin\n- @material-symbols/svg-300\"\n\n### Build scripts:\n\nRun the build commands to compile the source files into the build/ directory.\n\n```bash\n# Compile all JavaScript components\nnpm run build-js\n\n# Compile all SCSS components\nnpm run build-css\n```\n---\n\n## 🛠 Usage Example\n\n### SCSS\nImport only the components you need into your main stylesheet.\n\n```css\n// main.scss\n@import \"abstracts/tokens\";\n@import \"base/reset\";\n\n@import \"components/button\";\n@import \"components/card\";\n@import \"layouts/grid\";\n\n```\n### JavaScript\nInitialize the Deck core and register your components. The autoload() method will automatically instantiate components based on data-component attributes in your HTML.\n\n\n```js\nimport Deck from './core/Deck.js';\nimport Modal from './components/Modal.js';\nimport Lightbox from './components/Lightbox.js';\n\n// Create global instance\nwindow.Deck = new Deck();\n\n// Register components\nwindow.Deck.register({\n    'modal': Modal,\n    'lightbox': Lightbox\n});\n\n// Automatically initialize components on DOM ready\nwindow.addEventListener('DOMContentLoaded', () =\u003e {\n    window.Deck.autoload();\n});\n\n```\n---\n\n## 🎬 Demo\n\nTry Deck in action with our live demo:\n\n[Explore the CyberDeck Demo](https://cyberpunk.xyz/deck)\n\nThe demo showcases:\n\n- Core UI components like Modals, Tabs, Lightbox, and Accordions  \n- Responsive layouts and utility classes  \n- Dark mode support and theming  \n- Interactive JS features with `Deck.register()` and `Deck.autoload()`\n\n---\n\n## 📄 License\n\nCyberDeck is released under the **GNU General Public License v3 (GPLv3)**.  \n\n\u003e If you received access to this code from any third party, you are required to adhere to the **GPLv3 terms** outlined in the [LICENSE](LICENSE) file accompanying this project.\n\n**Alternative Licensing:** Commercial or proprietary licenses may be available upon request.  \nFor inquiries about alternative licensing, please reach out via the [contact form](https://cyberpunk.xyz/contact).\n\n---\n\n![Build](https://img.shields.io/badge/build-passing-brightgreen)\n![License](https://img.shields.io/badge/license-GPLv3-blue)\n![Version](https://img.shields.io/badge/version-0.9.0-yellow)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falek-niko%2Fdeck","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falek-niko%2Fdeck","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falek-niko%2Fdeck/lists"}