Prototype Lumo utility classes in Designer

[anssit]

The Lumo utility classes https://github.com/anezthes/lumo-css-framework, vaadin/web-components#2121 could provide an efficient mechanism for styling views in Designer.

Draft and prototype a UI that utilises the utility classes for styling instead of (or in addition to) inline styles.

See, for example, how the image list view from start.vaadin.com already uses the classes:

      <main class="max-w-screen-lg mx-auto pb-l px-l">
        <vaadin-horizontal-layout class="items-center justify-between">
          <vaadin-vertical-layout>
            <h2 class="mb-0 mt-xl text-3xl">Beautiful photos</h2>
            <p class="mb-xl mt-0 text-secondary">Royalty free photos and pictures, courtesy of Unsplash</p>
          </vaadin-vertical-layout>
          <vaadin-select label="Sort by" id="sortBy"></vaadin-select>
        </vaadin-horizontal-layout>
        <ol class="gap-m grid list-none m-0 p-0">
          <slot></slot>
        </ol>
      </main>