Webinar: Bridging the Gap Between Designers and Developers

Designers and Developers don’t always see eye to eye but both are trying to solve the same thing: Creating great user experiences for the end-users.

In this webinar, we will touch upon how to bridge the gap between Designers and Developers with the help of design systems, predefined stencils and a joint workspace where both can collaborate instead of just hand over work from one to the other.

Join Vaadin’s Risto Yrjänä and Jens Jansson for an adventure filled with blood, sweat and eternal happiness! Ask questions beforehand and sign up today!

Webinar takes place on Thursday November 22, 2018 @ 1PM CET

embedyoutube=BfAarIHii4o

See
https://vaadin.com/webinars
for other past and upcoming webinars.

You can post your questions below, thank you!

Here’s the CSS that Rolf uses in the video:

<style include="“shared-styles”">
     :host {
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            background-color: #f0f0f0;
     }


        #headerbar {
            align-items: center;
            padding: 5px 10px;
            box-shadow: 0 2px 5px rgba(0, 0,0 0, 0.1);
            background: white;
            position: fixed;
            z-index: 2;
            top: 0;
            width: 100%;
        }


        .title {
            font-size: var(--lumo-font-size-xl);
            font-weight: bold;
            flex: 1 1 auto;
        }


        #contentArea {
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            padding: 50px 20px 70px 20px;
            max-width: 700px;
        }


        hr {
            margin-top: 50px;
            width: 100%;
        }


        .section-title {
            font-size: var(--lumo-font-size-s);
            align-self: flex-start;
            font-weight: bold;
        }


        #footerbar {
            position: fixed;
            bottom: 0;
            align-items: center;
            padding: 5px 10px;
            background: white;
            width: 100%;
        }


        </style>
 

hey i tooked the CSS wich was printed above for styling the designer file.

i´ve made everything as in the tutorium.

but everywhere where Lumo was used it gave me the following error message

var(–lumo-space-m)
Cannot resolve ‘–lumo-space-m’ custom property

https://imgur.com/Tkmc3fp

I tested out adding <vaadin-vertical-layout style="margin: var(--lumo-space-m)"> to a design and it rendered correctly for me. Does the change have a visual change in Designer and the run app even if it complains?

My main guess right now is that the template that you have there is not importing the lumo variables correctly, and thus complains. It would still work because some other template probably imports it, and it cascades to this one.

Try adding this to the imports in the top of your template file, if it is not there yet:
import '@vaadin/vaadin-lumo-styles/all-imports.js';

I Add it and it is Still the same

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import '@vaadin/vaadin-ordered-layout/src/vaadin-horizontal-layout.js';
import '@vaadin/vaadin-button/src/vaadin-button.js';
import '@vaadin/vaadin-form-layout/src/vaadin-form-layout.js';
import '@vaadin/vaadin-combo-box/src/vaadin-combo-box.js';
import '@vaadin/vaadin-text-field/src/vaadin-text-field.js';
import '@vaadin/vaadin-lumo-styles/color.js';
import '@vaadin/vaadin-lumo-styles/typography.js';
import '@vaadin/vaadin-lumo-styles/sizing.js';
import '@vaadin/vaadin-lumo-styles/spacing.js';
import '@vaadin/vaadin-lumo-styles/style.js';
import '@vaadin/vaadin-lumo-styles/icons.js';
import '@vaadin/vaadin-lumo-styles/badges.js';
import '@vaadin/vaadin-lumo-styles/all-imports';

class UserProfile extends PolymerElement {

    static get template() {
        return html`
<style include="shared-styles">
                :host {
                    display: block;
                    height: 100%;
                }
            </style>
<style include="“shared-styles”">
     :host {
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            background-color: #f0f0f0;
     }


        #headerbar {
            align-items: center;
            padding: 5px 10px;
            box-shadow: 0 2px 5px rgba(0, 0,0, 0.1);
            background: white;
            position: fixed;
            z-index: 2;
            top: 0;
            width: 100%;
        }


        .title {
            font-size: var(--lumo-font-size-xl);
            font-weight: bold;
            flex: 1 1 auto;
        }


        #contentArea {
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            padding: 50px 20px 70px 20px;
            max-width: 700px;
        }


        hr {
            margin-top: 50px;
            width: 100%;
        }


        .section-title {
            font-size: var(--lumo-font-size-s);
            align-self: flex-start;
            font-weight: bold;
        }


        #footerbar {
            position: fixed;
            bottom: 0;
            align-items: center;
            padding: 5px 10px;
            background: white;
            width: 100%;
        }


        </style>
<vaadin-horizontal-layout theme="spacing">
 <span>Nutzer Profil</span>
 <vaadin-button theme="primary">
   speichern 
 </vaadin-button>
 <vaadin-button>
   cancel 
 </vaadin-button>
</vaadin-horizontal-layout>
<vaadin-form-layout>
 <vaadin-text-field label="Vorname"></vaadin-text-field>
 <vaadin-text-field label="Nachname"></vaadin-text-field>
 <vaadin-combo-box label="Titel"></vaadin-combo-box>
 <vaadin-combo-box label="Geschlecht"></vaadin-combo-box>
 <vaadin-text-field label="Email" colspan="2"></vaadin-text-field>
 <vaadin-combo-box label="Firma" colspan="2"></vaadin-combo-box>
</vaadin-form-layout>
<hr colspan="2">
<span>Adresse</span>
<vaadin-form-layout style="width: 100%; height: 100%;">
 <vaadin-text-field label="Straße" placeholder="Placeholder" colspan="2"></vaadin-text-field>
 <vaadin-text-field label="Straße zusatz" placeholder="Placeholder" colspan="2"></vaadin-text-field>
 <vaadin-text-field label="PLZ"></vaadin-text-field>
 <vaadin-combo-box label="Stadt"></vaadin-combo-box>
 <vaadin-combo-box label="Land"></vaadin-combo-box>
</vaadin-form-layout>
`;
    }

    static get is() {
        return 'user-profile';
    }

    static get properties() {
        return {
            // Declare your properties here.
        };
    }
}

customElements.define(UserProfile.is, UserProfile);

Okay. Does it compile and render properly when you run it? How about in Designer?

I tested out your example with the following steps:

  1. I copy pasted your code into one of my projects with the file name user-profile.js
  2. Double clicked it in IntelliJ. Code and Designer opens and it renders everything fine
  3. I Changed <span>Nutzer Profil</span><span class="title">Nutzer Profil</span> as .title was defined in your css and made use of Lumo variables.
  4. I changed font-size: var(--lumo-font-size-xl); in .title { ... } CSS back and forth between --lumo-font-size-xl and --lumo-font-size-s

End result was that it renders correctly the styling and the text “Nutzer Profil” changes size when I change which Lumo property it refers to. Can you confirm that it doesn’t work similarily for you? In which step does it differ?

![Screenshot]
(https://i.imgur.com/SUA9JRW.png)