Cool.css — Noderyx Documentation

01

Include it

Cool.css ships with the framework and is copied into public/ when a project is generated. One stylesheet link is the whole setup.

resources/views/home.noderframe

head
  meta name="viewport" content="width=device-width, initial-scale=1"
  link rel="stylesheet" href="/public/cool.css"

02

Layout primitives

Containers, stacks, rows, and grids cover most page structure without writing new CSS.

cool-container Centred page width with responsive padding.

cool-stack Vertical rhythm between children.

cool-row Horizontal group that wraps on small screens.

cool-grid Responsive column grid.

cool-safe-area Respects device notches and home indicators.

NODERFRAME

main.cool-container
  div.cool-stack
    h1 "Pricing"
    div.cool-grid
      article.cool-card
        h3 "Starter"
        a.cool-btn href="/signup" "Choose"

03

Components

Buttons, cards, badges, muted text, and mobile navigation are styled and accessible out of the box, including visible keyboard focus.

NODERFRAME

a.cool-btn href="/start" "Start building"
span.cool-badge "Beta"
p.cool-muted "Secondary information."
article.cool-card
  h3 "A card"

04

Theme with variables

Override design tokens at the root instead of rewriting components. Colour, surfaces, typography, spacing, radius, and shadow all read from custom properties.

public/cool.css

:root {
  --cool-primary: #7257ff;
  --cool-radius: 1rem;
  --cool-surface: #f4f2ec;
  --cool-ink: #0b0b0d;
}

NOTE

Keep text contrast and a visible focus ring when you change colours—both are accessibility requirements, not preferences.

05

Light and dark

The theme is driven by a data-theme attribute on the root element, and the shipped site script wires a toggle button to it and remembers the choice.

NODERFRAME

button.nx-theme type="button" data-theme-toggle="true" aria-label="Switch color theme" "Dark"

NOTE

Style dark mode with :root[data-theme="dark"] selectors so the toggle wins over the system preference.

06

Declarative actions instead of inline handlers

The Content-Security-Policy has no unsafe-inline, so onclick attributes never run. The bridge handles the common cases through data attributes—which also work in packaged and native builds.

NODERFRAME

button.cool-btn data-noderyx="back" "Go back"
button.cool-btn data-noderyx="reload" "Try again"
button.cool-btn data-noderyx="share" "Share"
button.cool-btn data-noderyx="install" "Install app"
button data-copy="npm run dev" "COPY"

07

Accessibility built in

The defaults assume real users on real devices.

Visible focus styles that survive theming.
Reduced-motion rules for animation-heavy sections.
Safe-area padding for notched devices.
Responsive type and spacing scales rather than fixed pixel sizes.
Semantic markup expectations: main, nav, article, and descriptive link text.

08

What travels to devices

The packaged mobile build renders all of Cool.css in a WebView. The native build translates a subset into StyleSheet objects—layout, type, buttons, cards, and inputs—so gradients, blur, and CSS animation have no equivalent there.

NOTE

Design the shared parts with the translated subset in mind, then add web-only flourishes in a stylesheet the native build never reads.