Code Std - Dokimay CSS usage

Pre-requisites

Put the dokstyle.css file into a Joomla!'s template's css/ directory

Put this line into the Joomla!'s template's index.php header area to call in the dokstyle.css file:

$doc->addStyleSheet(JURI::base() . 'templates/' . $this->template . '/css/dokstyle.css', $type = 'text/css', $media = 'screen,projection');

Syntax summary

// All tech articles wrapped by 
    <div id="dokarticle">..</div>
<pre>  // can have classes of: {app_terminal, app_vi}
<span> // can have 0..n class vars from the following groups:
  // thought context: {prompt, guidance, cmdline} exclusive
  // tool    context: {shell, editor} exclusive
  // user    context: (variable}
<span> // inline spans may be of class: {nonprintablekey} 
<span> // inline spans may be of class: {appname, pathname, filename, email} 

Highlighting special word types

Example - inline names of applications:

In the Terminal application, ...

<p>In the <span class="appname">Terminal</span> application, ...</p>

Paste the results into Pages ...

<p>Paste the results into <span class="appname">Pages</span></p>

Example - user unique variables:

These can be used to indicate values the user must specify or to denote what may be different from one user to another in the article's content. For example, if an installation requires the user to chose the name of a directory, such as topdir. Their choice of a name would then be substituted throughout the article as indicated by its pseudonym topdir.

Navigate to the documents directory in your home directory /myHDname/myLoginName/Documents

<p>Navigate to the documents directory in your home directory <span class="pathname">/<span class="variable">myHDname</span>/<span class="variable">myLoginName</span>/Documents</span></p>

Example - filenames and pathnames:

Open the file: someFileName.ext

<span class="filename">someFileName.ext</span>

Navigate to the directory: yourUserName/Documents/

<span class="pathname">yourUserName/Documents/</span>

Example - shell command prompt:

(The prompt is not typed in by the user but shown in the article for context)

$ shell command

<span class="shell"><span class="prompt">$ </span>shell command</span>

Example - non-printable control characters using ASCII abbreviations

These include: ESC, BS, HT, LF, CR among others. See the ASCII table for a complete list.

When done editing, press the ESC key

<p>When done editing, press the <span class="nonprintablekey">ESC</span> key</p>

Example - special characters denoted by key strokes

These may include meta keys such as ctrl-c, opt-shift-[

When done editing, press ctrl-D

<p>When done editing, press <span class="nonprintablekey">ctrl-D</span></p>

Code blocks

Code blocks are placed within a <pre> element - as already demonstrated in the above examples.

codevar = codevalue + codeexpression;

<pre>codevar = codevalue + codeexpression;</pre>

Example - code inline with a paragraph

Example of sample code myVar += oldVar; which is inline with this paragraph.

example myVar += oldVar;

Example - code inline with a paragraph - and showing language related specifics

Place code within a <span> element and use class="" attributes within the code to highlight specialized word types:

  • class codeComments
  • class ccmts
  • class codeDocComments
  • class codeDocCommentKeywords
  • class codeStrings
  • class cstrs
  • class codeCharacters
  • class cchar
  • class codeNumbers
  • class cnums
  • class codeKeywords
  • class ckywd
  • class codePreprocessorStatements
  • class codeURLs
  • class curls
  • class codeAttributes
  • class cattr
  • class codeProjClassNames
  • class codeProjTypeNames
  • class codeProjInstanceVarsAndGlobals
  • class codeProjFuncAndMethodNames
  • class codeProjConstants
  • class codeProjPreprocessorMacros
  • class codeClassNames
  • class cclnm
  • class codeTypeNames
  • class ctype
  • class codeInstanceVarsAndGlobals
  • class cvars
  • class codeFunctionAndMethodNames
  • class cfunc
  • class codeConstants
  • class ccons
  • class codePreprocessorMacros
  • class cprep
See examples on this page with this comment's styling

Overall article structure and outlines

Use hierarchically embedded <ol><li> element patterns. Whenever a sequence of steps occur within the same tool, its wrapping <div> element is given a class="" such as {"inshell", "ineditor", ...}

Command lines and comments use a <p> with a class="" such as {"shell", "cmdline", "guidance" }

Example - article structure:

Using the Terminal app, enter the following commands in the shell:

  1. Optional verbiage and explanation of the upcoming command...

    $ sudo doso

  2. Editing a file using vi causes another indentation:

    $ vi someFileName

    1. vi command
    2. vi command
  3. $ shell command

<p>Using the <span class="appname">Terminal</span> app, enter the following commands in the shell:</p>
<div class="inshell">
  <ol>
    <li>
      <p>Optional verbiage and explanation of the upcoming command...</p>
      <p class="shell cmdline"><span class="prompt">$ </span>sudo doso</p>
    </li>
    <li>
      <p>Editing a file using vi causes another indentation:</p>
      <p class="shell cmdline"><span class="prompt">$ </span>vi <span class="filename">someFileName</span></p>
      <div class="ineditor">
        <ol>
          <li>vi command</li>
          <li>vi command</li>
        </ol>
      </div>
    </li>
    <li>
      <p class="shell cmdline"><span class="prompt">$ </span>shell command</p>
    </li>
  </ol>
</div>

Alerts {Info notes, Cautions, Warnings}

Example note:

ipsum latin mumbo jumbo. ipsum latin mumbo jumbo. ipsum latin mumbo jumbo. ipsum latin mumbo jumbo.

Code sample:
<div class="wca info">
  <div class="wca_img info_img">
    <p>General note type info</p>
  </div>
</div>

Example caution:

ipsum latin mumbo jumbo. ipsum latin mumbo jumbo. ipsum latin mumbo jumbo. ipsum latin mumbo jumbo. ipsum latin mumbo jumbo. ipsum latin mumbo jumbo. ipsum latin mumbo jumbo. ipsum latin mumbo jumbo. ipsum latin mumbo jumbo. ipsum latin mumbo jumbo. ipsum latin mumbo jumbo.

Code sample:
<div class="wca caut">
  <div class="wca_caut caut_img">
    <p>Cautionary info</p>
  </div>
</div>

Example warning:

ipsum latin mumbo jumbo. ipsum latin mumbo jumbo. ipsum latin mumbo jumbo. ipsum latin mumbo jumbo. ipsum latin mumbo jumbo. ipsum latin mumbo jumbo. ipsum latin mumbo jumbo. ipsum latin mumbo jumbo. ipsum latin mumbo jumbo. ipsum latin mumbo jumbo. ipsum latin mumbo jumbo.

Code sample:
<div class="wca warn">
  <div class="wca_img warn_img">
    <p>Warning type info</p>
  </div>
</div>

Links {:active, :hover, :visited, :focused, : ?? }

app_vi
app_terminal

use of href target="_dokimay_ref"

mailto: obscurontizationfeedback

table,tbody,tr,th class="cclnm thdr">Class, td class="code cclnm" NSNumber