Typolino – Add Style

So far the app really looks crappy. But to be honest I follow the very same pattern in my job. Sometimes it’s hard to convince people that it will look better later on. One can waste so much time in making the stuff nice and shiny (and if you only focus on a small piece of the software there might be no chance to establish common patterns – and the end of the story is proliferation everywhere).

Login screen

The login screen is quite easy and a good playground to see which pattern we should follow for Typolino. First I thought I just hack it in, but somehow that’s impossible. Let’s try to make it clean and responsive. As we already added PrimeNg and it comes with a built in grid system – let’s just use that one.

It is actually quite weird how much noise you produce in HTML to style it properly. It just explodes! Therefore I like to add comments in HTML so that I can easily identify the parts later on. HTML is one of the rare cases where I really like comments.

<div class="ui-g ui-fluid">
  <!-- Title -->
  <div class="ui-g-12">
    <h2>Login</h2>
  </div>
</div>

<!-- E-Mail -->
<div class="ui-g ui-fluid">
  <div class="ui-g-12">
    <input [(ngModel)]="email" type="text" pInputText placeholder="E-Mail" />
  </div>
</div>

<!-- Password -->
<div class="ui-g ui-fluid">
  <div class="ui-g-12">
    <input
      [(ngModel)]="password"
      type="password"
      pInputText
      placeholder="Passwort"
    />
  </div>
</div>

<!-- Login button -->
<div class="ui-g ui-fluid">
  <div class="ui-g-12">
    <button
      (click)="login()"
      pButton
      type="button"
      label="Login"
      icon="pi pi-lock"
    ></button>
  </div>
</div>

<!-- Register button -->
<div class="ui-g ui-fluid">
  <div class="ui-g-12">
    <button
      (click)="register()"
      pButton
      class="ui-button-secondary"
      type="button"
      label="Registrieren"
      icon="pi pi-user-plus"
    ></button>
  </div>
</div>

I’m not sure if this is a bug with the formatter I use in VSC. But aren’t input tags supposed to be self closing and are forbidden to be closed? Anyway, it works.

Global Styles

To get some common colors and layout we should add some styles to the body. These styles should be added to the styles.less file.

• I choose the colors from a list of dark mode colors.
• The font should be really easy for kids to read
• The extra letter spacing and word spacing should help with readability.

body {
  background-color: #202040;
  color: white;
  text-transform: uppercase;
  font-family: "Baloo Paaji 2", cursive;
  font-family: "Roboto", sans-serif;
  letter-spacing: 0.5rem;
  word-spacing: 1rem;
  padding-left: 20%;
  padding-right: 20%;
}

Result

And this is how the login page looks like.