The style has several prerequisites that need to be installed before it can be built: Node, Grunt, Ruby and Jekyll.
Node is required to run the Grunt utility and can be downloaded from http://nodejs.org/download/.
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
npm install -g grunt-cli after node has been installed as documented on
http://gruntjs.com/getting-started.
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 http://rubyinstaller.org/, 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 http://rvm.io/rvm/install) if you are running linux.
Jekyll is required by the base bootstrap build process and can be installed by running the command
gem install jekyll after ruby has been successfully installed as documented on
http://jekyllrb.com/.
Once all of the above have been installed the command
npm install must be run in the root directory of the style (the directory containing the file package.json).
There are several commands available to create the stylesheets and javascript for this style.
| Command | Description |
|---|---|
grunt clean
|
This command cleans the style folder, removing all re-distributable files and providing a clean slate to adjust the style or develop additional controls. |
grunt dist
|
This command builds all the stylesheets, javascript and documentation files and puts them in the dist folder. |
grunt watch
|
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. |
This style is based on a modified version of version 3 of the Twitter Bootstrap (documented at http://getbootstrap.com/getting-started) and is built using the LESS CSS preprocessor (documented at http://lesscss.org/) which should be read and understood before making any changes to the style.
This style has 2 variants:
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.
Please note that the 2 styles cannot be mixed on a single page.
The standard format is always used when creating the page.
<link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../css/causeway-utils.min.css" rel="stylesheet" media="screen">
<link href="../css/causeway-standard.min.css" rel="stylesheet" media="screen">
If the condensed format is desired then the condensed stylesheet is added to the page header immediately following the causeway-standard stylesheet.
<link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../css/causeway-utils.min.css" rel="stylesheet" media="screen">
<link href="../css/causeway-standard.min.css" rel="stylesheet" media="screen">
Any application stylesheets should follow on from this list.
<link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../css/causeway-utils.min.css" rel="stylesheet" media="screen">
<link href="../css/causeway-standard.min.css" rel="stylesheet" media="screen">
<link href="css/docs.min.css" rel="stylesheet" media="screen">
All javascript should be written in external files and included at the end of the page, after the required javascript and before the closing
<body> tag.
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/causeway-utils.min.js"></script>
<script src="../js/causeway.min.js"></script>