Demo

Below you'll find all the components available. To see the code, just inspect the source code of the section in your browser.

Source code is also available on Github.

Text

This section demonstrates the styling of typographic and generally static elements.

Headings and Paragraphs

Styles of text and headings heavily relies on your desired structure of page, and you will probably have to edit these styles. On this site, only three levels of headings are used.

Aside from classic heading tags, you can use .h1 — .h6 classes.

Text colors

Text can be colored with classes:

In dark theme black and white are reversed.

Lists

By default, <ul> and <ol> look like this:

To change the marker, edit --list-character variable in your text.css.

Code

<code> looks like this

const message = "<pre> looks like this"
setTimeout(() => {
  console.log(message)
}, 7000)

Keybind

<kbd> looks like this: AltF4, ⌘С, etc.

Table

Default table:

.bordered table:

.compact tables:

All four tables above use .hanging to align the first column with the left margin.

Image

Quote

<blockquote> with a <cite> looks like this:

Wikipedia is the best thing ever. Anyone in the world can write anything they want about any subject so you know you are getting the best possible information.

— Michael Scott, from the 18th episode of the 3rd season of The Office

Link

.link looks like this. Links with <strong> and <b> inside them have thick underline.

Notice that <a> tag itself is not styled.

Underline

<u> behaves basically same as link. Bold underlines work too.

Strikethrough

<s> behaves basically same as link and underline. Bold strikethroughs work too.

Marked text

Using <mark> to highlight text will look like this.

Marked text inside <i> will have skewed background. But note that if you're using your own font, you'll have to adjust CSS to match it's italic version.

Abbreviation

<abbr> has spaced out letters: HTML. It is useful to detect them automatically using script.

When title is provided, underline will appear: HTTPS.

Figure and caption

sudo chmod -R 777 /

Framed

Black and white

.bw looks like this 🍕

Separators

<hr> looks like this:

.dinkus looks like this:

Interactive Elements

Here's what forms.css controls.

Button

Default <button> looks like this:

If you want to fool around a bit, you can use colored buttons, using .{color} and .text-{color} classes:

To get wide buttons, add .block:

To scale buttons, just use font-size CSS property:

Note that buttons made with <input type="button|reset|submit"> are not styled. If you need them, just edit the selectors.

Inputs

They look like this:

Textarea

<textarea> look like this:

Notice that horizontal resizing is disabled by default.

Checkbox

<input type="checkbox"> with label looks like this:

Radio

<input type="radio"> with label looks like this:

Select

<select> looks like this:

Range

<input type="range"> is unstyled, and with <datalist> it looks like this:

You can also use .vertical ranges:

File

<input type="file"> reuses button styles:

Fieldset

<fieldset> with <legend> looks like this:

Details

Progress

<progress> looks like this:

Sadly, indeterminate state is not supported because CSS kills it. Instead, .spinner is available:

<meter> is not supported either because it's impossible to properly style in Firefox. After fifteen damn years!