DEV Community

loading...

Electron Adventures: Episode 8: Terminal App Styling

Tomasz Wegrzanowski
Updated on ・2 min read

This episode was created in collaboration with the amazing Amanda Cavallaro.

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:

<!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>
Enter fullscreen mode Exit fullscreen mode

Typography

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

body {
  background-color: #444;
  color: #fff;
}
Enter fullscreen mode Exit fullscreen mode

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

h1 {
  font-family: monospace;
}

#terminal {
  font-family: monospace;
}
Enter fullscreen mode Exit fullscreen mode

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

input {
  font-family: monospace;
  background-color: #444;
  color: #fff;
}
Enter fullscreen mode Exit fullscreen mode

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.

.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;
}
Enter fullscreen mode Exit fullscreen mode

Colors

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

.input {
  color: #ffa;
}

.output {
  color: #afa;
}
Enter fullscreen mode Exit fullscreen mode

And the final few tweaks:

.output {
  white-space: pre;
}

input {
  border: none;
}
Enter fullscreen mode Exit fullscreen mode

Result

This looks close enough to a Terminal app:

Episode 8 Screenshot

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

As usual, all the code for the episode is here.

Discussion (0)