1. Start
  2. What is this?
  3. Features
  4. How much does it cost?
  5. How does it work?
  6. How can I save my docs?
  7. HTML Structure
  8. Customisation
  9. SyntaxHighlighter
  10. Custom Classes
  11. Inline Linking & Deeplinks
  12. Autosave
  13. JSON Import/Export
  14. Save your Docs
  15. Advanced Options
  16. Changelog
  17. Source & Credits
  18. Supporters
  19. What else

Documenter v.1.6

just a little helper

This documentation was made only with the Documenter (except the images)

What is this?

The Documenter offers a way to generate documentations for authors of envatos marketplaces.

Some of you are maybe not familiar with HTML/CSS and all that fancy stuff and your only way to publish documents is Word.

For these guys and girls I made the Documenter.

Please read this documentation before you make your own. Of course you can just play around with the premade docs (thanks JeffreyWay)

Features

How much does it cost?

Nothing!

Yeah that's right! I offer this service for free!

If you have to much money you can donate for surewink

How does it work?

It's really simple.

 

How can I save my docs?

There are two ways to save your work:

HTML Structure

Here is the HTML Structure of the Documentation (simplified):

<body>
    <div id="documenter_sidebar">
        <a href="#documenter_cover" id="documenter_logo"></a>
        <ol id="documenter_nav">
            <li><a href="#{section_id}">{Section Name}</a></li>
            <li><a href="#{section_id}">{Section Name}</a></li>
            <li><a href="#{section_id}">{Section Name}</a>
                <ol>
                    <li><a href="#{section_id}_{subcat_id}">{SubCat Name}</a></li>
                    <li><a href="#{section_id}_{subcat_id}">{SubCat Name}</a></li>
                    <li><a href="#{section_id}_{subcat_id}">{SubCat Name}</a></li>
                </ol>
            </li>
            ...
        </ol>
        <div id="documenter_copyright">Copyright {Your Name} {Current Year}<br>
        made with the <a href="http://rxa.li/documenter">Documenter v{Version}</a>
        </div>
    </div>
    <div id="documenter_content">
        <section id="{section_id}">
            <h3>{Section Name}</h3>
            {content}
        </section>
        <section id="{section_id}">
            <h3>{Section Name}</h3>
            {content}
            <h4 id="{section_id}_{submenu_id}">{SubCat Name}</h4>
            {content}
        </section>
        ...
    </div>
</body>

Submenus

You can use submenus within the navigation.

Activeate the checkbox and use H4 headlines as the name

The H4 will get an id:

<h4 id="section_name_subcategory_name">Subcategory Name</h4>

 

 

Customisation

The Documenter offers a smart way to brand your Documentation

Logo

Include a URL to your Logo. I recommend png with transparent background and smaller then 200x200 pixels.

Custom CSS

If you would like to include a custom CSS to change the appearance of your documentation enter a URL to your CSS file. Check out the HTML Structure and the Custom Classes as well!

Colors

With the color options you can style your documentation so it fits your visual needs.
Start with a Theme or define each color separately. You can specify a background image too.

The box on the right gives you a minimalistic preview

Scrolling

Define a custom scrolling function. The duration defines how long the scrolling will happen.

I recommend not to abuse this part. Buyers maybe get confused with some bouncing pages

Cufon Font

Cufon provides a simple way to include your custom font across all modern browsers. This technology is based on JavaScript and work with nearly every font you can imagine.

How to include a custom font:

Styles

I prepared some Styles:

This is a warning

This is a info

This is just plain text

function javascript(){
	alert('this is a javascript function');
}

#cssblock{
	width:999px;
}

<?php
	echo 'Hello PHP';
?>

<div id="html">
	I am HTML!
</div>

package{
	import flash.display.Sprite;
	public class FirstCircle extends Sprite{
		public function FirstCircle(){
		}
	}
}

 

SyntaxHighlighter

I'm using the SyntaxHighlighter by Alex Gorbatchev which is awesome!

Currently the Documenter can handle following syntax's:

I don't think we need more

Custom Classes

For more customisation I included custom classes

A custom class converts

<p>
contents
</p>

into

<p class="c_{number}">
contents
</p>

{number} is a placeholder for a number from 1 to 9

You can style this paragraph within a custom CSS file

Here five examples of custom classes:

Custom Style 1

Custom Style 2

Custom Style 3

Custom Style 4

Custom Style 5

You can access custom classes in the very left drop down of the toolbar

Autosave

You can automatically save your work and restore it later if your browser crashes.

Your saved doc will stay available one week after creation

JSON Import/Export

Export

When you have finished your documentation you can save your work wherever you like.

Just copy all the contents of the box at the very bottom.

Import

You can import that string by pasting it into the import field or enter the URL to the JSON file

Click outside the box and the Documenter will generate your documentation.

 

Save your Docs

You can save your documentations. You need a webserver which can handle php files.

How it works

Enter the URL of your script which handles the Advanced Options

You script must return the URL of the saves JSON file

You can find an example script here

After you have built your documentation you can find a button at the "custom docs" section

 

Advanced Options

The Advance Options gives you a possiblity to send the documentation to your server. Furthermore it's used to save documentation.

You can enter URL to a script located on your server which recives the JSON or the zip file.

You can enter a password in the third field which will get included so you can check it on your server.

If you set a URL for the JSON these variables will get sent to the server:

$_POST = array(
   'json' => THE_JSON_OF_YOUR_DOC
   'pwd' => MD5_HASH_OF_YOUR_PASSWORD
)

If you set a URL for the ZIP file these variables will get sent to the server:

$_POST = array(
 'name' => 'documentation.zip',
 'pwd' => MD5_HASH_OF_YOUR_PASSWORD 
)
$_FILES = array(
   'file' => array(
      'name' => 'documentation.zip',
      'type' => 'application/octet-stream',
      'tmp_name' => TEMP_FILE_NAME,
      'error' => 0,
      'size' => FILESIZE
  )
)
</pre>

You can start with this script and modify it for your needs

Changelog

Version 1.6 (12/10/2011)

Added Favicon support
better iOS 5 support

Version 1.5 (09/12/2011)

Added Save functionality
Drop Pastebin integration
New Look!
Bug fixes

Version 1.4 (06/25/2011)

Submenu Support
Bug fixes

Version 1.3 (03/28/2011)

Autosave feature
Custom CSS file
Custom Classes
Background Image Support
Browser Back Button Support
Validation for URLs and E-Mails
Removed the wrapper in the HTML Structure (use the body instead)
Some optical improvements
Some technical improvements
Bug fixes

Version 1.2 (03/17/2011)

support for iPhone, iPod Touch, iPad
deeplinking support
Navigation gets a scrollbar if it gets out of view
External links are no opening in a new window
No more empty fields in the documentation
New Field: Website
4 new Themes
Bug fixes

Version 1.1 (03/12/2011)

Themeselecter
Easy Easing
“today” checkbox for last Update
E-mail addresses are now encoded (simple spam protection)
Bug fixes

 

Source & Credits

Thanks so much to

 

Supporters

List of all the kind people who donated:

What else

I spent a lot of time on this thing. Nevertheless it's still not finished. I like to improve it wherever I can and appreciate your feedback.

Best wishes

Xaver Birsak, revaxarts.com

http://themeforest.net/user/revaxarts