Theme WSO2

WSO2 Products UI Templates And Components
http://wso2.github.io/ux-theme-wso2/

---

Theme WSO2 uses Grunt for its CSS and JavaScript build system and Jekyll for the written documentation. Our Gruntfile includes convenient methods for working with the framework, including compiling code.

Prerequisite

To run the build, this requires grunt, node, sass, jekyll, ruby

Tooling setup

To run the documentation locally, you'll need a copy of Theme WSO2's source files, Node, and Grunt. Follow these steps and you should be ready:

1. Install Node, which we use to manage our dependencies.
2. Install the Grunt command line tools, grunt-cli, with npm install -g grunt-cli.
3. Navigate to the root /ux-theme-wso2 directory and run npm install to install our local dependencies listed in package.json.
4. Install Ruby.
5. Then install Sass with gem install sass.
6. Then install Bundler with gem install bundler.
7. And finally install Jekyll with gem install jekyll.

Once completed, you'll be able to run the various Grunt commands provided from the command line.

Using Grunt

Our Gruntfile includes the following commands and tasks:

Task	Description
grunt	To compile the CSS and JavaScript into /dist.
grunt docs	Build and move other required assets to documentation folder which are used when running the documentation locally.
grunt serve	To run documentation locally. This runs the shell command jekyll serve on the subfolder: /docs. Since it uses pure jekyll, you can use jekyll flags along with it. e.g. grunt serve --port 4001
grunt product:<porduct-short-name>	To compile custom CSS for specific products with some additional configurations. e.g. grunt product:cloud to compile custom CSS for Product Cloud.
grunt test-scss	To test scss modules /scss/modules/. Output report.json file will be generated in the root folder

Local documentation

Running our documentation locally requires the use of Jekyll, a decently flexible static site generator that provides us: basic includes, Markdown-based files, templates, and more. Here's how to get it started:

1. Run through the tooling setup above to install Jekyll (the site builder) and other dependencies.
2. From the root /theme-wso2 directory, run grunt serve in the command line.
3. Open http://localhost:4000 in your browser to see the documentation.

Learn more about using Jekyll by reading its documentation.

What's included

Within the distribution download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

ux-theme-wso2/
├── css/
│   ├── theme-wso2.css
│   ├── theme-wso2.min.css
│   └── theme-wso2.css.map
├── js/
│   ├── theme-wso2.js
│   ├── theme-wso2.min.js
│   ├── bootstrap.js
│   └── bootstrap.min.js
├── images/
├── fonts/
│   └── Roboto/
└── extensions/
    ├── datatables/
    ├── jstree/
    └── noty/

License

WSO2 Inc. licenses this source under the Apache License, Version 2.0 (LICENSE), You may not use this file except in compliance with the License.