This is Terminalize
-
☐
X

Terminalize

CSS micro-framework for terminal style UIs

Download from Github

What is it?

Terminalize is a simple CSS3 micro-framework for doing terminal-like interfaces for the web or hybrid app projects.

Motivation

when you don't create things, you become defined by your tastes rather than ability. your tastes only narrow & exclude people. so create. - Why The Lucky Stiff

Terminalize was, in its humble beginnings, an old personal website I did based on a old codepen.

The main purpose of that website, at that time, was only to show my former CSS and web development skills. So I also created a blog with curious posts about coding and projects.

But as I soon discovered, the large majority of devices screens at the time showed the website too blurry and out of focus. So I had to discard that design and create a new website from scratch.

Some time ago I re-discovered this project buried in my files and decided to transform it into some kind of micro-CSS framework for quick terminal style websites.

- Pablo

Customize

Terminalize uses few and easy to create themes with only five base constants.

You can also easily change font, border styles, and maximum width for your posts. 

								
Orange theme (as seen on top)

								
.terminalize.theme-orange {
  --color-primary: #f0bf25;
  --color-secondary: #2c2013;
  --color-tertiary: #8e7117;
  --color-quaternary: #110c05;
  --filter: sepia(100%);
}

Code blocks

							
This text is editable! Try me!

                
function one(){
  $.log("File");
}

function two(){
  $.log("File");
}

function one(){
  $.log("File");
}

function two(){
  $.log("File");
}

Display your data

Country Population Avaaz
Andorra 85,000 3,316
Luxembourg 498,000 14,228
France 64,768,000 1,827,517
Belgium 10,423,000 292,530 
									
Default table


<table>
  <thead>
    <tr>
      <th>Country</th>
      <th>Population</th>
      <th>Avaaz</th>
    </tr>
  </thead>
  <tbody>
    <!-- tr and td tags-->
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3"></td>
    </tr>
  </tfoot>
</table>
Country Population Avaaz
Andorra 85,000 3,316
Luxembourg 498,000 14,228
France 64,768,000 1,827,517
Belgium 10,423,000 292,530 
									
Simple bordered table


<table class="simple bordered">
  <thead>
    <tr>
      <th>Country</th>
      <th>Population</th>
      <th>Avaaz</th>
    </tr>
  </thead>
  <tbody>
    <!-- tr and td tags-->
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3"></td>
    </tr>
  </tfoot>
</table>
Country Population Avaaz
Andorra 85,000 3,316
Luxembourg 498,000 14,228
France 64,768,000 1,827,517
Belgium 10,423,000 292,530 
									
Table with highlight


<table class="highlight bordered">
  <thead>
    <tr>
      <th>Country</th>
      <th>Population</th>
      <th>Avaaz</th>
    </tr>
  </thead>
  <tbody>
    <!-- tr and td tags-->
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3"></td>
    </tr>
  </tfoot>
</table>

Images with filters

Use retro forms

Normal
Active
Dashed

New Customizable Selects (Chrome/Edge 130+)

Basic Customizable

Compact Style

Thick Border Style

With Complex Content

Download from Github
Terminalize v1.0