yuuvis® styles

If you are creating a new application intended to handle specific data of the yuuvis® backends and you only need the CSS files, you can use the npm package: https://www.npmjs.com/package/@yuuvis/styles.

Shortly, we will publish a website that shows all styles used as an example application on https://yuuvis-cc.yuuvis.org/

Changing the Appearance of Form Controls

As with most of the components of the @yuuvis/framework, you are able to overwrite styling using CSS. To globally change the look and feel of components, we recommend to create a new *.scss file that you import in your project's styles.scss (Make sure to place the import after the imported styles from @yuuvis/framework). The following code snippet changes the position of labels in forms:

yuv-object-form .yuv-form-input:not(.checkbox) .fe-wrapper {
  > label {
    order: 0;
  }
  > .control {
    order: 1;
  }
  > .tag {
    order: 2;
  }
}

You could also position the labels at the top of the input:

yuv-object-form .yuv-form-input:not(.checkbox) .fe-wrapper {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    'label tag'
    'fe fe';

  > label {
    grid-area: label;
  }
  > .control {
    grid-area: fe;
  }
  > .tag {
    grid-area: tag;
  }
}