SkeletonCSS

Not a CSS reset, just a set of basic styles to get you going.

This is an example page built with SkeletonCSS

Throughout my career, I've largely avoided reset files and worked with the quirks of CSS and rendering engines in mind. SkeletonCSS is a different take on a CSS library where you just get a base to work from.

This is not a CSS reset

Built with SASS, the project ships with some basic mixins and themeing functionality:

Typography

One of the reasons for SkeletonCSS to exist was to provide a layer of typography that could just be plugged into any site. Over time it's evolved and become a little more harmonious.

There are basic styles for a hero section with navigation, the footer, headings, paragraphs, lists and code blocks. The basics are covered with CSS variables available that you can adapt. More recently, the approach is more in line with the examples from this video on great typography.

To make embeds responsive, you just need to apply the embedded-video class.

Fonts

SkeletonCSS relies on system fonts, reducing the payload and footprint of your website.

Variables in typography

SkeletonCSS exposes 8 CSS variables for you to use. Headings, paragraphs and lists take advantage of them out of the box. You can change the values to suite your needs.

--font-size-xxxxl: 4rem;
--font-size-xxxl: 2.9rem;
--font-size-xxl: 2rem;
--font-size-xl: 1.6rem;
--font-size-lg: 1.2rem;
--font-size-md: 1rem;
--font-size-sm: .8rem;
--font-size-xs: .5rem;

The naming convention is similar to other projects, like Bootstrap, and give you sizes all the way from XS up to XXXL.

Media Queries

If you're using SASS you can still write out your own media queries, but you can also generate them using the mq() mixin.

@include mq(width (px) (, orientation (0 | portrait | landscape), min-max (min | max))) {
    // CSS here
}

Keep it simple by supplying just the first parameter and your media query will take a mobile-first approach and treat it as a min-width property. You can introduce the orientation or choose to switch to a max-width instead. The following example shows how to define a min-width of 700px.

@include mq(700px)) {
    // CSS here
}

The following example switches from min-width to max-width, but continues to ignore the device's orientation.

@include mq(700px, 0, max)) {
    // CSS here
}

To introduce orientation as a paramater, just specifiy using the second parameter.

@include mq(700px, portrait)) {
    // CSS here
}

For more complex situations, it's recommended you write your own media queries. This mixin exists to reduce the footprint of the SASS file and it's use is completely optional.

SASS allows you to nest media queries in your existing code, so you are also able to write code in the following format:

p {
    margin-block-end: 2rem;
    @include mq(700px) {
        margin-block-end: 4rem;
    }
}

Forms

Example form

Using SkeletonCSS?

If you make use of SkeletonCSS, please let the author know.

Alternatively, you can reach out on Bluesky.