✨ColorClue✨ - My fun side project about colors! Explore a vast color DB with a simple API. Try it now!

A modern and minimal CSS framework for terminal lovers.

Project Goals

Terminal CSS has no overhead and is lightweight (~ 3k gzip). The source is written in pure css to be accessible for everybody and easy to contribute.

AI Assisted Documentation

You can use a 🤖 CustomGPT trained on the documentation and source code of Terminal CSS. It's available for ChatGPT Terminal CSS Guide. Check it out!

Markdown ❤️ Terminal CSS

It's perfect for your personal website, blog, or side project.

How to use

When using something like Webpack just install with npm i terminal.css.

import 'terminal.css'

Terminal CSS is also available via CDN

<link rel="stylesheet" href="https://unpkg.com/terminal.css@0.7.4/dist/terminal.min.css" />

Themes

To create your own theme just open the dev-tools and edit the CSS Variables. Copy and paste it to your website. Done!


Contributors


With ❤️ by Jonas D.

Grid System

Terminal CSS has no build-in grid system. However, you can roll your own with Flexbox or CSS Grid.

random image random image random image random image random image random image random image



Lists

  • This is a list item
  • So is this - there could be more
  • Make sure to style list items to:
    • Not forgetting child list items
    • Not forgetting child list items
    • Not forgetting child list items
    • Not forgetting child list items
  • A couple more
  • Top-level list items

Don't forget Ordered lists:

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus
    1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. Aliquam tincidunt mauris eu risus.
  3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  4. Aliquam tincidunt mauris eu risus.

Description lists are also included.

Description list title 01
Description list description 01
Description list title 02
Description list description 02
Description list description 03

A Table of content, which can be used as an index for a blog archive.

Unlike regular lists, the TOC component only supports a single depth level.

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  3. Aliquam tincidunt mauris eu risus.
  4. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  5. Aliquam tincidunt mauris eu risus.

Typography

Level 1 Heading

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Level 2 Heading

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Level 3 Heading

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Level 4 Heading

Level 5 Heading
Level 6 Heading

Tables

Traditional colors of Japan
Source: Wikipedia
Japanese name Romanized English translation RGB Hex triplet
一斤染 Ikkonzome One kin (0.6 kg (1.3 lb)) dye 240,143,144 #F08F90
紅梅色 Kōbai-iro Red plum colored 219,90,107 #DB5A6B
桜色 Sakura-iro Cherry blossom color 252,201,185 #FCC9B9
薄紅 Usubeni Pale crimson (dye) 242,102,108 #F2666C

Special Elements

Terminal CSS also supports a range of special elements.

Blockquote

This is a properly formatted blockquote, btw. Measuring programming progress by lines of code is like measuring aircraft building progress by weight.

This is a properly formatted blockquote, btw. Measuring programming progress by lines of code is like measuring aircraft building progress by weight.

Misc

Terminal Prompt

I am the a tag example
I am the abbr tag example
I am the b tag example
I am the cite tag example
I am the code tag example
I am the del tag example
I am the dfn tag example
I am the em tag example
I am the i tag example
I am the ins tag example
I am the kbd tag example
I am the q tag example
I am the samp tag example
I am the small tag example
I am the span tag example
I am the strong tag example
I am the sub tag example
I am the sup tag example
I am the var tag example

Address

Mozilla Foundation
1981 Landings Drive
Building K
Mountain View, CA 94043-0801
USA


Forms

Form legend

Progress Bar


With only an arrow

With a percentage showing above the arrow

Without arrow



Buttons















Button Group



Cards

Card Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.


Timeline

Card Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.
Card Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.


Alerts

Default message
Primary message
Error message

Media

Picsum
Media Left Element
This is the media content
Media Right Element
This is the media content
Picsum

Image with caption

Image with caption
Image with caption

Supports Highlight.js

Terminal CSS comes with a build in theme for Highlight.js


.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: var(--block-background-color);
  color: var(--font-color);
}

.hljs-comment,
.hljs-quote {
  color: var(--secondary-color);
}

.hljs-variable {
    color: var(--font-color);
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
  color: var(--primary-color);
}

.hljs-string,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-literal,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-addition {
  color: var(--secondary-color);
}

.hljs-string {
    color: var(--secondary-color);
}

.hljs-deletion,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-meta {
  color: var(--primary-color);
}

.hljs-doctag {
  color: var(--secondary-color);
}

.hljs-attr {
  color: var(--primary-color);
}

.hljs-symbol,
.hljs-bullet,
.hljs-link {
  color: var(--primary-color);
}


.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}


Documentation

Most of the documentation is still at an early stage. For more details, please have a look at the source of this website.

Variables

Customizing the style of Terminal CSS with CSS Variables is easy.

--global-font-size
The Base font size
(Default: 15px)
--global-line-height
The baseline height. Modify this to achieve the best readability.
(Default: 1.4em)
--global-space
A global spacer used to consistently space things
(Default: 10px)
--font-stack
The fonts for the website.
Use @font-face or any other font provider to include your custom fonts.
(Default: "Menlo", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", serif)
--mono-font-stack
Same as above but for code.
(Default: "Menlo", "Monaco", "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", serif)
--background-color
The page background color
(Default: #fff)
--font-color
The base font color for text, headlines, blockquotes, lists, etc.
(Default: #151515)
--invert-font-color
Sometimes text appears on a colored background. Adjust this color to improve readability.
(Default: #fff)
--primary-color
The primary color is used for links and buttons.
(Default: #1a95e0)
--secondary-color
The secondary color is more subtle than the primary color. It's used for code highlighting and image captions.
(Default: #727578)
--error-color
Used for error alerts and form validation.
(Default: #d20962)
--progress-bar-background
The background color of progress bars.
(Default: #727578)
--progress-bar-fill
The fill color, indicating the progress in progress bars.
(Default: #151515)
--code-bg-color
The background color of <code> elements.
(Default: #e8eff2)
--block-background-color
The background color of <pre> elements. Also applies to <code> elements inside a <pre>

Typography

Terminal CSS uses a single font size for almost all elements. However, there is a way to use browser default font sizes if you wish.

Single font size
Use <body class="terminal">. If you leave that option, it will fall back to browser defaults. See here.


Version: v0.7.5 Top