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.

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.6.6/dist/terminal.min.css" /><link rel="stylesheet" href="https://unpkg.com/terminal.css@0.6.6/dist/terminal.min.css" /><link rel="stylesheet" href="https://unpkg.com/terminal.css@0.6.6/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!


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

Most Downloaded Movies on BitTorrent, 2011
Rank Movie Downloads
torrentfreak.com
1 Fast Five 9,260,000
2 The Hangover II 8,840,000
3 Thor 8,330,000
4 Source Code 7,910,000
5 I Am Number Four 7,670,000
6 Sucker Punch 7,200,000
7 127 Hours 6,910,000
8 Rango 6,480,000
9 The King’s Speech 6,250,000
10 Harry Potter and the Deathly Hallows Part 2 6,030,000

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.

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.


Alerts

Default message
Primary message
Error message

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
--global-line-height
The base line height. Modify this to achieve the best readability.
--font-stack
The fonts for the website.
Use @font-face or any other font provider to include your custom fonts.
--mono-font-stack
Same as above but for code.
--background-color
The page background color
--font-color
The base font color for text, headlines, blockquotes, lists, etc.
--invert-font-color
Sometimes text appears on a colored background. Adjust this color to improve readability.
--primary-color
The primary color is used for links and buttons.
--secondary-color
The secondary color is more subtle then the primary color. It's used for code highlighting and image captions.
--error-color
Used for error alerts and form validation.
--progress-bar-background
The background color of progress bars.
--progress-bar-fill
The fill color, indicating the progress in progress bars.
--code-bg-color
The background color of <code> elements.
--input-style
The style of input element borders. Possible values are:
none, solid, dotted, dashed, double, groove, ridge, inset, outset, hidden, inherit, initial, unset
--display-h1-decoration
Show a double dash below h1 elements. Possible values are:
block, none

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 fallback to browser defaults. See here.


Version: 0.6.6 Top