laxarjs / cube.theme

Vibrant orange diced to taste, the ultimate LaxarJS experience

LaxarJS Cube Theme

A LaxarJS theme, for use by LaxarJS tools and demo applications.

Installation

Install the laxar-cube.theme and the required webpack SCSS support into your application using npm:

$ npm install --save laxar-cube.theme
$ npm install --save-dev node-sass sass-loader

Then, activate the theme in your application configuration (usually init.js):

// load themed artifacts:
import artifacts from 'laxar-loader/artifacts?flow=main&theme=cube';

// have the runtime select the theme:
const configuration = { theme: 'cube', /* ... */ };

create( [ /* adapters */ ], artifacts, configuration )
   // if enabling tooling, you should also go for the theme:
   .tooling( require( 'laxar-loader/debug-info?flow=main&theme=cube' ) )
   // .flow( ... )
   // .bootstrap( ... )

For webpack, this can be simplified by using the theme-provided options for the sass-loader:

module.exports = {
   // ...
   resolve: [
      // ...
      alias: {
         // ...
         'cube.theme': 'laxar-cube.theme'
      }
   ],
   module: {
      rules: [
         // ...,
         {
            test: /[/](laxar-)?cube[.]theme[/].*[.]s[ac]ss$/,
            loader: 'sass-loader',
            options: require( 'laxar-cube.theme/sass-options' )
         }
      ]
   }
};

The cube.theme is now used in the application. To create theme-specific styles for layouts, widgets and controls, add a cube.theme folder right next an artifacts default.theme folder, and define CSS/HTML there.

cube.theme's Issues

theme: provide initial laxar theme

improve README.md

The README should have better installation instructions (NPM instead of git submodule), and explain usage of sass-options.

Add glyphicons?

Same as LaxarJS/laxar-uikit#140, css/theme.css references the glyphicons fonts, but we don't ship them.

theme: style enhancements

theme: improve footer styling

theme: update laxar-uikit, improve config.rb

Set `$fa-font-path`

Depending on the webpack setup, us not setting $fa-font-path can lead to font loading problems.

provide logo/flower classes for images, add theme.json

To load the SCSS version of the theme, a theme.json must be added. This should also allow correctly using the theme if the file system folder does not match its directory name (e.g. when installing the theme under a different name from NPM.

Also, CSS classes should be added so that logo images (flower pot, top-left logo) are loaded from the theme.

theme: add functional point style

Add two necessary steps to install instruction

• add alias to webpack configuration:

resolve: {
...
   alias: {
      'default.theme': 'laxar-uikit/themes/default.theme',
      'cube.theme': 'laxar-cube.theme'
   }
},

• install

npm install --save-dev node-sass

theme: update font awesome

Define widget outline class for developer tools

The developer tools widget sets a class ax-widget-outline. The theme should define the class to give a visual effect for this feature.

theme: remove widget-browser specific styles

theme: style enhancements