This is a template of how I want package articles to be layed out. It keeps all of these articles follow the same format. Ironically this that I am writing is where the description of the package should go.

• Real important information can go in the description (ie this package is not responsive) the rest should go in the notes at the bottom
• All demo code should be run from a live code block and not left naked in the wysiwyg. If you start using normal HMTL in an article when showing of a demo it can get messy. If you keep the demo code in a live code block when you edit the code in the backend it makes things a lot easier as you can clearly see what is what.
• When putting code in the live blocks you should follow the same format as this articles so the order is maintained. Occassionally you will need to move the location of the javascript for correct execution and in this case it is fine to change the order of the items but keep the order the same in the live block as the rest of the article so it makes sense. The CSS/JS/HTML code in the live block should be seperated by an empty line.
• The code getting display should not be encased in <script> or <style> tags but left naked. The reason for this is, it makes it easier to copy and past the code into a custom.css or custom.js file as most people will use this method rather that inserting the code inline. The tags are only used when the code is inline.
• Keep the code blocks all collapsed unless they are short and there are not many of them, in this cas it is a bit pointless collapsing the code blocks and just adds another step where one is not needed.
• Only include the display blocks for the code types you are using. They dont all need to be present for every article but make sure you maintain the correct order.
• You might also have to alter the live code so it run with no conflict like altering class names or applying a template fix to allow the deom to run with no issues. If you have to add specific code you should add it to the notes like in the list below because it could be helpful in diagnosing issues later.
• no gap between live and display code
• Where the desciption cannot be easily seperated from the code block immediately folloing it, you should use a <hr> splitting line and possibly an empty line or two.
• I am not sure what I am doing with attachments or assets yet.
• The code being display should use the correct links following my rules and as such all the assets would be in the it's module folder ( i.e. 'images/modules/package-article-template') and the live code should point to the KB article's folder. This keeps things neat and all the assets in one place but whilst allowing the code to be easily deployed on client projects. It also has the side effect of stopping my internal links getting distributed over the interenet.

CSS

.demo-class{
    border: 1px solid black;
    padding 10px;
}

CSS (Optional / Joomlashine)

.jsn-demo-class{
    border: 1px solid black;
    padding 10px;
}

CSS (Fix for this template to get the demo running)

.jsn-demo-class-template-fix{
    border: 1px solid black;
    padding 10px;
}

JS Dependancies (Joomla / External / 3rd Party)

• bootstrap.min.js - No point in adding this dependacy to every article because it is inbuillt to Joomla but reference it though

JS

jQuery(document).ready(function(){ 
	// Do Something
}

JS (Optional / Joomlashine)

jQuery(document).ready(function(){ 
	// Do Something
}

JS (Fix for this template to get the demo running)

jQuery(document).ready(function(){ 
	// Do Something
}

HTML

<div class="demo-class">Live Code Block</div>

<!-- Module 1: Module Title -->
<div>Module Code</div>

<!-- Module 2: Module Title -->
<div>Module Code</div>

<!-- Module 3: Module Title -->
<div>Module Code</div>

Notes

Item 1 (use this title if notes need grouping)

• These are my Notes

Item 2 (use this title if notes need grouping)

• These are my Notes

Asset Sources

• HTML/CSS/JS Code = The code on this page
• File is used for  = File Name (linked to download file - see notes in description about attachments) - Website (if needed) - Notes on the file source (if any)
• File is used for  = File Name (linked to download file - see notes in description about attachments) - Website (if needed) - Notes on the file source (if any)

Links

Links Group 1 (use this title if links need grouping)

• These are my links

Links Group 2 (use this title if links need grouping)

• These are my links