DocBrowser v0.9

Welcome to DocBrowser

DocBrowser is a HTML template for documentation.

  • Responsive design
  • Navigation tree with user filtering
  • Automatic "On this Page" links
  • Automatic article heading anchor links
  • Logo, icon, header and footer links
  • Includes minified and source mapped style sheets and script
  • No dependencies

DocBrowser tries to provide the best reading experience possible by:

  • Maintaining the navigation tree state across page transitions
  • Minimizing flicker and jitter across page transitions
  • Limiting the width and keeping centered the main content area on wide screen displays.

Documentation

For documentation refer to the topics in the navigation panel to the left.
For documentation refer to the topics in the popup navigation menu accessible via the menu button at the top left.

The demo pages are only included to provide more content for experimenting with the navigation panel.

Live Example

Interested in a live example of DocBrowser? You're looking at it :)

Things to try:

  • Type "apple" or "ch" into the nav panel filter box.
  • Expand/collapse the various navigation tree nodes and notice the state is maintained between Pages.
  • Scroll the navigation panel and notice it too is maintained between Pages.
  • On a longer page, scroll the main content up and down and notice the "On this page" links highlight. Also try clicking on the "On this page links".
  • Hover over a heading in the main content area - notice the little link icon popup. Right click on this to copy a link to that section.
  • Try adjusting the size of the window (and/or zoom in-out).
  • Notice when the browser window is small, the logo image at the top left switches to the smaller icon version, the navigation panel disappears into a popup menu and the "on this page" links get hidden.
  • Notice when the browser windows is large, the main content is width limited and kept centered.
  • Notice that page transitions are either entirely (or almost, depending on browser) flash, flicker and jitter free.
  • See this page for an example with the navigation tree removed

Subscribe for more like this. No spam, just fun tech stuff :)

Or, find me on Twitter: @toptensoftware.