Electron Adventures: Episode 8: Terminal App Styling
Tags: javascript, electron
Published: 2021-08-01 18:46:20

This episode was created in collaboration with the amazing [Amanda Cavallaro](https://www.amandacavallaro.com/).

Over the next episodes we'll be working on a simple Terminal app.

Modern terminals are very complex but a very minimal one just needs:

* a way to input commands
* run those commands
* show the output

And in this episode, we'll ignore the pesky "run commands" part, and just start with styling.
This way, by the time we get to complex subjects, we'll have all this side stuff out of the way.

### index.html

Let's just think how we're going to represent the terminal. We need some input and some history.
For lorem ipsum, I ran two random commands and copy-pasted them to the document:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Episode 8 - Terminal App</title>
    <link href="app.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <h1>Very amazing terminal app</h1>
    <div id="terminal">
      <div id="history">
        <div class="input-line">
          <span class="prompt">$</span>
          <span class="input">uname -a</span>
        </div>
        <div class="output">Darwin pallas 20.5.0 Darwin Kernel Version 20.5.0: Sat May 8 05:10:33 PDT 2021; root:xnu-7195.121.3~9/RELEASE_X86_64 x86_64</div>

        <div class="input-line">
          <span class="prompt">$</span>
          <span class="input">date</span>
        </div>
        <div class="output">Sun 1 Aug 2021 15:53:55 BST</div>
      </div>

      <div class="input-line">
        <span class="prompt">$</span>
        <form>
          <input type="text" autofocus />
        </form>
      </div>
    </div>
  </body>
</html>
```

### Typography

First, obviously every terminal ever was always in dark mode:

```css
body {
  background-color: #444;
  color: #fff;
}
```

And also in monospace font. Using `monospace` and trusting the system usually works well enough:

```css
h1 {
  font-family: monospace;
}

#terminal {
  font-family: monospace;
}
```

Now we also need to make the input follow this, as it doesn't inherit parent styling.

```css
input {
  font-family: monospace;
  background-color: #444;
  color: #fff;
}
```

### Input line and prompt

Commands are traditionally preceded by `$`. We put it into a separate element, as we might went to do custom prompts at some point.

The easiest way to style this is to make the container a flexbox, with prompt being non-expanding, but the actual input being expanding.

As `input` is wrapped in a `form`, we need to make that another flexbox too.

```css
.input-line {
  display: flex;
}

.input-line > * {
  flex: 1;
}

.input-line > .prompt {
  flex: 0;
  padding-right: 0.5rem;
}

.output {
  padding-bottom: 0.5rem;
}

form {
  display: flex;
}

input {
  flex: 1;
}
```

### Colors

This is something terminals don't normally do, but I think it's helpful to clearly mark input and output with different colors.

```css
.input {
  color: #ffa;
}

.output {
  color: #afa;
}
```

And the final few tweaks:

```css
.output {
  white-space: pre;
}

input {
  border: none;
}
```

### Result

This looks close enough to a Terminal app:

![Episode 8 Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xuqxblu4yrkz9b62y85d.png)

In the next episode, we'll make it actually work.

As usual, [all the code for the episode is here](https://github.com/taw/electron-adventures/tree/master/episode-08-terminal-app-styling).