Spec Page Documentation


This page highlights the basic features of SourceJS documentation pages that we call Specs. To create your own Spec, follow this short guide.

For text description, SourceJS uses basic HTML markup, and custom CSS class hooks. To render highlighted description block like this, add .source_info class to a any HTML element on page.

Warning blocks can be added using .source_warn:

It is highly recommended that you read the HTML source of this document.

Some related useful information you can wrap with .source_doc

Links can be highlighted as link to design specification by adding .source_a_d as a class on the link

Links can be highlighted as link to other specification by adding .source_a_s as a class on the link

Highlighting can be achieved by either wrapping text in <code> tags, or by using the .source_hl class.

Spec Section Heading

Links can be highlighted by adding .source_a_hl as a class on the link

Notes specific to particular interface elements can be documented here. Heading numbering is generated dynamically, and is supported up to 3 levels deep.

To render examples of interface elements, place them in a div with a class of .source_example:

Hello world;

Rendered code examples - main documentation blocks.

Engine decorative styles do not affect this block. Link your project files and start prototyping.

This page has Twitter Bootstrap styles linked as Master App Styles.


Show source code

You can fill custom source code blocks before "source_example". If <code class="src-html"> is not set, it will be created and filled automatically from "source_example" contents.

Click "Show source" in the inner navigation menu on the right to reveal the source for all examples.

To render and highlight the source code, wrap it in <code class="src-html">, <code class="src-css">
or <code class="src-js"> tags, depending on the language you want to highlight, like this:

<code class="src-html">
<code class="src-css"> <style> .css_source { make-it: awesome; } </style> </code> <code class="src-js"> </code>

By default (before 0.6.0) all code blocks are hidden by default, and are shown after toggling "Show source code" in menu. To define block as visible by default, add .source_visible class next to .src-*

Linking Your Project's CSS

Your project's CSS should be linked to each spec page to render your examples using /user/core/views/spec.ejs, or you can also add styles specific to a spec page:

<link href="/docs/data/bootstrap.css" rel="stylesheet"> <link href="css/spec.css" rel="stylesheet">

Spec Page Markup

SourceJS Specs support styling of these semantic HTML tags, that you could use to describe your sections:

  • p
  • h1
  • h2
  • h3
  • h4
  • ol
  • ul
  • li
  • table
  • code

This styling is not applied inside example blocks.

From 0.5.0 SourceJS fully supports Markdown based Specs as well. You can use <markdown> tag in any Spec templates including index.src.html, or just use readme.md templates instead.

Read more about markdown support

Source code

This spec uses index.src.html template, view it's source.