Recently I've been working on a couple of projects that required on-line documentation.  After looking at several existing templates and not finding any that were quite right for what was needed, I decided to take the time to build one. The result is "DocBrowser - A HTML Template for Documentation". The best way to get a feel for DocBrowser is to test drive it yourself.  The DocBrowser documentation itself uses the template. . Check it out here This post is a quick look of some of its features. Navigation Tree Besides the content, the most prominent part of DocBrowser is the navigation tree. One of the things that bothered me about the navigation trees in other templates is that they didn't maintain their position when transitioning between pages.  Not only is this distracting but it makes it awkward to click through a sequence of pages because you can easily lose your place after each click. I was after something more like a single page app and while I did consider that approach I needed something that would work for static HTML files with no server involved. DocBrowser uses session state to store the tree state (ie: which nodes are expanded vs collapsed) and its scroll position.  I also spent considerable effort making the transition as flicker/flash/jump/jitter free as possible. ... clicking between pages in the tree is pretty seamless. Try it for yourself Navigation Tree Filtering The navigation tree can be filtered - just type in the filter box at the top of the tree, and it will show the matching items: By default the filtering matches on the text of each leaf node in the tree but you can customize the search text to make it match on different text to what's displayed. . See here "On this page" Links This is a fairly common feature and while there's nothing special about DocBrowser's implementation, it is supported: These links are created automatically from article headings that have an id attribute.  You can also customize the text displayed in the side bar with a data attribute on the heading. . See here Heading Anchor Links DocBrowser automatically adds link icons to headings. When you hover over a heading a little link icon appears that you can use to create a link to that location in the document. Responsive Design DocBrowser works well on small screens: the "On this page" links are hidden, the wide aspect logo is reduced to a square icon and, the navigation panel is moved to a popup menu. On large desktop displays, to improve the reading experience, DocBrowser deliberately limits the main content width and keeps it centered in the browser window: Other Features DocBrowser also includes: areas, including project logo or icon display Header and footer Ability to for pages that need similar styling but don't need the navigation tree. remove the navigation panel with Prism.JS. (including some suggestions on how to reduce jitter between transitions that Prism can cause) Syntax highlighting A couple of that are often used in documentation table styles based on the current responsive display state (eg: display different help text about the navigation menu depending whether it's shown to the left vs in the popup panel). Conditional content Dependency Free Aside from Prism.JS (which you can remove if you don't need it), DocBrowser is completely dependency free.  No jQuery, nor any other libs. I even removed a dependency on FontAwesome by putting together a tiny custom font for the 3 icons it uses (the heading anchor link chain, the tree expander chevron and the hamburger menu). Packaging DocBrowser is available as a .zip file ( ) that includes the styles sheets, script files, the custom font and a heavily commented example layout file showing how the HTML markup should look.  The zip also includes minified and source mapped styles sheets and scripts. get it here Finally, I've written up on a recommended approach to using the template such that if I release a new version integrating it with your changes won't be too painful. instructions Wrap Up So there you have it: DocBrowser, a nice HTML template for documentation that's easy to integrate, easy to customize, and provides a great reading experience. Feel free to use it in your own projects ( ) and if you do - or if you have suggestions for how it could be improved. see license let me know DocBrowser is a Product developed by I, Brad Robinson, under the Apache 2.0 license. Hope you guys like it. Random Galaxy Generation With each post I like to help spread the word on other people's projects.  This time, it's in the family... My son Mitch is working on a game where they needed randomly generated galaxy images.  Check out his post and the game . Random Galaxy Generation with C# and OpenGL Sector's Edge

Chain

Apache

...So I Ended up Making DocBrowser - An HTML Template for Documentation

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Moe-js - A Modern Template Engine for JavaScript

How To Stay On Top Of Your Dependency Management

10 Knowledge Base Software Best Practice Examples

5 reasons to ditch the paper and start document automation

5 Software Documentation Tools That Make Managing Technical Documentation Easier

Moe-js - A Modern Template Engine for JavaScript

How To Stay On Top Of Your Dependency Management

10 Knowledge Base Software Best Practice Examples

5 reasons to ditch the paper and start document automation

5 Software Documentation Tools That Make Managing Technical Documentation Easier

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps