How I built a typical Ubuntu Terminal using HTML & CSS

#html #css #ubuntu #bash

I woke up one morning and felt the need to test my HTML & CSS skills without using any library nor framework. This is to test how well I understood HTML & CSS.

Today, many young developers don’t like taking the time to understand how HTML and CSS work under the hood before delving into front-end frameworks like React, Angular, Vue, etc. They all want to jump into using the tools and technologies to build apps. I know that feeling too. I was once at that state.

Without Further Ado, let’s get down to business.

In my project root directory, I created an index.htm file using my text editor and input the following boilerplate to start with:

<!DOCTYPE html>
<html>  
  <head>    
    <meta charset="utf-8">    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">        
    <title>Ubuntu Terminal</title>    
    <meta name="description" content="">    
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <link rel="stylesheet" type="text/css" href="style.css"/>
  </head>  
  <body>  
    <!-- Body Section -->
  </body>
</html>

As you read through, you’ll notice I made use of 2 HTML5 semantic elements <main> and <section> introduced by W3C to clearly define elements.

You should also consider using HTML5 semantic elements in your next project.

Now, in the body section, I first inserted the main tag, giving it an id attribute of container and nest a div tag with an id attribute of terminal. I then sectioned the terminal into two (2) parts: the terminal bar and the terminal body. For the terminal bar section, I used a section tag with an id attribute of terminal__bar while the terminal body section takes a section tag with an id attribute of terminal__body.

I don’t want to go into many details so I don't bore you. You all want to see codes, not epistles.

The code snippet below shows everything you need to see. I believe even a newbie would understand what has been done there.

<main id="container">
  <div id="terminal">
    <!-- Terminal Bar -->       
    <section id="terminal__bar">          
      <div id="bar__buttons">            
        <button class="bar__button" id="bar__button--exit">&#10005;</button>            
        <button class="bar__button">&#9472;</button>                
        <button class="bar__button">&#9723;</button>          
      </div>          
      <p id="bar__user">fobabs@ubuntu: ~</p>        
    </section>        
    <!-- Terminal Body -->        
    <section id="terminal__body">          
      <div id="terminal__prompt">            
        <span id="terminal__prompt--user">fobabs@ubuntu:</span>            
        <span id="terminal__prompt--location">~</span>            
        <span id="terminal__prompt--bling">$</span>            
        <span id="terminal__prompt--cursor"></span>          
      </div>        
    </section>      
  </div>    
</main>

The BEM methodology in naming my class and id attributes was used here

Now done with the skeletal work of the terminal, it’s time to add some beauty.

@import url('https://fonts.googleapis.com/css?family=Ubuntu');
@import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono'); 
body {  
  background: linear-gradient(45deg, #57003f 0%,#f57453 100%); 
  font-family: Ubuntu;
} 
#container {  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  height: 100vh;
} 
#terminal {  
  width: 70vw;  
  height: 65vh;  
  box-shadow: 2px 4px 10px rgba(0,0,0,0.5);
} 
#terminal__bar {  
  display: flex;  
  width: 100%;  
  height: 30px;  
  align-items: center;  
  padding: 0 8px;  
  box-sizing: border-box;  
  border-top-left-radius: 5px;  
  border-top-right-radius: 5px;  
  background: linear-gradient(#504b45 0%,#3c3b37 100%);
} 
#bar__buttons {  
  display: flex;  
  align-items: center;
} 
.bar__button {  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  padding: 0;  
  margin-right: 5px;  
  font-size: 8px;  
  height: 12px;  
  width: 12px;  
  box-sizing: border-box;  
  border: none;  
  border-radius: 100%;  
  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;
}
.bar__button:hover {  
  cursor: pointer;
}
.bar__button:focus {  
  outline: none;
}
#bar__button--exit {  
  background: linear-gradient(#f37458 0%, #de4c12 100%);    
  background-clip: padding-box;
} 
#bar__user {   
  color: #d5d0ce;  
  margin-left: 6px;  
  font-size: 14px;  
  line-height: 15px;
} 
#terminal__body {  
  background: rgba(56, 4, 40, 0.9);  
  font-family: 'Ubuntu Mono';  
  height: calc(100% - 30px);  
  padding-top: 2px;  
  margin-top: -1px;
} 
#terminal__prompt {  
  display: flex;
}
#terminal__prompt--user {  
  color: #7eda28;
}
#terminal__prompt--location { 
  color: #4878c0;
}
#terminal__prompt--bling {  
  color: #dddddd;
}
#terminal__prompt--cursor {  
  display: block;  
  height: 17px;  
  width: 8px;  
  margin-left: 9px;  
  animation: blink 1200ms linear infinite;
} 
@keyframes blink {  
  0% {    
    background: #ffffff;  
  }  
  49% {    
    background: #ffffff;  
  }  
  60% {    
    background: transparent;  
  }  
  99% {    
    background: transparent;  
  }  100% {    
    background: #ffffff;  
  }
} 
@media (max-width: 600px) {  
  #terminal {    
    max-height: 90%;    
    width: 90%;  
  }
}

Checking the CSS code above, you’ll notice I made use of ubuntu fonts to make the terminal look “Ubuntuish”. I believe it is understandable enough to comprehend.

“Et voilà!”. I believe you enjoyed me.

P.S. I hope to add some interactivity and functionalities to make it a full-fledged app in the future. If you want to contribute to the project, you can fork it on GitHub with the link below:

GitHub - Ubuntu Terminal

Don’t forget to follow me here on Dev for more curated tech stuff.

You can also follow my activities on Facebook, Twitter, LinkedIn, and Instagram.