CSS To Go

Whoa! This looks quite unstyled... But read on!

(This is the overview page. Also look at the examples of the standard theme and the light theme).

What is it?

Sometimes, I write a bit of plain HTML and then start giving it some minimal styling. Recently, I've been thinking more and more like this:

If only there was a small^* CSS file that I could drop into the project just to get it over with instead!
^{*) For some value of "small"}

— so I created CSS To Go.

What does it look like?

Check this box to see what CSS To Go looks like Toggle theme (standard vs. light mode)

What does it do?

Basically, it does:

apply some styling on bare elements
make available a small number of utility classes

All in all, it is a quite small (under 2 kB, minified and gzipped) set of global CSS that is easy to apply to most any site.

How to use it

To enable CSS To Go, wrap your content with the CSS class ctg-root (putting it all the way up on the <body> tag works just fine).


        <DOCTYPE html>
    <html>
    <head>
        <title>Example</title>
        <link rel="stylesheet" href="/path/to/css-to-go.css" />
    </head>
    <body class="ctg-root ctg-container ctg-theme--light">

        ... your content

    </body>
<html>

That's it! To switch theme, toggle the ctg-theme--light class, which also applies to all that it is wrapping. The ctg-container class is a totally optional (and typical) content wrapper class — read more about in the examples.

Element styling

Most of its business is applying CSS to tag names, so that no manual styling at all need be applied. Such an effect can be seen on this very page, should you switch the theme on.

Utility classes

There are also a small number of utility classes, to help on those occasions that you just got to have that little something that you "always need", but for which do not fancy bringing in all of Tailwind CSS or something similar. Read more about this in the examples, utility classes section.