Guide
Introduction
This guide layout is optimized for long pages: a narrow readable measure, sticky table of contents on wide screens, smooth scrolling, and a floating back-to-top button.
Design notes
The typography favors legibility (comfortable line-height and max width). The page is responsive and printable.
Getting started
Structure
Split your guide into semantic sections and add id attributes for direct linking. Use details blocks for optional deep dives.
<section id="example">
<h2>Example</h2>
<p>Content...</p>
</section>Progress & Tips
For very long pages, prefer internal anchors and a top-level TOC so readers can jump quickly. Break content into smaller logical chunks.
Examples
Use lists, code blocks, and collapsible sections. Consider paginating extremely long tutorials or adding search/filter for the TOC.
FAQ
How do I add a new section to the TOC?
Add an anchor link in the nav and an element with the matching id in the main content.
How to keep the page fast?
Avoid heavy DOM updates during scroll and defer large images. Lazy-load media where possible.
Changelog
Keep an appended changelog or version history at the end of the document so readers can scan for recent changes without losing place in the main guide.
End of guide. Use the TOC to jump to sections, or the button to return to top.