✏️ Edit Page

Documentation Directory

HELIX Jekyll Theme Documentation

Comprehensive guide, component documentation, layout options, and configuration reference for the shared HELIX Jekyll Theme.

🎨 HELIX Jekyll Theme Guide

Welcome to the HELIX Jekyll Theme documentation. helix-jekyll-theme is the shared, remote-compatible Jekyll theme engine powering all web properties across the HELIX Origin organization.

It provides a modern dark-mode aesthetic, responsive layouts, 18-language Google Translate integration, precompiled Dart Sass styles, and extensible component partials.

🚀 Quick Start

To use the theme in any GitHub Pages Jekyll repository, add the following to your _config.yml:

remote_theme: HELIX-Origin/helix-jekyll-theme

plugins:
  - jekyll-remote-theme
  - jekyll-relative-links
  - jekyll-optional-front-matter
  - jekyll-default-layout
  - jekyll-sitemap
  - jekyll-feed
  - jekyll-seo-tag

🧩 Supported Layouts

The theme provides three core layouts:

  1. default: Minimal baseline layout with header navigation, translation dropdown, main content block, and footer.
  2. docs: Multi-column documentation layout with sticky sidebar navigation, active page indicator, table of contents, and pagination.
  3. wiki: Technical wiki layout optimized for long-form documentation, code snippets, Mermaid diagrams, and deep technical specifications.

🌐 18-Language Translation Switcher

The theme includes a lightweight, asynchronous Google Translate integration supporting 18 international languages:

  • English (en), Japanese (ja), Korean (ko), Simplified Chinese (zh-CN), Traditional Chinese (zh-TW), German (de), French (fr), Spanish (es), Italian (it), Portuguese (pt), Russian (ru), Polish (pl), Dutch (nl), Turkish (tr), Arabic (ar), Vietnamese (vi), Indonesian (id), and Thai (th).

The switcher loads non-blocking scripts, uses sessionStorage to persist preferences across page transitions, and avoids layout shifts.

🎨 SCSS & Styling Architecture

The stylesheet is built using modern Dart Sass (assets/css/site.css) following the 7-1 Sass pattern:

  • Abstracts: CSS variables, responsive typography scale, breakpoint mixins.
  • Base: Reset, normalized root variables, typography.
  • Components: Buttons, cards, badges, alerts, search inputs, code blocks, modals.
  • Layout: Header, navbar, doc-sidebar, grid systems, footer.
  • Themes: High-contrast dark theme with glowing accent borders.