forked from retoor/devplacepy
26 lines
2.0 KiB
HTML
26 lines
2.0 KiB
HTML
<div class="docs-content" data-render>
|
|
{% raw %}
|
|
# Design system
|
|
|
|
DevPlace has one visual language: hand-written vanilla CSS driven by design tokens, with no preprocessor, no CSS-in-JS, and no utility framework. This section is the canonical reference for how the interface looks and is structured, and states the rules every page must follow.
|
|
|
|
> The feed / posts page is the reference implementation. When two pages disagree, the feed page wins and the other gets fixed. The pages below describe the system; the [Consistency rules](/docs/styles-consistency.html) page turns it into hard requirements.
|
|
|
|
## The four pages
|
|
|
|
| Page | What it covers |
|
|
|------|----------------|
|
|
| [Colors](/docs/styles-colors.html) | The palette, every token and what it is for, what not to do, and the vision behind a dark, single-accent theme. |
|
|
| [Layout](/docs/styles-layout.html) | The page shell, the canonical multi-column and single-column layouts, and which compositions are acceptable. |
|
|
| [Responsiveness](/docs/styles-responsiveness.html) | The goal, the standard breakpoint ladder, and the exact techniques used to reach it. |
|
|
| [Consistency rules](/docs/styles-consistency.html) | Hard, non-negotiable structural rules for the header, footer, breadcrumb, and content root, taken from the posts page. |
|
|
|
|
## Principles
|
|
|
|
- **Tokens over literals.** Every colour, space, radius, and shadow is a CSS custom property defined once in `variables.css`. Stylesheets reference the token, never a raw hex or pixel value.
|
|
- **One layout per page.** A page has a single top-level layout container inside the shared content root; it never nests competing wrappers or re-declares the maximum width.
|
|
- **Mobile is not an afterthought.** Multi-column layouts collapse to one fluid column, touch targets grow, and nothing scrolls horizontally by accident.
|
|
- **Structure is shared, content is per page.** The header, breadcrumb, content root, and footer come from `base.html`. A page supplies only its own content and its own stylesheet.
|
|
{% endraw %}
|
|
</div>
|