[](https://www.npmjs.org/package/@itrocks/ux-core)
[](https://www.npmjs.org/package/@itrocks/ux-core)
[](https://github.com/itrocks-ts/ux-core)
[](https://github.com/itrocks-ts/ux-core/issues)
[](https://25.re/ditr)
# ux-core
UI component providing a basic it.rocks app container with navigation, title bar, and logout support.
*This documentation was written by an artificial intelligence and may contain errors or approximations.
It has not yet been fully reviewed by a human. If anything seems unclear or incomplete,
please feel free to contact the author of this package.*
## Installation
```bash
npm i @itrocks/ux-core
```
The package only ships static assets (CSS, fonts, icons). There is no JavaScript API.
In a browser page, include at least the main stylesheet:
```html
```
Depending on the page, you may also want `article.css` to get the standard article/form layout:
```html
```
> Adjust paths according to how you serve static assets in your application.
## Usage
`@itrocks/ux-core` provides a **pre‑built application frame**:
- full‑height page layout using CSS Grid,
- header, optional breadcrumb and collapse toggle,
- left navigation menu,
- main content area and footer,
- optional global search and user/logout section.
You opt‑in simply by structuring your HTML according to the expected layout and including the CSS.
### Minimal example
```html
My it.rocks app
My application
Welcome
Content goes here…
```
This already gives you the default it.rocks look and feel: Roboto font, neutral header and sidebar background,
and a responsive layout with a collapsible menu on small screens.
### Complete example with breadcrumb, user and global search
Below is a more realistic page using several optional building blocks:
```html
Orders
```
The markup above is intentionally close to what is generated by higher‑level it.rocks packages such as `@itrocks/list`,
so you can easily plug your own custom pages into the same visual language.
## API
`@itrocks/ux-core` exposes a **CSS‑based API**. There are no JavaScript exports; instead,
behaviour is controlled by the HTML structure and CSS class names you use.
Below is an overview of the main building blocks.
### Global styles
Loaded via `app.css`:
- Normalizes browser defaults using `normalize.css`.
- Sets the default font to `Roboto, sans-serif`.
- Sets a neutral text color (`#444`) and default font size (`12px`).
- Applies `box-sizing: border-box` globally.
These global styles are applied automatically when you include `app.css`.
### Page grid layout (`body`)
The body element is turned into a CSS Grid to organise the high‑level regions:
- grid areas: `header`, `collapse`, `breadcrumb`, `menu`, `main`, `footer`.
- full‑viewport height using the `--real-vh` custom property (or `100vh` by default).
Expected direct children of `body`:
- `header` – top bar of the application (title, user info, main actions).
- `.collapse` – button used to toggle the collapsed state of the sidebar and header on small screens.
- `.breadcrumb` – ordered list for the navigation path.
- `.menu` – left navigation menu; when combined with `.app` it is treated as the application menu.
- `main` – main content container.
- `footer` – optional footer for legal mentions or application metadata.
Within `main`:
- consecutive `main` children are separated with a border on the top and left, so multiple panes can be stacked.
- `.main.logo` can be used as a placeholder pane displaying the it.rocks logo.
### Breadcrumb (`.breadcrumb`)
Selector: `body > .breadcrumb`.
- Expected element: `` or `