Quick start ​

Put this in the document <head>. Bootstrap first, then Sqrl.

html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="https://design.sqrl.nl/dist/sqrl-theme.min.css" />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=Manrope:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,600&display=swap"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Use Bootstrap 5 classes. Add Sqrl custom classes only where a page shows the Sqrl custom tag. Patterns: Buttons.

Design.md ​

Whole design system in one Markdown file. Give this to a model instead of scraping the site. Download here

When a model reads that file:

  • sq-preview is a docs-only example frame. Copy the markup inside it (or the HTML fence below). Do not emit sq-preview in an app.
  • sq-source-tags are docs-only. Bootstrap = stock Bootstrap 5 classes (themed). Sqrl custom = extra classes (sq-*, btn-ghost, …) — use only those.
  • Load Bootstrap CSS, then sqrl-theme.min.css. Follow Rules on each page as constraints.