Styles#

The frontend leans heavily on UIkit for layout and components. Project styles add a thin layer of brand-specific helpers, layout glue, and a handful of UIkit overrides. Everything lives in app/richy/core/static/sass/ and compiles via Webpack into static/css/app_build.css, loaded by core/_js_css.pug.

Source layout#

app.sass is the entry point. It @use-s seven partials in order and declares the global utility classes.

  • _meter.sass – .meter (HTML <meter>) layout, with .min / .max labels and a .with-prefix two-column variant.

  • _dashboard.sass – .dashboard-performance-chart desktop-only max-width.

  • _loading.sass – .loading spinner (CSS @keyframes rotation), with an .in-container absolute-centered variant.

  • _chart.sass – .chart set to position: relative so absolute-positioned chart overlays anchor correctly.

  • _badge.sass – .richy-dual-badge two-tone label badge.

  • _basic_info.sass – .basic-info table th padding tweak.

  • _overrides.sass – UIkit class overrides (see UIkit overrides below).

Project-wide utility classes#

Declared directly in app.sass. Reference them from any template or template tag without needing a @use.

  • .richy-green / .richy-red – brand “up” / “down” colors (#00C853 / #EF476F). Emitted by template tags such as move_arrow() and color_perc_change().

  • .richy-sidebar-left – 300px fixed-width left sidebar on desktop; pairs with a margin-left: 300px rule on main for the content offset (@media(min-width: 960px)).

  • .richy-flex-gap – gap: 15px for flex containers.

  • .richy-hand – cursor: pointer.

UIkit overrides#

_overrides.sass carries the small set of overrides applied to UIkit classes – heading font-weight, navbar background color (the $primary brand blue #1e87f0), label sizing, table font-size, a.uk-card-badge hover state. These are intentionally narrow; project styles should not fork UIkit components, just nudge their defaults.

Build pipeline#

SASS sources compile through Webpack alongside Vue components (see Components). The output is app/richy/static/css/app_build.css; core/_js_css.pug loads it next to UIkit’s stylesheet and the Bootstrap Icons font. See Frontend for the full build toolchain.