causeway-standard-theme/causeway/docs/index.html

<!--(bake includes/header.html)-->
<div class="container page">
  <div class="content pane single-pane">
    <section>
      <a id="style"></a>
      <header class="content-header">
        <h1 class="title">Style</h1>
        <ul class="nav nav-pills">
          <li>
            <a href="#build">
              Build Instructions
            </a>
          </li>
          <li>
            <a href="#stylesheets">
              Stylesheets
            </a>
          </li>
          <li>
            <a href="#javascript">
              Javascript
            </a>
          </li>
        </ul>
      </header>

      <div>
        <a id="build"></a>
        <header class="content-header">
          <h2 class="title">
            Build Instructions
          </h2>
        </header>

        <h3 class="title">
          Pre-Requisites
        </h3>
        <p>
          The style has several prerequisites that need to be installed before it can be built: Node, Grunt, Ruby and Jekyll.
        </p>
        <p>
          Node is required to run the Grunt utility and can be downloaded from
          <a href="http://nodejs.org/download/">http://nodejs.org/download/</a>.
        </p>
        <p>
          Grunt is a utility that manages the build process of the style from its individual components into its distributable form. It is installed by running the command
          <code>npm install -g grunt-cli</code> after node has been installed as documented on
          <a href="http://gruntjs.com/getting-started">http://gruntjs.com/getting-started</a>.
        </p>
        <p>
          Ruby is required to run the Jekyll utility and version 2.0.0 should be installed. There are multiple methods of installing ruby: for wWindows there is an installer available from
          <a href="http://rubyinstaller.org/">http://rubyinstaller.org/</a>, it is included with the developer tools on a mac running OS X 10.5 or greater and can be installed through RVM (available from
          <a href="http://rvm.io/rvm/install">http://rvm.io/rvm/install</a>) if you are running linux.
        </p>
        <p>
          Jekyll is required by the base bootstrap build process and can be installed by running the command
          <code>gem install jekyll</code> after ruby has been successfully installed as documented on
          <a href="http://jekyllrb.com/">http://jekyllrb.com/</a>.
        </p>
        <p>
          Once all of the above have been installed the command
          <code>npm install</code> must be run in the root directory of the style (the directory containing the file package.json).
        </p>
        <br/>

        <h3 class="title">
          Build Commands
        </h3>
        <p>
          There are several commands available to create the stylesheets and javascript for this style.
        </p>

        <table class="table table-striped">
          <thead>
            <tr>
              <th>
                Command
              </th>
              <th>
                Description
              </th>
            </tr>
          </thead>
          <tfoot>
            <tr>
              <td colspan="2">
              </td>
            </tr>
          </tfoot>
          <tbody>
            <tr>
              <td>
                <code>grunt clean</code>
              </td>
              <td>
                This command cleans the style folder, removing all re-distributable files and providing a clean slate to adjust the style or develop additional controls.
              </td>
            </tr>
            <tr>
              <td>
                <code>grunt dist</code>
              </td>
              <td>
                This command builds all the stylesheets, javascript and documentation files and puts them in the dist folder.
              </td>
            </tr>
            <tr>
              <td>
                <code>grunt watch</code>
              </td>
              <td>
                This command watches the component files of the style and recompiles the stylesheets, javascript and documentation files when a component is changed. This makes it a useful utility for  adjusting the style or developing additional controls.
              </td>
            </tr>
          </tbody>
        </table>
        <h3 class="title">
          Style Development
        </h3>
        <p>
          This style is based on a modified version of version 3 of the Twitter Bootstrap (documented at
          <a href="http://getbootstrap.com/getting-started">http://getbootstrap.com/getting-started</a>) and is built using the LESS CSS preprocessor (documented at
          <a href="http://lesscss.org/#synopsis">http://lesscss.org/</a>) which should be read and understood before making any changes to the style.
        </p>
      </div>

      <div>
        <a id="stylesheets"></a>
        <header class="content-header">
          <h2 class="title">
            Stylesheets
          </h2>
        </header>

        <p>
          This style has 2 variants:
        </p>
        <ol>
          <li>
            Standard - The default look for the style
          </li>
          <li>
            Condensed - Can be used when much more information is required to be in view
          </li>
        </ol>
        <p>
          The variants can be previewed throughout these documents by clicking on "Apply Condensed Style" or "Remove Condensed Style" on the right side of the site menu bar.
        </p>
        <p>
          Please note that the 2 styles cannot be mixed on a single page.
        </p>
        <br/>
        <p>
          The standard format is always used when creating the page.
        </p>
        <pre><code>
  &lt;link href=&quot;../css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; media=&quot;screen&quot;&gt;
  &lt;link href=&quot;../css/causeway-utils.min.css&quot; rel=&quot;stylesheet&quot; media=&quot;screen&quot;&gt;
  &lt;link href=&quot;../css/causeway-standard.min.css&quot; rel=&quot;stylesheet&quot; media=&quot;screen&quot;&gt;
        </code></pre>
        <p>
          If the condensed format is desired then the condensed stylesheet is added to the page header immediately following the causeway-standard stylesheet.
        </p>
        <pre><code>
  &lt;link href=&quot;../css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; media=&quot;screen&quot;&gt;
  &lt;link href=&quot;../css/causeway-utils.min.css&quot; rel=&quot;stylesheet&quot; media=&quot;screen&quot;&gt;
  &lt;link href=&quot;../css/causeway-standard.min.css&quot; rel=&quot;stylesheet&quot; media=&quot;screen&quot;&gt;
        </code></pre>
        <p>
          Any application stylesheets should follow on from this list.
        </p>
        <pre><code>
  &lt;link href=&quot;../css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; media=&quot;screen&quot;&gt;
  &lt;link href=&quot;../css/causeway-utils.min.css&quot; rel=&quot;stylesheet&quot; media=&quot;screen&quot;&gt;
  &lt;link href=&quot;../css/causeway-standard.min.css&quot; rel=&quot;stylesheet&quot; media=&quot;screen&quot;&gt;
  &lt;link href=&quot;css/docs.min.css&quot; rel=&quot;stylesheet&quot; media=&quot;screen&quot;&gt;
        </code></pre>
      </div>

      <div>
        <a id="javascript"></a>
        <header class="content-header">
          <h2 class="title">
            Javascript
          </h2>
        </header>

        <p>
          All javascript should be written in external files and included at the end of the page, after the required javascript and before the closing
          <code>&lt;body&gt;</code> tag.
        </p>
        <pre><code>
  &lt;script src=&quot;../js/jquery.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;../js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;../js/causeway-utils.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;../js/causeway.min.js&quot;&gt;&lt;/script&gt;
        </code></pre>
      </div>

    </section>
  </div>
</div>
<!--(bake includes/footer.html)-->