CSS To Go - examples

Try light mode.  Or go back to the overview.

Below follows examples of the styles and utilities provided by CSS To Go.

Headings

To the top

Four levels of headings are supported, <h1>, <h2>, <h3> and <h4>. I pity you if you would need (or would use) higher than that!

Examples

Heading <h1>

Heading <h2>

Heading <h3>

Heading <h4>

Paragraphs

To the top

Paragraphs, <p>, are styled with

  • a max-width, which will only have effect in quite wide viewports
  • some line spacing (means CSS line-height)
  • just an ounce of right-padding
— all for readability.

Examples

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi quae reprehenderit, sequi laborum ullam optio quas in consequuntur iste dolor dignissimos, reiciendis error possimus! In quisquam distinctio blanditiis perspiciatis molestiae?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro modi nulla dolores quod? Nesciunt facilis placeat, dignissimos numquam aperiam eum perferendis sed? Praesentium molestiae dolorum facilis harum, fugit id beatae. Ducimus consequuntur at, quisquam animi quia ex earum? Atque iure accusantium voluptas! Aliquid, voluptatibus accusamus perferendis sequi vitae repellat similique eum dicta!

Hyperlinks

To the top

Links have little extra to them, but for some text-decoration and a hover/focus style.

Examples

Do you want to visit one of the world's most popular web pages? Just go ahead!
Here is another one, albeit a bit less popular. There is currently no difference in appearance between external links and relative links, but that might change in the future.

Lists

To the top

Ordered and unordered lists are supported. Both lists keep their list-style-type, with some styling applied to their numbers and bullets, respectively. There is also a hover effect for the list items.

Examples

Ordered list

  1. Cannonball Adderley
  2. Trane
  3. George Garzone

Unordered list

  • Cannonball Adderley
  • Trane
  • George Garzone

Sectioning

To the top

For sectioning purposes, the <hr> element can be used, and is given some styling.

Examples

Lorem ipsum text that goes on for a while.
Talking about the fascinating amet consectetur adipisicing elit. And such. Not to mention dolorem aspernatur illo officia, sunt deleniti — officia obcaecati, harum veritatis assumenda quae nesciunt ab delectus aliquid at, just until a wild <hr> appears.

Then follows some other text, equally fascinating.

Quotes and emphasis

To the top

Currently, these quote- and emphasis elements are supported:

  • <code>
  • <em>
  • <blockquote>

Examples

<code>

This is a sentence that mentions something and denotes it as code:
10 PRINT "HELLO"; GOTO 10; — hopefully because it is.

<em>

Some words in this sentence really begged to be emphasized!

<blockquote>

In theory, there is no difference between practice and theory.

Form controls

To the top

There is support for some of the most commonly used form controls, such as

  • Text inputs — <input type="text">
  • Range inputs — <input type="range">
  • Text fields — <textarea>
  • Checkboxes — <input type="checkbox">
  • Radio buttons — <input type="radio">
  • Selects — <select>
  • Buttons — <button type="button|submit"> and <input type="submit">

They are supposed to be wrapped in a <label> element, like this: 

    <label>
        User name
        <input type="text">
    </label>

This gives the effect seen in the examples below.

Examples

Text input

Range input

Text area

Checkboxes and radio buttons

Checkboxes

Radio buttons

Select

Buttons

Utility classes

To the top

There is a small number of utility classes, which are there to help when it may be not enough to simply include the CSS and let the global styles apply to bare HTML elements — which really is the primary goal for the idea of CSS To Go.

Types of utility classes

There are container-, note-, signal-, and formatter classes.

Container

— is generally meant to be used as a wrapper for the whole content — though it could be used for just chunks, too.
Apart from some padding, it also gets (auto-) margin and max-width when the viewport gets a bit large. Typical page-wrapping behaviour.

Personally, I like to put it on the <body> tag, together with the style-enabling class, ctg-root.

Note

Utility classes that create something that looks notification-like.
They come in four flavours: ctg-note, ctg-note--info, ctg-note--warn and ctg-note--error.

Signal

Quick way to turn something into a "yes", "no", or "watch out" thing. These are the currently available signals:

  • ctg-signal--yes
  • ctg-signal--no
  • ctg-signal--warn
See below for examples.

Formatter

Those currently available are

  • ctg-format--date
  • ctg-format--numerical

They both just apply a monospace font style to its content. Pretty lame, maybe they will be removed.

Examples

Container

Outlines applied for illustrative purposes.

This is a div with no container class applied.

This is a div that has class="ctg-container" on it

Notes

Using class="ctg-note"

Using class="ctg-note--info"

Using class="ctg-note--warn"

Using class="ctg-note--error"

Signal

Below is an example where some plain buttons are turned into having "signals".

Formatters

ctg-format--date

2021-06-15 vs. 2021-06-15 (unformatted).

ctg-format--numerical

12 768 vs. 12 768 (unformatted).