Skip to content

README.md

Latest commit

 

History

History
80 lines (57 loc) · 3.05 KB

README.md

File metadata and controls

80 lines (57 loc) · 3.05 KB

Marginalia

15 components, CSS custom properties, zero dependencies.

Extracted from Inside the Math and Scrutinizer blog posts. Inspired by the editorial layouts of Rolling Stone and early Wired.

Marginalia showcase

Live Demo & Documentation

Install

<link rel="stylesheet" href="marginalia.css">
<script src="marginalia.js" defer></script>

JS is optional. All components work without it.

Vite / npm

npm install marginalia
import 'marginalia/marginalia.css';
import { convert } from 'marginalia/md';

document.querySelector('#content').innerHTML = convert(markdownString);

Markdown Converter

marginalia-md.js converts a markdown subset into Marginalia-classed HTML. Write standard markdown — GitHub-style alerts, fenced code blocks, ==highlights==, {badges} — and get styled components out.

<script src="marginalia-md.js" defer></script>
<script>
  document.querySelector('#content').innerHTML = Marginalia.md(markdownString);
</script>

See llm.md for the full pattern reference, designed to drop into an LLM system prompt.

Components

Component Element Key feature
Callout <div class="mg-callout" data-type="note"> 4 semantic variants, left-border indicator
Pull quote <aside class="mg-pull"> 3D perspective tilt, text aligns to border, shape-outside wrapping
Code block <pre class="mg-code" data-lang="js"> Language label, copy button (JS)
Badge <span class="mg-badge"> Small caps, inline label
Collapse <details class="mg-collapse"> Native <details>, smooth animation (JS)
Highlight <mark class="mg-mark"> Theme-aware inline highlight
Drop Cap <p class="mg-dropcap"> ::first-letter large initial, ornate variant
Lead-in <span class="mg-lede"> Rubricated opening words, small-caps variant
Footnotes <span class="mg-fn"> Auto-numbered popover, tap-to-toggle
Gallery <figure class="mg-gallery"> Click-to-expand lightbox, side-by-side compare
Inline Skew <div class="mg-callout mg-skew"> Perspective-tilted block callout
Sidebar <aside class="mg-sidebar"> Float-right body-copy tangential note
Margin Note <div class="mg-margin"> Escapes into gutter on wide screens, inline on mobile
Content Mode data-content="repeat|insert" Signals duplicated body text vs new standalone content
Spread <div class="mg-spread"> Two-column magazine layout, callouts bridge columns

Usage Examples

<!-- Drop cap -->
<p class="mg-dropcap">Your opening paragraph.</p>
<p class="mg-dropcap" data-type="ornate">Ornate variant with border accent.</p>

Theming

Dark by default. Override via CSS custom properties (--mg-*). Light theme via data-mg-theme="light" or prefers-color-scheme.

License

MIT