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>
Typography
First, obviously every terminal ever was always in dark mode:
body {
background-color: #444;
color: #fff;
}
And also in monospace font. Using monospace and trusting the system usually works well enough:
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.
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.
.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.
.input {
color: #ffa;
}
.output {
color: #afa;
}
And the final few tweaks:
.output {
white-space: pre;
}
input {
border: none;
}
Result
This looks close enough to a Terminal app:
In the next episode, we'll make it actually work.
As usual, all the code for the episode is here.
Top comments (0)