QuickRef Cheatsheet

Quick reference for building cheatsheets

Reference

Contents

Page Structure Sections & Cards Syntax Highlighting Tag Classes Grid Layout Tips & Patterns

🏗️

Page Structure

<!-- Basic cheatsheet template -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav>...</nav>
  <div class="container">
    <div class="hero">
      <h1>Title Cheatsheet</h1>
      <p class="subtitle">...</p>
      <span class="tag tag-lang">Language</span>
    </div>
    <div class="toc">...</div>
    <!-- sections here -->
  </div>
  <script src="spotlight.js"></script>
  <script src="sheet-grid.js"></script>
</body>
</html>

📦

Sections & Cards

<!-- Each section becomes a card -->
<div class="section" id="basics">
  <div class="section-header">
    <span class="icon">📚</span>
    <h2>Basics</h2>
  </div>
  <div class="code-wrapper">
    <pre><code>
      code content here
    </code></pre>
  </div>
</div>

# sheet-grid.js converts sections
# to a 2-column masonry grid
# with collapsible expand buttons

🎨

Syntax Highlighting Spans

# Available classes:
<span class="kw">keyword</span>      Keywords (if, for, class)
<span class="str">string</span>       Strings
<span class="fn">function</span>     Function names
<span class="tp">type</span>         Types (int, str)
<span class="cm">comment</span>      Comment style (same as cmt)
<span class="cmt">comment</span>      Comment style
<span class="num">42</span>           Numbers
<span class="op">=></span>            Operators

# Example:
<span class="kw">const</span> x = <span class="num">42</span>;

🏷️

Tag Classes

# In the hero section:
<span class="tag tag-lang">Language</span>
<span class="tag tag-db">Database</span>
<span class="tag tag-concept">Concept</span>
<span class="tag tag-fw">Framework</span>
<span class="tag tag-auth">Auth</span>

# Colors (from styles.css):
tag-lang     → blue/purple
tag-db       → orange/amber
tag-concept  → teal/green
tag-fw       → pink/magenta
tag-auth     → red/crimson

📐

Grid Layout

# sheet-grid.js auto-converts sections
# into a masonry-style 2-column layout

# The script:
1. Wraps all .section in .sections-grid
2. Creates 2-column layout
3. Distributes cards by shortest column
4. Adds "Show more" expand buttons
5. Hides overflow content (max-height)
6. Responsive: 1 column on mobile

# TOC grid (in hero):
<div class="toc">
  <div class="toc-title">Contents</div>
  <div class="toc-grid">
    <a href="#section-id">Label</a>
  </div>
</div>

💡

Tips & Patterns

# Aim for 6-10 sections per sheet
# Keep code examples short & practical
# Use comments for descriptions
# Consistent icon per section

# Escape HTML in code blocks:
&lt;   for <
&gt;   for >
&amp;  for &

# Python triple quotes in generators
# cause issues — use HTML entities:
&#39;&#39;&#39;   instead of literal &#39;&#39;&#39;

# Search: spotlight.js provides Ctrl+K
# Filter: searchInput filters sections
# Copy: auto-added to code-wrapper