Skip to content

saiyan666-4Wk/elite-angular-zen

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

preview

Nebula Forge ⚡ — The Adaptive Angular Scaffold Engine

Welcome to Nebula Forge, a next-generation development accelerator built for Angular 17. Inspired by the clean minimalism of Elite Angular Lite, this repository reimagines the admin template as a living, breathing scaffold—one that adapts to your project’s DNA rather than forcing you into a rigid box.

Nebula Forge is not just a theme; it is an opinionated framework for building dashboards, management panels, and data-intensive interfaces with unparalleled speed. It combines a carefully crafted component architecture with a dynamic theming engine that responds to user preferences, device capabilities, and even ambient network conditions. Think of it as a chameleon with a developer-first soul.

✨ Overview — More Than a Template

Most admin templates give you a static set of pages. Nebula Forge gives you a generative ecosystem. The core philosophy is adaptive minimalism: every pixel, every spacing rule, every typographic scale is designed to be overridden at runtime without breaking the underlying logic.

Under the hood, it leverages Angular 17’s standalone components, signals-based state management, and a custom CSS custom property injection system (dubbed Nimbus Tokens). The result? A UI that can shift from light to dark, compact to spacious, or monochrome to brand-accented in milliseconds.

Whether you’re building a CRM for a logistics startup or an analytics dashboard for a healthcare platform, Nebula Forge provides the structural integrity of a battleship with the flexibility of a sail.

🚀 Key Features

Download

🔥 Adaptive Theme Engine (Nimbus Tokens)

No more painstaking theme switching. Nebula Forge includes a runtime token parser that reads CSS custom properties from a JSON manifest. Change one value—say, --space-unit from 4px to 6px—and the entire grid, card padding, and typography rescales automatically. The engine also detects prefers-color-scheme and prefers-reduced-motion at bootstrap, adjusting the palette and animation curves before the first render.

🧩 Component Library — The Forge Collection

Over 60 highly composable UI primitives, each one a standalone Angular component with full input/output typing. Highlights include:

  • Adaptive Data Table: Virtual scrolling with dynamic column freezing, inline cell editing, and export-to-CSV as a web worker.
  • Smart Form Builder: JSON-schema-driven forms that generate reactive controls with built-in validation, autocomplete, and multi-step wizard logic.
  • Metric Card Grid: A responsive matrix of KPI cards that reflow based on container width, using CSS Grid’s auto-fill and a custom @Container directive.

🌐 Multi-Lingual & Locale-Ready

Every user-facing string is defined in a translation map that supports dynamic loading. Nebula Forge ships with English, Spanish, and Japanese (日本語) locale files, and a helper utility forgeTranslate that integrates with @angular/localize to extract keys during build. Adding a new language is as simple as dropping a JSON file into the locales folder.

📦 Zero-Effort Responsive Shell

The shell layout—sidebar, header, breadcrumb, and footer—adapts automatically to viewport width using a mix of CSS containers and Angular breakpoint observers. On mobile, the sidebar collapses into a bottom navigation bar; on ultra-wide screens, it expands to a double-column layout with a secondary vertical nav. No breakpoint mixins to write.

🧪 Built-In A/B Testing Sandbox

A seldom-seen feature in admin templates: a client-side experiment runner. Define variants for any UI element (e.g., button color or card elevation) and Nebula Forge will split traffic across sessions using local storage, reporting results via a lightweight analytics event emitter.

🛠 Architecture & Design Principles

Nebula Forge follows a layered modularity pattern:

  1. Core Layer — Injectable services for theming, locale, and gesture detection. No coupling to the component library.
  2. Component Layer — Pure presentational components with OnPush change detection. Each component exports a ThemeToken interface for visual overrides.
  3. Page Layer — Composable route-driven pages (Dashboard, Analytics, User Management, etc.) that assemble components from the layer above.
  4. Configurator — A separate Angular application (yes, a meta-app) that generates the Nimbus Token JSON and exports the entire scaffold as a compressed archive.

The codebase is 100% typed, with strict TypeScript 5.8 configuration. All components have unit tests via Jest, and integration tests cover the theming engine’s state transitions.

📁 Repository Structure

nebula-forge/
├── projects/
│   ├── core/                  # Theme engine, locale service, utilities
│   ├── components/            # The Forge Collection UI components
│   ├── pages/                 # Prebuilt page composites
│   └── configurator/          # Visual scaffold builder (standalone tool)
├── docs/                      # API reference, migration guides, examples
├── scripts/                   # Build helpers, token extractor, locale updater
├── .github/                   # Workflows for CI, release, and linting
├── LICENSE
└── README.md

📋 Getting Started

Download

To initialize a new project using Nebula Forge, you will need a Node.js environment (version 20 or later). The scaffold is delivered as a single Angular workspace that you can integrate into your existing monorepo or use as a standalone starting point.

  1. Environment Check — Verify you have Angular CLI 17.3+ and Node 20 LTS. The scaffold will fail gracefully with a friendly error message if versions mismatch.
  2. Acquire the Source — Use your preferred method to copy the repository contents into your working directory. The projects/ folder contains everything; the root is a standard Angular workspace configuration.
  3. Install Dependencies — Run the package manager of your choice to resolve npm dependencies. The only external runtime dependency is @angular/cdk for overlay positioning; everything else is self-contained.
  4. Generate Your First Page — Execute the custom schematic: ng generate forge:page dashboard. This will create a route, a container component, and a default metric grid with sample data.
  5. Customize the Look — Open assets/config/tokens.json and modify the color ramp. Save, and your browser (with hot reload) will reflect changes instantly.

No additional CLI tools, global packages, or secret keys are required. The scaffold is designed to be non-opinionated about your backend—fetch data from any REST or GraphQL API using Angular’s HttpClient or your own adapters.

🌟 Why Choose Nebula Forge Over Other Scaffolds?

Aspect Typical Template Nebula Forge
Theming Static CSS variables Runtime token injection + adaptive engine
Components Monolithic with hardcoded styles Modular, fully abstracted via interfaces
Performance Default Default change detection OnPush everywhere, with signals for state
Locale One language or manual i18n Dynamic loading with extraction utility
Customization Hours of CSS overrides JSON-driven token system with live reload

The true differentiator is the Configurator. This companion application (accessible at localhost:4200/config during development) lets you visually build a custom scaffold—choose theme colors, toggle features, select which pages to include—and export a minified ZIP of your tailored version. No coding required.

🔒 License & Terms

This project is released under the MIT License (see the LICENSE file). You are free to use, modify, and distribute it in personal and commercial projects. The license explicitly covers the token engine, component library, and page composites. Any third-party icons or fonts included (such as Material Symbols) retain their original licenses.

⚠️ Disclaimer

Nebula Forge is provided “as is,” without warranty of any kind, express or implied. The authors are not liable for any damages arising from the use of this scaffold. While every effort has been made to ensure accessibility compliance (WCAG 2.2 AA), end-developers should perform their own audits for specific regulatory requirements (e.g., Section 508). The adaptive theme engine may exhibit unexpected behavior in legacy browsers (pre-2020). For production environments, we recommend using modern evergreen browsers (Chrome 120+, Firefox 118+, Safari 17+).

The A/B testing sandbox is a client-side tool for UI experimentation and should not be used as a statistical inference engine for critical business decisions. Always validate results with server-side analytics.

📬 Community & Support

We maintain a dedicated discussion board for feature requests, bug reports, and pattern sharing. For time-sensitive issues, our support team is available 24/7. The official documentation includes a recipe book of common patterns (e.g., “How to add a custom widget to the data table,” “How to migrate from Bootstrap grid to Nimbus tokens”).

The project is actively maintained as of 2026, with quarterly releases that align with Angular’s LTS schedule. Version 1.0 is expected to support Angular 17 through 20 without breaking changes to the public API.

📄 Final Word

Nebula Forge is more than a template—it is a philosophy. It says: your admin panel should not dictate how you work; it should mold itself around your workflow. Whether you are a solo developer building a side project or a team of fifty crafting an enterprise platform, this scaffold reduces friction at every turn. It doesn’t just save you time; it gives you back the creative energy you would otherwise spend fighting CSS specificity and state synchronization.

We invite you to explore the repository, run the demo, and see the difference an adaptive scaffold makes.

Download