DEV Community

Cover image for Ubuntu Terminal in CSS
Cody Pearce
Cody Pearce

Posted on • Updated on • Originally published at codinhood.com

Ubuntu Terminal in CSS

This was originally published on codinhood.com

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.


.Terminal__Toolbar {
  background: linear-gradient(#504b45 0%,#3c3b37 100%);
  width: 100%;
  padding: 0 8px;
  box-sizing: border-box;
  height: 25px;
  display: flex;
  align-items: center;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.Toolbar__user {
  color: #d5d0ce;
  margin-left: 4px;
  font-size: 12px;
  line-height: 14px;
  margin-bottom: 1px;
}

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.

✕ is an X

─ is a line

◻ is a box

<button class="Toolbar__button Toolbar__button--exit">&#10005;</button>
<button class="Toolbar__button">&#9472;</button>
<button class="Toolbar__button">&#9723;</button>
.Toolbar__buttons {
  display: flex;
  align-items: center;
}

.Toolbar__button {
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  padding: 0;
  font-size: 7px;
  background: linear-gradient(#7d7871 0%, #595953 100%);
  text-shadow: 0px 1px 0px rgba(255,255,255,0.2);
  box-shadow: 0px 0px 1px 0px #41403A,0px 1px 1px 0px #474642;
  border: none;
  margin-right: 4px;

}
.Toolbar__button:hover {
  cursor: pointer;
}
.Toolbar__button--exit {
  background: #f25d2b;
  background: linear-gradient(#f37458 0%, #de4c12 100%);
  background-clip: padding-box;
}
.Toolbar__button:focus {
  outline: none;
}

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.


.Terminal__body {
  background: rgba(56, 4, 40, .9);
  height: calc(100% - 25px);
  margin-top: -1px;
  padding-top: 2px;
  font-family: 'Ubuntu mono';
}
.Terminal__text {
  color: #ddd;
}

.Terminal__Prompt {
  margin-top: 10px;
  display: flex;
}

.Prompt__user {
  color: #87d441;
}
.Prompt__location {
  color: #6d85a9;
}
.Prompt__dollar {
  color: #ddd;
}

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.

.Prompt__cursor {
  height: 17px;
  width: 8px;
  background: white;
  display: block;
  margin-left: 8px;
  animation: 2000ms ease infinite alternate blink;
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

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.

Top comments (18)

Collapse
 
daviddalbusco profile image
David Dal Busco

We've got a Web Component which, with Prismjs underneath, highlight code and displays it in a styled Mac-like window.

We use the component in DeckDeckGo and we also provide it as a Gatsby plugin

Your article gave me the idea that maybe we could enhance it with another style of Window respectively with an Ubuntu like window style.

User of the component would be then able to select between Mac-isch style, Ubuntu-style or none.

Thanks for the article and idea ๐Ÿ‘

P.S.: If anyone is motivated to give a hand and contribute, I've opened a feature request in our repo about it ๐Ÿ˜ƒ

Collapse
 
moopet profile image
Ben Sinclair

Trouble there is that Mac style is relatively unchanging, whereas "Ubuntu" style is for one flavour, with one set of defaults. Why stop there, why not cater for other DEs? And at that point... why make it about cloning things, and just open it up as a general "theme"?

Collapse
 
daviddalbusco profile image
David Dal Busco

General theming is already possible. The component exposes multiple CSS4 variables.

With these it's possible to style either the "window container" or the colors of the highlight code.

I think it's handy to have moreover than variables just one parameter to toggle between one theme or the other or none.

But yes why not, once a new "window style" added, why not repeat and adding more. Go big or go home ๐Ÿ˜‰

Collapse
 
codypearce profile image
Cody Pearce

DeckDeckGo looks really cool

Collapse
 
daviddalbusco profile image
David Dal Busco

๐Ÿ™

And thank again for the great article Cody ๐Ÿ˜ƒ๐Ÿ‘

Collapse
 
ghost profile image
Ghost

Ubuntu mono is in fact my favorite coding font, even though I don't use Ubuntu. I've used it for years and I've tried many, and I mean probably too many. Doesn't have ligatures but I actually prefer it that way, when I'm coding I like to see exactly what it is there. I think there is a way to add ligatures to it but as I mentioned, I don't like it so I haven't tried.

Is very clear even in small sizes and the perfect weight, not too light, not too heavy and the bold is still readable while clearly noticeable. And to my taste looks modern without looking weird or over the top.

Collapse
 
supunkavinda profile image
Supun Kavinda • Edited

Nice! It's very cute.

btw, what does alternate do in the animation?

Collapse
 
the_riz profile image
Rich Winter

Makes it animate in the pattern hide-show-show-hide so you only animate "forwards" but get both.

Collapse
 
supunkavinda profile image
Supun Kavinda

Ah, got it. Never knew it was possible. Thanks ๐Ÿ˜Š

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Very nicely done. Good job!

Collapse
 
mdhesari profile image
Mohammad Fazel

Good job!

Collapse
 
coderwelsch profile image
Joseph Ribbe • Edited

Awesome exercise โ˜บ๏ธ! There is just a very tiny issue on the border radius of the terminal window :P. Maybe you just need a

overflow: hidden

somewhere โ˜บ๏ธ

Collapse
 
jgb profile image
Jean Gรฉrard Bousiquot

I love it! <3

Collapse
 
miniscruff profile image
miniscruff • Edited

Not bad, but do you have a scarf?
dev-to-uploads.s3.amazonaws.com/i/...

Collapse
 
ineam profile image
Amine M • Edited

nice work, believe me, I tried even to write some commands on it haha

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

Looks great! :)

Collapse
 
wrldwzrd89 profile image
Eric Ahnell

This is cool! I'm not sure what I'd USE it for exactly, but still - I need to learn more CSS stuff like this.

Collapse
 
tojacob profile image
Jacob Samuel G.

Beautiful! โ™ฅ