Packages

corex

0.1.0-rc.0
0.1.2 0.1.1 0.1.0 0.1.0-rc.1 0.1.0-rc.0 0.1.0-beta.5 0.1.0-beta.4 0.1.0-beta.3 0.1.0-beta.2 0.1.0-beta.1 0.1.0-alpha.33 0.1.0-alpha.32 0.1.0-alpha.31 0.1.0-alpha.30 0.1.0-alpha.29 0.1.0-alpha.28 0.1.0-alpha.27 0.1.0-alpha.26 0.1.0-alpha.25 0.1.0-alpha.24 0.1.0-alpha.23 0.1.0-alpha.22 0.1.0-alpha.21 0.1.0-alpha.20 0.1.0-alpha.19 0.1.0-alpha.18 0.1.0-alpha.17 0.1.0-alpha.16 0.1.0-alpha.15 0.1.0-alpha.14 0.1.0-alpha.13 0.1.0-alpha.12 0.1.0-alpha.11 0.1.0-alpha.10 0.1.0-alpha.9 0.1.0-alpha.8 0.1.0-alpha.7 0.1.0-alpha.6 0.1.0-alpha.5 0.1.0-alpha.4 0.1.0-alpha.3 0.1.0-alpha.2 0.1.0-alpha.1

Accessible and unstyled UI components library written in Elixir and TypeScript that integrates Zag.js state machines into the Phoenix Framework.

HexDocs

Current section

Files

Jump to
Readme
43 Versions
4 Dependencies
Dependants
Files
Activity
corex usage-rules design.md
Raw

usage-rules/design.md 

# Corex Design



Copy assets with `mix corex.design` — see `corex:installation`.



## Hard rules



1. **No custom CSS in templates** — only `@import` lines and vendor-required fragments in `site.css` / `app.css`

2. **Modifiers are the styling API** — `class="accordion accordion--accent accordion--lg"`

3. **Never invent class names** or write `[data-scope=…]` in template CSS

4. **`.typo layout` on body** — bare semantic tags first

5. **Remove daisyUI** when using Corex Design



## Setup



```css

@import "../corex/main.css";

@import "../corex/theme/neo.css";

@import "../corex/components/typo.css";

@import "../corex/components/layout.css";

@import "../corex/components/accordion.css";

@source "../corex";

```



```heex

<html data-theme="neo" data-mode="light">

  <body class="typo layout">

```



One `components/<name>.css` import per rendered component.



## Modifier stacking



Stack on root class. Responsive prefixes on modifiers:



```heex

<.accordion

  class="accordion accordion--accent accordion--sm sm:accordion--md lg:accordion--xl"

  …

/>



<.timer

  class="timer timer--accent timer--text-lg sm:timer--text-xl lg:timer--text-5xl timer--rounded-xl"

  …

/>

```



| Axis | Examples |

|------|----------|

| Color | `--accent`, `--success`, `--info`, `--alert` |

| Size | `--sm`, `--md`, `--lg`, `--xl` |

| Radius | `--rounded-md`, `--rounded-xl`, `--rounded-full` |

| Type | `--text-lg`, `--text-2xl` |



## Demo panel pattern



```heex

<.floating_panel id="demo" class="floating-panel floating-panel--accent">

  <.select id="theme" class="select select--sm" … />

  <.toggle id="mode" class="toggle toggle--sm" … />

</.floating_panel>

```



## Heroicons in components



No `class` on `<.heroicon>` inside Corex components or slots:



```heex

<.heroicon name="hero-chevron-down" />

```



## Anti-patterns



- Custom BEM sections in template CSS (e.g. `.home__section { … }`) — use token utilities

- Redundant heading utilities under `.typo` (`<h2 class="font-display text-2xl">`)

- Modifiers mixed with layout on same element — wrap with layout utilities if needed

- Overriding `--color-*` in templates — use `data-theme` / `data-mode`



## References



- https://hexdocs.pm/corex/design.html

- https://hexdocs.pm/corex/theming.html