Tooling

(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 customization and "branding" of a project-specific mDIS instance.

There are several ways to change the design of items on the web page. Some ways 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 dashboard (opens 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 nodejs"

mDIS uses the Vuetify GUI widget library and component collection. Specifically it uses the one of its free pre-made layouts (opens new window), the "Dark" Layout theme (opens new window).

The Vuetify layout depends on the Stylus (opens new window) CSS preprocessor.

In general, the Stylus processor transforms styles code to css code. Given input is a file stylus/my.styl, Stylus transforms it and writes output file css/my.css. Our mDIS does not do exactly that - instead, it compresses, "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 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 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, also adding new rules. The syntax used in the icdp-extra.styl file can be CSS syntax, or Stylus syntax.

File icdp-extra.styl is available only on host wb45; in git on development branch "knb".

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

Production build needs a recompilation step (run npm run build script, and restart the webserver).

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.html (opens new window). (Not much used/implemented/applied/used 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

Vuetifyjs Stylus files:

./node_modules/vuetify/src/stylus/components/_alerts.styl
./node_modules/vuetify/src/stylus/components/_app.styl
./node_modules/vuetify/src/stylus/components/_autocompletes.styl
./node_modules/vuetify/src/stylus/components/_avatars.styl
./node_modules/vuetify/src/stylus/components/_badges.styl
./node_modules/vuetify/src/stylus/components/_bottom-navs.styl
./node_modules/vuetify/src/stylus/components/_bottom-sheets.styl
./node_modules/vuetify/src/stylus/components/_breadcrumbs.styl
./node_modules/vuetify/src/stylus/components/_buttons.styl
./node_modules/vuetify/src/stylus/components/_button-toggle.styl
./node_modules/vuetify/src/stylus/components/_cards.styl
./node_modules/vuetify/src/stylus/components/_carousel.styl
./node_modules/vuetify/src/stylus/components/_chips.styl
./node_modules/vuetify/src/stylus/components/_content.styl
./node_modules/vuetify/src/stylus/components/_counters.styl
./node_modules/vuetify/src/stylus/components/_data-iterator.styl
./node_modules/vuetify/src/stylus/components/_data-table.styl
./node_modules/vuetify/src/stylus/components/_date-picker-header.styl
./node_modules/vuetify/src/stylus/components/_date-picker-table.styl
./node_modules/vuetify/src/stylus/components/_date-picker-title.styl
./node_modules/vuetify/src/stylus/components/_date-picker-years.styl
./node_modules/vuetify/src/stylus/components/_dialogs.styl
./node_modules/vuetify/src/stylus/components/_dividers.styl
./node_modules/vuetify/src/stylus/components/_expansion-panel.styl
./node_modules/vuetify/src/stylus/components/_footer.styl
./node_modules/vuetify/src/stylus/components/_forms.styl
./node_modules/vuetify/src/stylus/components/_grid.styl
./node_modules/vuetify/src/stylus/components/_icons.styl
./node_modules/vuetify/src/stylus/components/_images.styl
./node_modules/vuetify/src/stylus/components/_inputs.styl
./node_modules/vuetify/src/stylus/components/_item-group.styl
./node_modules/vuetify/src/stylus/components/_jumbotrons.styl
./node_modules/vuetify/src/stylus/components/_labels.styl
./node_modules/vuetify/src/stylus/components/_lists.styl
./node_modules/vuetify/src/stylus/components/_menus.styl
./node_modules/vuetify/src/stylus/components/_messages.styl
./node_modules/vuetify/src/stylus/components/_navigation-drawer.styl
./node_modules/vuetify/src/stylus/components/_overflow-buttons.styl
./node_modules/vuetify/src/stylus/components/_overlay.styl
./node_modules/vuetify/src/stylus/components/_pagination.styl
./node_modules/vuetify/src/stylus/components/_parallax.styl
./node_modules/vuetify/src/stylus/components/_pickers.styl
./node_modules/vuetify/src/stylus/components/_progress-circular.styl
./node_modules/vuetify/src/stylus/components/_progress-linear.styl
./node_modules/vuetify/src/stylus/components/_radio-group.styl
./node_modules/vuetify/src/stylus/components/_radios.styl
./node_modules/vuetify/src/stylus/components/_range-sliders.styl
./node_modules/vuetify/src/stylus/components/_rating.styl
./node_modules/vuetify/src/stylus/components/_responsive.styl
./node_modules/vuetify/src/stylus/components/_ripples.styl
./node_modules/vuetify/src/stylus/components/_selection-controls.styl
./node_modules/vuetify/src/stylus/components/_select.styl
./node_modules/vuetify/src/stylus/components/_sliders.styl
./node_modules/vuetify/src/stylus/components/_small-dialog.styl
./node_modules/vuetify/src/stylus/components/_snackbars.styl
./node_modules/vuetify/src/stylus/components/_speed-dial.styl
./node_modules/vuetify/src/stylus/components/_steppers.styl
./node_modules/vuetify/src/stylus/components/_subheaders.styl
./node_modules/vuetify/src/stylus/components/_switch.styl
./node_modules/vuetify/src/stylus/components/_system-bars.styl
./node_modules/vuetify/src/stylus/components/_tables.styl
./node_modules/vuetify/src/stylus/components/_tabs.styl
./node_modules/vuetify/src/stylus/components/_textarea.styl
./node_modules/vuetify/src/stylus/components/_text-fields.styl
./node_modules/vuetify/src/stylus/components/_timeline.styl
./node_modules/vuetify/src/stylus/components/_time-picker-clock.styl
./node_modules/vuetify/src/stylus/components/_time-picker-title.styl
./node_modules/vuetify/src/stylus/components/_toolbar.styl
./node_modules/vuetify/src/stylus/components/_tooltips.styl
./node_modules/vuetify/src/stylus/components/_treeview.styl
./node_modules/vuetify/src/stylus/components/_windows.styl
./node_modules/vuetify/src/stylus/elements/_blockquote.styl
./node_modules/vuetify/src/stylus/elements/_code.styl
./node_modules/vuetify/src/stylus/elements/_global.styl
./node_modules/vuetify/src/stylus/elements/_headings.styl
./node_modules/vuetify/src/stylus/elements/_lists.styl
./node_modules/vuetify/src/stylus/elements/_typography.styl
./node_modules/vuetify/src/stylus/generic/_animations.styl
./node_modules/vuetify/src/stylus/generic/_colors.styl
./node_modules/vuetify/src/stylus/generic/_elevations.styl
./node_modules/vuetify/src/stylus/generic/_reset.styl
./node_modules/vuetify/src/stylus/generic/_transitions.styl
./node_modules/vuetify/src/stylus/main.styl
./node_modules/vuetify/src/stylus/settings/_colors.styl
./node_modules/vuetify/src/stylus/settings/_elevations.styl
./node_modules/vuetify/src/stylus/settings/_rtl.styl
./node_modules/vuetify/src/stylus/settings/_theme.styl
./node_modules/vuetify/src/stylus/settings/_variables.styl
./node_modules/vuetify/src/stylus/theme.styl
./node_modules/vuetify/src/stylus/tools/_bootable.styl
./node_modules/vuetify/src/stylus/trumps/_display.styl
./node_modules/vuetify/src/stylus/trumps/_helpers.styl
./node_modules/vuetify/src/stylus/trumps/_spacing.styl
./node_modules/vuetify/src/stylus/trumps/_text.styl
./node_modules/vuetify/src/stylus/trumps/_transition.styl

## ? came with stylus
./node_modules/stylus/lib/functions/index.styl