Grid System
Terminal CSS has no build-in grid system. However, you can roll your own with Flexbox or CSS Grid.
Navigation
Navigation Lists
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:
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
-
Aliquam tincidunt mauris eu risus
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- 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.
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
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 Foundation1981 Landings Drive
Building K
Mountain View, CA 94043-0801
USA
Forms
Progress Bar
With only an arrow
With a percentage showing above the arrow
Without arrow
Buttons
Button Group
Cards
Timeline
Alerts
Media
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