-- online Search!

Layouts

Filed under ROFL Design System

ROFL Design System sections

03 / LAYOUTS

Page layouts with screenshots, live examples, and reuse guidance.

Agent Instructions / layouts

You are choosing or extending a kirupa.com page layout. Read /design/layouts.json and the relevant record in /design/sections/layouts.md. Reuse its real source page, regions, navigation, shared includes, and responsive rules; subject or color changes do not create a new layout family. Current articles use the native tutorial shell. Specialized tools and spatial applications have separate requirements. Archived content may use the current shell; legacy shells and the Discourse/Substack companion sites are explicitly labeled and are not new-page templates. Screenshots are fixed captures with recorded appearance, viewport, date, URL, and scroll state. Never pretend to restyle them with CSS filters. Keep capture selection local and preserve full-size image access. Update design/layouts.source.json, run tools/capture_design_layouts.mjs for changed capture definitions, then build the design system. Do not submit forms, quiz answers, chat messages, subscriptions, or plot claims during capture, and never capture private account or visitor data. Deployment requires separate authorization. Follow WCAG 2.2 AA for new or changed content: semantic HTML, keyboard access, visible focus, readable contrast in every theme, text alternatives, labeled controls, and explicit errors. Support zoom/reflow, respect reduced motion, and keep sound optional. Read /design/sections/accessibility.md for acceptance checks. Report unresolved barriers; automated checks alone do not establish conformance.

26 layout references / 9 families / 61 captures

Layout records / Capture metadata

Find a layout

Homepage

Current shell / home

The main entry point, with a welcome feature and the latest articles, newsletter issues, and interviews.

FIXED CAPTURE
KIRUPA homepage with the welcome video above the Latest content cards and the shared navigation.

Desktop / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / Fixed capture, .

Regions
Shared site header and theme controls; Centered welcome feature; Latest-content groups; Shared newsletter and footer.
Reuse
Use for the site front door. Section indexes should use the topic or reference-directory layout instead of copying the welcome feature.
Responsive
The content groups reflow into a narrow column. The desktop capture is 1600px wide; narrower intermediate widths can reserve space for the shared rail even when this page has no topic links.
Sources and capture links index.htmlssi/newDesign/src/kirupa.cssssi/newDesign/src/footer.shtml

Tutorial landing

Current shell / directory

The cross-topic learning hub, with category links followed by recent content.

FIXED CAPTURE
The Learn landing page with two columns of illustrated learning-category links beside the wide-screen forum rail.

Desktop / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / Fixed capture, .

Regions
Shared header; Section title and introduction; Two-column Learning Categories list; Latest-content section; Optional wide-screen forum rail.
Reuse
Use for a broad entry point spanning several subjects. Keep individual lessons in their topic index.
Responsive
The shared .row/.column lists stack below 800px. The right-hand forum rail is omitted at narrower widths; the header uses its compact navigation.
Sources and capture links learn/index.htmssi/newDesign/src/kirupa.cssssi/newDesign/latest.shtml

Topic index

Current shell / directory

A subject's lessons grouped by learning stage or topic.

FIXED CAPTURE
The data structures and algorithms topic index, with Getting Started and Data Structures groups of icon-led lesson links.

Desktop / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / Fixed capture, .

Regions
Section title and introduction; Named topic groups; Icon-led article links; Shared shell and optional forum rail.
Reuse
Use for subject indexes such as data structures, JavaScript, or the modernized Lab landing. Preserve the existing articleList links and group hierarchy.
Responsive
The reading region narrows with the shared shell. Lists remain in document order; optional desktop rails disappear instead of becoming additional content columns.
Sources and capture links data_structures_algorithms/index.htmjavascript_basics/index.htmssi/newDesign/src/kirupa.csshttps://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/index.htm

Tutorial article

Current shell / article

The standard reading layout for explanations, code, diagrams, and embedded examples.

FIXED CAPTURE
A current tutorial with the left topic rail, blue article title and byline, introductory text, and video example.

Desktop / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / Fixed capture, .

Regions
Scrollable topic rail; Article title, byline, and Filed under metadata; Reading column with media and code; Article navigation and footer; Optional wide-screen forum rail.
Reuse
Start from an adjacent current tutorial. Keep the SSI head/header/footer, tutorialInformation, authorText, tutorialInfo, and topic navigation. About pages and MCP documentation also use this reading structure.
Responsive
The native rail hides at 1420px and the reading region becomes one column at 1200px. Images shrink within the column and previous/next links stack. Preserve contained code scrolling.
Sources and capture links html5/building_your_first_web_page.htmssi/newDesign/left_js.shtmlssi/newDesign/src/kirupa.cssssi/kirupa_sig.shtmlmcp/index.php

Reference directory

Current shell / directory

A section directory with descriptive rows and direct links to agent-readable documentation.

FIXED CAPTURE
The Design System index with its section navigation, agent entry block, and two-part directory rows.

Desktop / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / Fixed capture, .

Regions
Section rail; Native title and metadata; Agent entry links; Icon/title and description rows; Previous/next navigation.
Reuse
Use for a documentation index whose entries need short explanations. Keep section links and Markdown/JSON discovery generated from the same source.
Responsive
At 600px the title/icon and description in each row stack. The Design section adds a collapsed section list when its native rail is unavailable.
Sources and capture links design/system.source.jsondesign/template.htmdesign/design.csstools/build_design_system.mjs

Reference catalog

Current shell / article

A reference article containing indexed specimens, local controls, and source or markup disclosures.

FIXED CAPTURE
The Components reference page with native documentation navigation, agent instructions, and contextual examples.

Desktop / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / Fixed capture, .

Regions
Documentation rail; Native title and reference copy; Independently controlled specimens; Catalog index; Source and usage disclosures.
Reuse
Use the Design generator and catalog data. This is an article-body variant; do not replace the shared shell with an application dashboard.
Responsive
Controls wrap and preview frames fit the reading column. Long code stays in its own scroll container; the narrow page exposes the section list above the article.
Sources and capture links design/components.source.jsondesign/design.jsdesign/design.csstools/build_design_system.mjs

Interview catalog

Current shell / directory

A visual interview library with current episodes and an older interview archive.

FIXED CAPTURE
The interview catalog with a left interview rail and a grid of guest and episode thumbnails.

Desktop / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / Fixed capture, .

Regions
Interview rail; Section introduction; Episode thumbnail grid; Classic interview archive; Shared footer.
Reuse
Use for an episode collection. Keep the cards linked to full episode pages and retain the archive as a separate group.
Responsive
The card grid reduces its columns as the content region narrows. The topic rail is removed by the shared shell's smaller-screen rules.
Sources and capture links podcast/index.htmssi/newDesign/left_podcast.shtmlinterviews/interviews.cssssi/newDesign/src/kirupa.css

Interview episode

Current shell / article

A media-led article with a conversation summary, text-only chapter bands, and a speaker-labeled transcript.

FIXED CAPTURE
An interview episode with the interview rail, guest title, byline, and introductory links.

Desktop / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / Fixed capture, .

Regions
Interview rail and article title; Guest introduction and media; Chapter bands and playback links; Speaker portraits, timestamp pills, and transcript turns; Related navigation.
Reuse
Use the podcast renderer and episode data. Keep chapter times linked to the recording and distinguish the transcript from editorial summary.
Responsive
Media follows the reading-column width. Chapter bands are text only and span the transcript column at every width. Speaker headers wrap; the shared interview rail disappears on narrow screens.
Sources and capture links podcast/amit_chopra_life_after_nine_to_five.htmssi/newDesign/src/kirupa.cssssi/newDesign/left_podcast.shtml

Video library

Current shell / directory

A featured video followed by a thumbnail-led list of earlier videos.

FIXED CAPTURE
The video library with a large featured video above a list of earlier video thumbnails.

Desktop / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / Fixed capture, .

Regions
Section introduction; Featured media container; More Videos list; Optional forum rail; Shared footer.
Reuse
Use for the site's video index. Keep a featured item distinct from the rest of the list; a player alone does not require a new shell.
Responsive
The featured media fits the content column. The list remains below it and the shared side regions disappear on small screens.
Sources and capture links learn/videos.htmssi/newDesign/src/kirupa.css

Book catalog

Current shell / directory

A product collection organized into current releases and older books.

FIXED CAPTURE
The Books catalog with cover images, descriptions, and purchase or source actions arranged in rows.

Desktop / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / Fixed capture, .

Regions
Section introduction; Book-cover and description rows; Purchase/source actions; Archive section; Shared shell.
Reuse
Use for a book collection. Keep each cover beside its own summary and actions, with links to the appropriate detail page or retailer.
Responsive
Rows fit the narrow content region and actions wrap. Preserve the association between a cover, title, description, and its links.
Sources and capture links book/index.htmssi/newDesign/src/kirupa.css

Book detail

Current shell / product

A single book's cover, description, purchase action, contents, and FAQs.

FIXED CAPTURE
The HTML5 Canvas book detail with its cover beside the title and purchase link, followed by description and contents.

Desktop / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / Fixed capture, .

Regions
Cover and title feature; Purchase link; Book description and contents; Questions and author information; Shared footer.
Reuse
Use as the existing product-detail reference. Its page-local cover positioning and fixed colors are specific to this book, not new site-wide tokens.
Responsive
At 1024px the cover moves above the title and description. The two contents columns become a single flow.
Sources and capture links book/html5_canvas_noob_to_ninja.htmssi/newDesign/src/kirupa.css

Quiz catalog

Current shell / directory

A subject- and topic-grouped directory of mastery quizzes with links to lessons and saved results.

FIXED CAPTURE
The mastery quiz catalog with collapsible subject navigation, section cards, topic links, and quiz cards.

Desktop / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / Fixed capture, .

Regions
Collapsible subject navigation rail; Catalog introduction and result links; Subject cards and topic anchors; Quiz-card grids with question counts; Shared footer.
Reuse
Extend the quiz catalog generator and data rather than writing a second quiz directory. Keep lesson and result navigation beside the catalog.
Responsive
The auto-fit grid reduces to one column when cards no longer fit. Navigation actions wrap and the shared rail is removed.
Sources and capture links quizzes/index.htmquizzes/catalog.shtmlquizzes/navigation.shtmlquizzes/quiz.css

Quiz question

Current shell / application

A focused question stage with progress, question context, answer controls, and feedback.

FIXED CAPTURE
An Arrays quiz showing progress, a code question, and answer choices within the quiz stage.

Desktop / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / Fixed capture, .

Anonymous first-question state. No answer or attempt submission was made.

Regions
Quiz rail and title; Lesson/catalog/results links; Question progress; Question and answer stage; Working and error messages.
Reuse
Use the quiz runtime and question-bank schema. Keep one active question stage and preserve native answer labels, status, and error behavior.
Responsive
The stage stays single-column. Code is contained within the question; navigation and answer controls fit the narrow stage.
Sources and capture links quizzes/arrays_data_structure.htmquizzes/quiz.jsquizzes/quiz.cssquizzes/navigation.shtml

Saved results

Current shell / application

An account-oriented history page with a forum-connection boundary.

FIXED CAPTURE
The guest view of My Mastery Quiz Results with a forum-account connection prompt and no private score data.

Desktop / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / Fixed capture, .

Guest state only. No account was connected and no private result history was inspected.

Regions
Quiz navigation; Results title and return links; Connection status/action; Saved-attempt region.
Reuse
Reuse the history view in quiz.js. Show a clear guest state before requesting access to private scores.
Responsive
Status and history occupy one reading column. Actions wrap inside the page and the desktop rail is hidden.
Sources and capture links quizzes/results.htmquizzes/quiz.jsquizzes/quiz.css

Asset browser

Specialized current surface / application

A standalone search-and-filter workspace for a large visual asset collection.

FIXED CAPTURE
Pixel Icon Gallery with its blue pixel heading, style tabs, download buttons, icon stats with a Free or Pro? link, search, and category filters.

Desktop / Icon Gallery default / Light / 1600 x 1200 CSS px / page top / Fixed capture, .

Regions
Tool header; Search field; Category and format controls; Result count and asset grid; Per-asset actions.
Reuse
Use the existing Icon Gallery browser for emoji and icon discovery. Its style tabs, search panel, and per-icon downloads are separate from the standard article layout.
Responsive
Filters wrap and the asset grid reduces its columns. Preserve the per-asset labels and actions instead of shrinking a desktop grid to fit.
Sources and capture links tools/icon_gallery_template.htmtools/icon_gallery_pixel.htmtools/cleanedUpTwemoji.js
  • Desktop / Captured page / Icon Gallery default / Light / 1600 x 1200 CSS px / page top / 2026-11-05
  • Phone / Captured page / Icon Gallery default / Light / 390 x 844 CSS px / scrolled 991px / 2026-11-05

Visitor globe

Specialized current surface / application

A visualization-led page pairing a large globe with an activity table.

FIXED CAPTURE
The visitor page's title, explanation, and globe stage; live presence requests are blocked for this reference capture.

Desktop / Pixel / Blue / Light / 1600 x 1500 CSS px / page top / Fixed capture, .

Presence requests were blocked for privacy. The capture documents the page structure, not current visitor locations or activity.

Regions
Native title and explanation; Globe stage; Online/recent-arrivals table; Status announcements and privacy information.
Reuse
Reuse the globe page's visualization and table regions for this experience. A dashboard needs explicit loading, empty, and failure states.
Responsive
The globe scales with its stage and the table follows below it. Keep any necessary table scrolling local to the table region.
Sources and capture links whos-online/index.phpwhos-online/clay-globe.csswhos-online/clay-globe.js

Spatial application

Specialized current surface / application

A full-viewport community map with its own exploration and editing controls.

FIXED CAPTURE
kirupaVille's full-viewport pixel city with the dock toolbar, zoom controls, and minimap.

Desktop / Pixel site chrome / kirupaVille default / 1600 x 1200 CSS px / page top / Fixed capture, .

Public exploration view. The welcome dialog was dismissed with Escape; no plot was selected, claimed, or edited.

Regions
Shared site header; Pannable city viewport; Dock toolbar; Minimap and zoom controls; Drawers, inspector, and dialogs.
Reuse
Use this structure only for a spatial workspace. Keep navigation, viewport gestures, selection, and editor state separate from article scrolling.
Responsive
The world remains pannable rather than collapsing into a content list. The dock and overlays adapt to the available screen; inspect both desktop and touch-sized captures.
Sources and capture links lab/kville/main.htm
  • Desktop / Captured page / Pixel site chrome / kirupaVille default / 1600 x 1200 CSS px / page top / 2026-10-21
  • Phone / Captured page / Pixel site chrome / kirupaVille default / 390 x 844 CSS px / page top / 2026-10-21

Live ranked list

Specialized current surface / directory

A time-windowed content ranking with an update timestamp and explicit empty state.

FIXED CAPTURE
What's Popular with its 24-hour window, update metadata, and the actual result state at capture time.

Desktop / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / Fixed capture, .

Regions
Shared shell; Ranking explanation; Time-window/update metadata; Ranked results or empty state.
Reuse
Treat this as the existing dynamic-list reference. Preserve its time-window label and empty state; do not infer its server implementation from the screenshot.
Responsive
The public page keeps the ranking in one narrow content column while the shared header and side regions adapt.
Sources and capture links

Evidence is the public rendered page. popular.php's server source was not present in the reviewed checkout.

Anchored archive

Archive content / current shell / directory

A long categorized link archive with an in-page table of contents.

FIXED CAPTURE
The Design Center archive with an anchor-based category rail and categorized tutorial links in the current shell.

Desktop / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / Fixed capture, .

Regions
Anchor-based section rail; Native archive title; Category headings and link lists; Links back to current sections.
Reuse
Use for retained content that still needs an organized entry point. The content is historical; this page's shell is current.
Responsive
The archive lists remain one reading column. The desktop anchor rail is hidden on small screens, while the same section headings remain in the document.
Sources and capture links design/archive.htmssi/newDesign/src/kirupa.css

Embedded experiment

Archive content / current shell / article

An archived interactive experiment presented inside the current article shell.

FIXED CAPTURE
The Comet experiment with the current Lab rail, archive notice, and a Ruffle player inside the reading column.

Desktop / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / Fixed capture, .

Regions
Lab navigation rail; Article title and author; Archive notice; Aspect-ratio player; Instructions and source/download context.
Reuse
Use the published Lab wrapper for preserved SWF experiments. Keep the Ruffle player, fallback, attribution, and archive notice together.
Responsive
The player fits its container while retaining the source aspect ratio. The article follows the shared rail and reading-column breakpoints.
Sources and capture links

Published Lab release 87b8d16c, not the older Lab files in the inventory baseline.

https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/comet.htmhttps://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/lab.csshttps://github.com/kirupa/kirupaWWW/blob/87b8d16c/ssi/newDesign/left_lab.shtml

Contest entries

Archive content / current shell / gallery

A competition archive combining rules, attribution, and a collection of interactive entries.

FIXED CAPTURE
FXpression's current article shell with its contest introduction and rules.

Desktop / Pixel / Blue / Light / 1600 x 1200 CSS px / page top / Fixed capture, .

Regions
Lab rail and contest introduction; Contest details and rules; Stacked player entries; Entry attribution and result context.
Reuse
Keep competition context above its entries. Reuse labGridPlayers for the player collection; image-based battles use the same current shell with inline entry images and winner badges.
Responsive
The source defines a centered single-column player grid. The 390px capture exposes horizontal overflow in some entries despite the source sizing rules. This is a live limitation, not a recommended phone treatment.
Sources and capture links

Published Lab release 87b8d16c. The image-based battle variant is included as a separate capture.

https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/fxpression.htmhttps://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/battles.htmhttps://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/lab.css

Legacy multi-column shell

Legacy shell / legacy

A retained older section index with compact navigation, a narrow link column, and a promotional sidebar.

FIXED CAPTURE
The older Blend/WPF index with its compact header, narrow left navigation, dense tutorial list, and right promotional column.

Desktop / Legacy shell / default appearance / 1600 x 1200 CSS px / page top / Fixed capture, .

Regions
Older header/search module; Left navigation module; Compact subject list; Right promotion column; Older footer modules.
Reuse
Historical reference only. For a new index, use the current topic layout; do not import this shell's spacing or module CSS.
Responsive
This layout predates the current responsive shell. The phone capture documents its actual scaled or constrained presentation, not a recommended mobile pattern.
Sources and capture links blend_wpf/index.htmssi/header_module.shtml
  • Desktop / Captured page / Legacy shell / default appearance / 1600 x 1200 CSS px / page top / 2026-10-21
  • Phone / Captured page / Legacy shell / default appearance / 390 x 844 CSS px / page top / 2026-10-21

Forum topic list

Companion site / community

The public Discourse community's topic browser.

FIXED CAPTURE
The public forum with category navigation, topic filters, and topic rows containing authors and activity metadata.

Desktop / Forum default / Light / 1600 x 1200 CSS px / page top / Fixed capture, .

Regions
Forum header and account actions; Category sidebar; Search and list tabs; Topic rows with activity metadata.
Reuse
Change this through the forum's Discourse theme and components. Its layout and account controls are not kirupa.com SSI templates.
Responsive
The mobile forum uses compact navigation and rearranged topic metadata. The separately captured phone view is the evidence for this platform behavior.
Sources and capture links

Public Discourse rendering. The deployed forum theme configuration is outside this repository.

Forum conversation

Companion site / community

A threaded public discussion with author identity, posts, actions, and timeline navigation.

FIXED CAPTURE
A public forum topic with its title, author identities, code-containing posts, and a right-hand timeline.

Desktop / Forum default / Light / 1600 x 1200 CSS px / page top / Fixed capture, .

Regions
Forum header and sidebar; Topic title and category; Post stream; Author and post actions; Topic timeline.
Reuse
Use Discourse's topic view for discussions. Do not reproduce a forum thread as a native article or initialize a posting action inside a design preview.
Responsive
The post stream takes the narrow viewport while desktop sidebar/timeline controls change position or collapse. Code remains within each post.
Sources and capture links

Public Discourse rendering. Only anonymous, read-only topic access was used.

Newsletter publication

Companion site / publication

The separately hosted newsletter's public article archive.

FIXED CAPTURE
The KIRUPA newsletter archive on Substack with publication navigation, list tabs, and article previews.

Desktop / Substack publication default / Light / 1600 x 1200 CSS px / page top / Fixed capture, .

Regions
Publication header and subscription controls; Latest/Top/Discussions tabs; Article rows with thumbnails and metadata; Publication navigation.
Reuse
Use Substack's publication interface for the newsletter archive. The kirupa.com newsletter promotion links to this experience; it does not share the site's article shell.
Responsive
The publication header becomes compact and archive rows fit the phone viewport. Substack controls this behavior independently of kirupa.com styles.
Sources and capture links

Public Substack rendering at kirupa.chat. Its template is not stored in this repository.

Inventory scope and capture method

Page-layout families and structural variants found through the site's navigation, section indexes, source templates, and public pages. Content-only differences share a record. This is a maintained family inventory, not a census of every historical HTML file or tutorial demo.

Review the shared header/footer and Learn destinations, compare the representative pages and their SSI/CSS regions, and capture the public result. Check specialized catalogs, applications, archive indexes, and the forum/newsletter separately. A different subject, title, illustration, or color does not create a new layout.

Source baseline: 98c81538.

Modernized Lab pages and left_lab.shtml: 87b8d16c. Published and verified by the Lab owner before capture, but not merged into the source baseline. Lab source links are pinned to this release rather than the older files on main.

Anonymous Chromium captures in isolated contexts. No form submissions, quiz answers, subscriptions, chat messages, or plot claims. Presence and tracking requests are blocked. Screenshots retain their captured appearance; local selectors only switch actual images. Public member artwork and third-party screenshots retain their owners' rights.

  • Tutorial exercises, downloadable projects, isolated embedded demos, and old shell backups are not separate site-layout recommendations.
  • Redirects such as tutorials.htm, apps/index.htm, and Lab example.htm/experiments.htm are destinations to resolve, not layouts to capture.
  • Private account history, administration, authentication flows, visitor records, and error/redirect endpoints are outside the public capture inventory.
  • External retail and social-network pages are not cataloged. The forum and newsletter are included as explicitly separate companion experiences.
  • Legacy coverage is representative. An old article's subject or directory does not prove that its current page still uses a legacy shell.

Grouped examples

To add or refresh a layout, follow the Markdown extension recipe. Update the source record and captures before rebuilding.

Source mapdesign/layouts.source.jsontools/capture_design_layouts.mjstools/design_layouts.mjsdesign/template.htmssi/newDesign/src/kirupa.css

The KIRUPA Newsletter

Thought provoking content that lives at the intersection of design 🎨, development 🤖, and business 💰 - delivered weekly to over a bazillion subscribers!

SUBSCRIBE NOW

Creating engaging and entertaining content for designers and developers since 1998.

Follow:

Popular

Loose Ends

:: Copyright KIRUPA 2026 //--