Skip to content
Orbix ASP.NET Core · Tailwind CSS v1.0.2

Folder structure

Orbix is a standard ASP.NET Core 10 solution. The web app adds a few configuration files, Razor shell pieces and a small TypeScript layer:

orbix-aspnet/
├── Orbix.slnx                                solution: the web app and its tests
├── global.json, Directory.Build.props        SDK version and shared project settings
├── src/Orbix/
│   ├── Program.cs                            services and middleware (localization, path base, status pages)
│   ├── appsettings.json                      CSS engine, languages, brand name, path base
│   ├── menu.json                             sidebar menu (also feeds the command palette)
│   ├── Locales/{en,es,pt,fr,ar}.json         translations (shared by Razor and JavaScript)
│   ├── Infrastructure/
│   │   ├── Navigation/PageRoutes.cs          routing table: Razor page => URL of every page
│   │   ├── Navigation/Menu.cs                menu model (menu.json)
│   │   ├── Localization/                     IStringLocalizer over Locales/, plural rules, language endpoints
│   │   ├── TagHelpers/                       <ox-partial>, <ox-slot>, <ox-page-header>
│   │   ├── Assets/ViteAssets.cs              <ox-vite>: built assets of the engine in use
│   │   └── OrbixOptions.cs, OrbixSite.cs     settings and view helpers (language, direction, inline assets)
│   ├── ViewComponents/                       sidebar, topbar, footer, customizer, command palette
│   ├── Pages/
│   │   ├── _ViewImports.cshtml               namespaces, tag helpers, L (localizer) and Site
│   │   ├── index.cshtml, dashboards/, apps/… one Razor page per screen
│   │   └── Shared/
│   │       ├── _Layout.cshtml                app layout (sidebar shell); _AuthLayout and _BlankLayout
│   │       ├── Shell/                        document head and page header
│   │       ├── Components/                   views of the shell view components
│   │       └── Partials/                     reusable blocks (product card, mail row, password field, ...)
│   ├── ClientApp/
│   │   ├── css/engines/tailwind.css      CSS engine entry
│   │   ├── css/foundry/                      design system compiled from SCSS by the build (generated)
│   │   ├── css/orbix.css, css/orbix/         template styles (tokens only, logical properties)
│   │   ├── js/app.ts                         entry: theme, i18n, behaviors, page modules
│   │   ├── js/core/                          i18n, formats, charts, shell preferences
│   │   ├── js/pages/                         one module per page family (<body data-module>)
│   │   ├── js/boot/                          no-flicker boot scripts inlined in <head>
│   │   ├── scss/brand.scss                   brand settings of the design system (colors, radius, fonts)
│   │   └── svg/sprite.svg                    icon sprite inlined in every page (generated)
│   ├── packages/foundry-ui/                  design system bundled with the template (local npm package),
│   │                                         with its SCSS sources (see Customize with SCSS)
│   ├── scripts/                              build of the CSS engine, icon sprite and icon sets
│   ├── wwwroot/
│   │   ├── build/tailwind/               compiled CSS, JavaScript and fonts (npm run build)
│   │   ├── icon-sets/                        full icon sets for the icon browser pages
│   │   └── images/                           demo photos (CC0 / public domain) and their CREDITS.json
│   └── package.json, vite.config.ts          front-end tooling (Node.js only at build time)
└── tests/Orbix.Tests/                        xUnit: pages, languages, rendered text, translations, sources, builds, images

How a page is put together

  1. Infrastructure/Navigation/PageRoutes.cs maps a Razor page to its URL, for example ["/dashboards/crm"] = "dashboards/crm". A routing convention applies the table: every page answers only the URL listed there, so a URL changes in one place.
  2. The page Pages/dashboards/crm.cshtml starts with @page, chooses its layout and sets ViewData["Title"] (translation key), ViewData["Nav"] (navigation id) and, optionally, ViewData["Module"].
  3. The layout renders the document head (title, language and direction, built assets), the shell view components (the sidebar from menu.json, the topbar, the footer, the customizer and the command palette) and the page.
  4. If the page declares ViewData["Module"] = "dashboards/crm", the page script ClientApp/js/pages/dashboards/crm.ts is loaded on demand (charts, calendars and other interactive widgets).
  5. ClientApp/js/app.ts starts the theme, the translations and the behaviors in the browser.