Giter Club home page Giter Club logo

ux-theme-wso2's Introduction

GitHub release devDependency Status License

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


Built with Grunt

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.