Grid System

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

Logo

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
1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
2. 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

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.

Bill Gates

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

Email input:

Text input:

Invalid input (min-length 10):

Password input:

Radio input:

Checkbox input:

Select field:

Textarea:

</div>
                <div class="form-group">
                  <label for="submit">Input Button:</label>
                  <button
                    class="btn btn-default"
                    type="submit"
                    role="button"
                    name="submit"
                    id="submit"
                  >
                    Submit
                  </button>
                </div>
              </fieldset>
            </form>
          </section>
          <hr />
          <section>
            <header><h2 id="Progress">Progress Bar</h2></header>
            <br />
            <p>With only an arrow</p>
            <div class="progress-bar">
              <div class="progress-bar-filled" style="width: 40%"></div>
            </div>
            <p>With a percentage showing above the arrow</p>
            <div class="progress-bar progress-bar-show-percent">
              <div
                class="progress-bar-filled"
                style="width: 30%"
                data-filled="Loading 30%"
              ></div>
            </div>
            <p>Without arrow</p>
            <div class="progress-bar progress-bar-no-arrow">
              <div
                class="progress-bar-filled"
                style="width: 60%"
                data-filled="Loading 60%"
              ></div>
            </div>
            <br />
          </section>

<hr />
          <section>
            <header><h2 id="Buttons">Buttons</h2></header>
            <button class="btn btn-default">Default</button><br /><br />
            <button class="btn btn-primary">Primary</button><br /><br />
            <button class="btn btn-error">Error</button><br /><br />
            <button class="btn btn-default btn-ghost">Ghost Button</button
            ><br /><br />
            <button class="btn btn-primary btn-ghost">Ghost Button</button
            ><br /><br />
            <button class="btn btn-error btn-ghost">Ghost Button</button
            ><br /><br />
            <button class="btn btn-primary btn-block">Block Level Button</button
            ><br /><br />
            <p>Button Group</p>
            <div class="btn-group">
              <button class="btn btn-default btn-ghost">Left</button>
              <button class="btn btn-default btn-ghost">Middle</button>
              <button class="btn btn-default btn-ghost">Right</button>
            </div>
            <br />
          </section>

<hr />
          <section>
            <header><h2 id="Cards">Cards</h2></header>
            <div class="terminal-card">
              <header>Card Title</header>
              <div>
                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.
              </div>
            </div>
            <br />
          </section>

<hr />
          <section>
            <header><h2 id="Timeline">Timeline</h2></header>
            <div class="terminal-timeline">
              <div class="terminal-card">
                <header>Card Title</header>
                <div>
                  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.
                </div>
              </div>
              <div class="terminal-card">
                <header>Card Title</header>
                <div>
                  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.
                </div>
              </div>
            </div>
            <br />
          </section>

<hr />
          <section>
            <header><h2 id="Alerts">Alerts</h2></header>
            <div class="terminal-alert">Default message</div>
            <div class="terminal-alert terminal-alert-primary">
              Primary message
            </div>
            <div class="terminal-alert terminal-alert-error">Error message</div>
          </section>
          <hr />
          <section>
            <header><h2 id="Figure">Image with caption</h2></header>
            <figure>
              <img
                src="https://picsum.photos/1000/600?random&imageWithCaption"
                alt="Image with caption"
                title="Image with caption"
              />
              <figcaption>Image with caption</figcaption>
            </figure>
          </section>

<hr />
          <section>
            <header>
              <h2 id="highlightjs">Supports Highlight.js</h2>
              <p>
                Terminal CSS comes with a build in theme for
                <a
                  href="https://highlightjs.org/"
                  target="_black"
                  rel="noopener noreferrer"
                  >Highlight.js</a
                >
              </p>
            </header>
            <pre>
<code>
.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;
}
</code>
</pre>
          </section>

<hr />
          <section>
            <header><h2>Documentation</h2></header>
            <p>
              Most of the documentation is still at an early stage. For more
              details, please have a look at the source of this website.
            </p>
            <section>
              <header>
                <h2 id="DocVariables">Variables</h2>
              </header>
              <p>
                Customizing the style of Terminal CSS with CSS Variables is
                easy.
              </p>

<dl class="custom-dl">
                <style>
                  .custom-dl dt {
                    font-weight: 600;
                  }

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

<hr />
            <section>
              <header>
                <h2 id="DocTypography">Typography</h2>
              </header>
              <p>
                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.
              </p>
              <dl class="custom-dl">
                <dt>Single font size</dt>
                <dd>
                  Use <code><body class="terminal"></code>. If
                  you leave that option, it will fallback to browser defaults.
                  See <a href="/sans-serif/">here</a>.
                </dd>
              </dl>
            </section>
          </section>
          <hr />
          <footer>
            <p>
              This project is inspired by
              <a
                href="https://egoist.sh/"
                target="_blank"
                rel="noopener noreferer"
                >@egoist's</a
              >
              work -
              <a href="https://github.com/egoist/hack" rel="noopener noreferer"
                >hack.css</a
              >
            </p>
          </footer>

<hr />
          <section>
            <header></header>
            <p>Version: 0.7.2 <a href="#menu">Top</a></p>
          </section>
        </main>
      </div>
    </div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
    <script async defer src="https://buttons.github.io/buttons.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll("pre code").forEach((block) => {
          window.hljs.highlightBlock(block);
        });
      });
    </script>
  </body>
</html>

Project Goals

Markdown ❤️ Terminal CSS

How to use

Themes

Contributors

Grid System

Navigation

Navigation Lists

Lists

Typography

Level 1 Heading

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading

Level 6 Heading

Tables

Special Elements

Blockquote

Misc

Terminal Prompt

Address

Forms