Forem

Tomasz Wegrzanowski
Tomasz Wegrzanowski

Posted on • Edited on

1 1 1

Electron Adventures: Episode 8: Terminal App Styling

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay