Ubuntu Terminal in CSS

February 14, 2020

csscss artcodepen

The design and color scheme for Ubuntu and the Ubuntu terminal are relatively unique and immediately recognizable by anyone who's used Ubuntu before. Recreating the Ubuntu terminal in CSS is a fun little exercise to practice your CSS skills.

Ubuntu Font

For those that do not know, Ubuntu actually has it's own font in three different styles: regular, condensed, and monospace. The Ubuntu terminal uses Ubuntu regular for the title in the toolbar and Ubuntu Monospace for the text within the terminal. Both of these can be found and sourced from Google Fonts.

Toolbar

The Ubuntu terminal toolbar consists of three buttons and the title which consists of the user and the system name. The background of the toolbar is actually a slight linear gradient of dark greys. Additionally, the topbar right and left corners are rounded unlike the bottom right and left corners of the whole terminal.

1..Terminal__Toolbar {
2.    background: linear-gradient(#504b45 0%, #3c3b37 100%);
3.    width: 100%;
4.    padding: 0 8px;
5.    box-sizing: border-box;
6.    height: 25px;
7.    display: flex;
8.    align-items: center;
9.    border-top-left-radius: 6px;
10.    border-top-right-radius: 6px;
11.}
12.  
13..Toolbar__user {
14.    color: #d5d0ce;
15.    margin-left: 4px;
16.    font-size: 12px;
17.    line-height: 14px;
18.    margin-bottom: 1px;
19.}

Toolbar Buttons

The toolbar buttons also have a slight grey linear-gradient, as well as a text-shadow, and box-shadow. We could use icons to render the toolbar button contents but to keep it simple we will use HTML Character Entities for each.

1.&#10005; // x
2.&#9472;  // line
3.&#9723; // box

1.<button class="Toolbar__button Toolbar__button--exit">&#10005;</button>
2.<button class="Toolbar__button">&#9472;</button>
3.<button class="Toolbar__button">&#9723;</button>

1..Toolbar__buttons {
2.    display: flex;
3.    align-items: center;
4.}
5.  
6..Toolbar__button {
7.    width: 12px;
8.    height: 12px;
9.    box-sizing: border-box;
10.    display: flex;
11.    align-items: center;
12.    justify-content: center;
13.    border-radius: 100%;
14.    padding: 0;
15.    font-size: 7px;
16.    background: linear-gradient(#7d7871 0%, #595953 100%);
17.    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2);
18.    box-shadow: 0px 0px 1px 0px #41403a, 0px 1px 1px 0px #474642;
19.    border: none;
20.    margin-right: 4px;
21.}
22..Toolbar__button:hover {
23.    cursor: pointer;
24.}
25..Toolbar__button--exit {
26.    background: #f25d2b;
27.    background: linear-gradient(#f37458 0%, #de4c12 100%);
28.    background-clip: padding-box;
29.  }
30..Toolbar__button:focus {
31.    outline: none;
32.}

Terminal Body and Text

The body of the terminal is even simpler, simply a rectangle with a specific purple background and the appropriate text for a terminal inside. The important part here to get the colors right since the Ubuntu terminal is so distinctive with its colors. The text "Welcome to Ubuntu!" and dollar sign are #ddd, the name and system are a bright green #87d441, and the location (which is just ~ right now) is a washed-out blue/grey #6d85a9.

1..Terminal__body {
2.    background: rgba(56, 4, 40, 0.9);
3.    height: calc(100% - 25px);
4.    margin-top: -1px;
5.    padding-top: 2px;
6.    font-family: "Ubuntu mono";
7.}
8..Terminal__text {
9.    color: #ddd;
10.}
11.
12..Terminal__Prompt {
13.    margin-top: 10px;
14.    display: flex;
15.}
16.  
17..Prompt__user {
18.    color: #87d441;
19.}
20..Prompt__location {
21.    color: #6d85a9;
22.}
23..Prompt__dollar {
24.    color: #ddd;
25.}

Ubuntu Cursor Animation

Finally, add the terminal cursor, which is just a white block by default. We can animate the cursor like it's blinking by changing the opacity from 0 to 1. To make the animation loop, we can add infinite and alternate to the animation property so the cursor will animate from 0 to 1 then animate from 1 to 0 then animate from 0 to 1 over and over again.

1..Prompt__cursor {
2.    height: 17px;
3.    width: 8px;
4.    background: white;
5.    display: block;
6.    margin-left: 8px;
7.    animation: 2000ms ease infinite alternate blink;
8.}
9.  
10.@keyframes blink {
11.    0% {
12.      opacity: 0;
13.    }
14.    100% {
15.      opacity: 1;
16.    }
17.}

Expanding the demo

We could expand this demo by using a library like typed.js to show the terminal text animating a command. Or we could put a textarea within the terminal and allow users to type.