Skip to main content

Page Layout and Design

Page Layout and Design

(okay, not really a "Tooling" article but saved here for now)

Changing the GUI Design using Stylesheets

Changing the design of the mDIS Graphical User Interface (GUI) might be required during the customization and "branding" of a project-specific mDIS instance.

There are several ways to change the design of items on the web page. Some methods are easy but not recommended; some are appropriate but not so easy because a build step is required, e.g., by running the npm run build command/script in a terminal window, or by running the equivalent "task" in the Vue-Cli UI dashboardopen in new window.

This article describes how to change the GUI design using stylesheets. This is a simple, safe editing operation that does not necessarily require a build step, assuming customizing CSS is familiar to many technical users.

Stylus - "Expressive, dynamic, robust CSS built for Node.js"

mDIS uses the Vuetify GUI widget library and component collection. Specifically, it uses one of its free pre-made layoutsopen in new window, the "Dark" Layout themeopen in new window.

The Vuetify layout depends on the Stylusopen in new window CSS preprocessor.

In general, the Stylus processor transforms style code to CSS code. Given input is a file stylus/my.styl, Stylus transforms it and writes the output file css/my.css. Our mDIS does not do exactly that; instead, it compresses, creates "sourcemaps," and transforms the CSS code to inline styles.

For consistency, we also use .styl files for our design modifications.

You can put CSS fragments into .styl files without changing the CSS code.

The .styl syntax is compatible with CSS syntax. This means you can rename the file my.css to my.styl, and the Stylus preprocessor will still process it (but will not change anything, because here input = output).

In our project, the Stylus files have been stored here:

./src/style/main.styl
./src/style/icdp-extra.styl
./src/style/components/_dis-form.styl
./src/style/components/_dis-data-table.styl

To change the design of certain features, modify the file /src/style/icdp-extra.styl, e.g., by adding CSS classes to it.

This file icdp-extra.styl gets loaded after src/style/main.styl, overriding any existing rules in there and also adding new rules. The syntax used in the icdp-extra.styl file can be CSS syntax or Stylus syntax.

The file icdp-extra.styl is available only on host wb45; in Git on the development branch "knb."

After editing the .styl file on wb45, the development build (which has hot module replacement enabled) should reload immediately and show the design modifications.

The production build needs a recompilation step (run the npm run build script and restart the web server).

Possible Enhancements

  • Supporting "pure CSS" alternatives in mDIS
  • Use CSS files instead of inline styles in the production build

See https://cli.vuejs.org/guide/css.htmlopen in new window. (Not much used/implemented/applied in mDIS) TBC

Using .css files directly (e.g., as assets/css/icdp-extra.css) is probably supported, but Webpack, which starts the transformation process, needs the 'css-loader' activated. (Currently, it is not activated.)

Appendix

If you want to customize the Vuetify theme, check the documentation and look at the source code. Vuetify.js Stylus files are in these directories:

node_modules/vuetify/src/stylus/main.styl
node_modules/vuetify/src/stylus/theme.styl
# many more files in here:
node_modules/vuetify/src/stylus/components
node_modules/vuetify/src/stylus/elements
node_modules/vuetify/src/stylus/generic
node_modules/vuetify/src/stylus/settings
node_modules/vuetify/src/stylus/tools/
node_modules/vuetify/src/stylus/trumps/

# and in a different directory:
node_modules/stylus/lib/functions/index.styl