WISE5 Styling and Themes

WISE5 uses Angular Material (https://material.angularjs.org/) as the basis for its page layouts, visual styles, and most user interface components. Angular Material is an implementation of Material Design (https://www.google.com/design/spec/material-design/) for AngularJS (the application framework that WISE5 is built upon).

CSS Framework

CSS styles are written using SASS (http://sass-lang.com/). CSS files are compiled with Gulp (http://gulpjs.com/).

To install the required development dependencies on your machine, follow the WISE5 local installation instructions (https://github.com/WISE-Community/WISE/wiki/How-to-Setup-WISE:-Local-Development-Environment-without-using-IDE, for example), specifically:

  WISE $ ./wise.sh setup

See `package.json` (in the WISE root directory) for development dependencies that will be installed with WISE. To automatically watch SCSS files in your WISE5 installation and compile them to corresponding CSS files, run the following command in your terminal:

  WISE $ npm run watch-sass

or

  WISE $ npm run watch-all

(This will watch both ES6 and SCSS files and automatically transpile/compile them. `Gulpfile.js` has details about the Gulp tasks that are performed when running one of these scripts).

NOTE: The Gulp task will not automatically compile SCSS source files that have partial file includes on partial file changes alone. After you change a partial file that is included in your master SCSS file, you need to make a small change to the master file (like adding/removing white space) to trigger the compiler to build the corresponding CSS.

You can use Browsersync (http://www.browsersync.io/) or LiveReload (http://livereload.com/) to see changes in your browser without reloading the page.

WISE style and theming structure

(More details coming soon.)

VLE Theming

(More details coming soon.)