Styleguide


I have to give a big shout out to the makers of Terminal CSS for creating this lightweight, modern and minimal CSS framework. I applied the framework to this site and altered it to suit my needs.

As a Ruby developer, I've been interested to see how the concept of components would be adopted and was excited to see the introduction of ViewComponent in Ruby on Rails.

However, for my personal site I wanted to stick with the simplicity and speed of a static site and opted for Middleman. This SSG has no concept of components but after some experimentation I've got a working version where I can group my Ruby components together with their SCSS and JS. Each component is rendered below and you can check out this blog post to find out how I did it.

Alerts

Default message
Primary message
Error message

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.

Images

Image

Image with caption

Image with Caption

Image with caption
Image with caption

Forms

Form legend

Grid System


Highlight.js

Built 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;
}

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

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.



Progress Bars

With only an arrow

With a percentage showing above the arrow

Without arrow


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.

Loading Element

Loading

Tooltip

Tooltip text

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
bMountain View, CA 94043-0801
USA

Tables

Most Downloaded Movies on BitTorrent, 2011
Rank Movie Download
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
torrentfreak.com

Timeline

Jan 2020
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.
Jan 2019
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.

Documentation

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

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-faceor any other font provider to include your custom fonts.
--mono-font-stack
Same as above but forcode.
--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 belowh1elements. Possible values are:
block, none