RhodeCode Style Guide

v5.11.4

Colors

All colors are CSS custom properties defined on :root. No preprocessor variables. Change the token, change the world.

Core

--bg
#fafafa
--surface
#ffffff
--text
#1a1a1a
--text-muted
#6b7280
--border
#e0e0e0
--accent
#2563eb

Semantic

--success
#059669
--warning
#d97706
--danger
#dc2626
--info
#2563eb

Typography

System font stack for sans-serif. Modern monospace stack for code. 16px base. 1.6 line height. Maximum 65ch measure for body text.

2rem Page Title
1.5rem Section Title
1.125rem Subsection Title
1rem Body text — the quick brown fox jumps over the lazy dog.
0.875rem Secondary text, form labels, table cells.
0.75rem Caption, metadata, timestamps.
mono git commit -m "code outlasts authors"

Spacing

4px base unit. 8-step scale. Use CSS custom properties for consistency.

--space-1
--space-2
--space-3
--space-4
--space-5
--space-6
--space-7
--space-8

CSS Grid Layout

All layout uses CSS Grid. No flexbox. No floats. Grid handles both macro layout (page structure) and micro layout (component internals).

12-column grid

1
2
3
4
5
6
7
8
9
10
11
12
span 8 — main content
span 4 — sidebar
span 4
span 4
span 4
<div style="display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px;"> <div style="grid-column: span 8;">Main content</div> <div style="grid-column: span 4;">Sidebar</div> </div>

Buttons

Simple, accessible buttons. Keyboard-focusable with visible focus rings. Use <button> for actions, <a> for navigation.

Sizes

<button class="btn btn-primary">Primary</button> <button class="btn btn-secondary">Secondary</button> <button class="btn btn-danger">Danger</button> <button class="btn btn-ghost">Ghost</button>

Forms

Native HTML5 form elements. No custom dropdowns unless absolutely necessary. Use <datalist> for autocomplete. Use required, pattern, and type for validation.

Letters, numbers, hyphens, and underscores only.

Alerts

Capability-driven: dismiss buttons are js-only. Without JavaScript, users see the message but not a broken dismiss button.

✓ Repository my-project created successfully.
⚠ Your session will expire in 5 minutes.
✗ Failed to merge pull request: conflicts detected.
ℹ A new version of RhodeCode is available.

Cards

Content containers with optional header and footer. Use CSS Grid for card layouts.

Pull Request #142

Fix session handling for cookie-based authentication. Remove beaker dependency entirely.

Approved
Pull Request #143

Modernize UI: remove jQuery, switch to CSS Grid, add living style guide endpoint.

Review Required
Pull Request #144

Add SQLite3 support for single-instance deployments on permacomputer hardware.

Draft

Tables

Native HTML tables with minimal styling. Wrapped for horizontal scroll on narrow screens.

Commit Message Author Date
4f73837 Remove beaker dependency, switch to SignedCookieSessionFactory fox 2 hours ago
ceb23e4 release(version-bump): 5.11.3 → 5.11.4 andverb 1 day ago
93d4bc5 Cleanup, better handling for multiline comments andverb 3 days ago

Badges

Feature Merged Pending Rejected Draft

Details / Accordion

Native <details> element. Works without JavaScript. Progressive enhancement at its finest.

Repository Settings

Configure repository name, description, landing page, and permissions. All changes take effect immediately.

VCS Configuration

Configure hooks, large file storage, and protocol settings for this repository.

Danger Zone

Destructive actions that cannot be undone. Proceed with caution.

Dialog

Native <dialog> element with showModal(). Accessible by default. Backdrop handled by CSS. The trigger button is js-only — no broken button without JS.

Confirm Merge

You are about to merge pull request #142 into main. This action cannot be undone.

Repository List

Repository listing with icon, info, and metadata. CSS Grid three-column layout.

G

rhodecode-enterprise-ce

Enterprise Source Code Management Platform

★ 42 ⋔ 7
M

make_post_sell

Commission-free digital and physical sales

★ 18 ⋔ 3
H

remarkbox

Hosted comment system, embeds in pages

★ 31 ⋔ 5

Diff View

Side-by-side line numbers with CSS Grid. Monospace font. Addition and deletion colors.

rhodecode/lib/rc_beaker.py
8 -from beaker import cache
9 -from beaker.session import SessionObject, Session
8 +from pyramid.session import SignedCookieSessionFactory
9 +from pyramid.settings import asbool
10 10
11 11
12 -class CustomSession(Session):
13 - pass
12 +def session_factory_from_settings(settings):

Code Blocks

Inline code and block-level pre/code. Monospace font stack.

def session_factory_from_settings(settings): """Return a Pyramid session factory using signed cookie session settings.""" prefixes = ("session.", "beaker.session.") options = {} for k, v in settings.items(): for prefix in prefixes: if k.startswith(prefix): options[k[len(prefix):]] = v return SignedCookieSessionFactory(**factory_kwargs)

Capability-Driven Presentation

A web page does not need to look the same on every browser or device. Capability drives presentation. Deliver identical content regardless of viewer capabilities. Use the viewer's capabilities to gracefully enhance the presentation.

The js-only Pattern

Elements with class="js-only" are hidden when JavaScript is unavailable. This prevents presenting broken interactive elements to users whose browser cannot execute them.

<noscript> <style>.js-only { display: none !important; }</style> </noscript> <!-- The dismiss button only shows when JS can handle it --> <div class="alert alert-success"> <span>Repository created.</span> <button class="alert-dismiss js-only">&times;</button> </div>

The Rules

  1. Maintain a single canonical URI for all users.
  2. Deliver identical content regardless of viewer capabilities.
  3. Use the viewer's capabilities to gracefully enhance the presentation.
  4. Never present a broken button to the user.
  5. CSS Grid only. No flexbox. No floats.
  6. No jQuery. No CSS preprocessors. No framework bloat.
  7. Native HTML5 elements first: <details>, <dialog>, <datalist>.
  8. Code outlasts authors. Infrastructure outlasts builders.