Terminalize: A CSS terminal micro-framework

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