Alku

A classless + HTML attribute utility CSS. (Might become a component library later on, we shall see.)

Goal: to provide a "color neutral" CSS framework that respects browser defaults where possible while fixing bugs / issues, and improving usability. Alku favors what is good for the user over what looks pretty.

This framework is ideal for sites that contain content written in plain HTML or markdown as you get good looking content just by using semantic HTML elements.

For more app-like development there are also HTML attribute utilities which help out with some common issues.

Color neutral?

By default Alku is rather black'n'white, even the links are in text color (but underlined). There are a few places where colors do exist, but they are system colors (such as text highlight) or very common conventions such as green color to indicate "positive" and red to indicate "negative". And even those colors are neutralized by using CSS color names (seagreen and crimson).

Alku does not provide dark mode but all the colors used are compatible with dark mode, so feel free to go to the color-scheme: dark; side!

Status

Alku is still early on it's lifespan. Expect major (breaking) changes and new features as long as it stays in version 1.

You can expect maturity to improve as you can notice the documentation progressing.

Notably still missing: form elements.

Installation

npm install alku --save-dev
pnpm install alku --save-dev
yarn add alku --save-dev

Usage: Astro

Intended to be the first CSS you load:

---
import 'alku';
// or alternatively if you wish to be more specific:
import 'alku/alku.css';
---

Usage: HTML

As your first CSS:

<!-- minified -->
<link rel="stylesheet" href="https://www.unpkg.com/alku/alku.css" type="text/css" />
<!-- source -->
<link rel="stylesheet" href="https://www.unpkg.com/alku/src/alku.css" type="text/css" />

Or host it yourself.

Sources of inspiration

Stealing ideas from many sources (as we all do) and mixing in some ideas of my own.

• Modern Font Stacks
• normalize.css & Modern normalize
• sanitize.css
• Simple.css
• Pico.css
• Emoji fonts from Emojiterra.com's stylesheet

There are others, maybe I find or remember them again some day.

Customization

You can customize these CSS variables in your own stylesheet:

:root {
    --page-default-font: var(--system-sans-stack);
    --page-marker-font: var(--mono-stack);
    --page-heading-font: var(--old-style-serif-stack);
    --page-mono-font: var(--mono-stack);

    --focus-color: Highlight;
    --link-color: currentColor;

    --ol-indent: 2em;
    --ul-indent: 1.375em;
}

You can check the available font stack variables from source alku.css file.

HTML attribute utilities

These are opinioned usability related extensions of HTML via the CSS.

Notes

1) External link icon

aria-describedby should point to an element which describes that the link leads to an external site. For example:

<!-- best place is in the beginning of body element -->
<div id="link-to-external-site" hidden>Opens external site</div>

<!-- example link -->
<a href="https://www.example.com" aria-describedby="link-to-external-site" rel="noopener noreferrer" target="_blank">
    Example
</a>

• rel="noopener noreferrer" is recommended for security reasons.
• Icon is part of the last word and does not wrap alone to a new line. (Except in Samsung Internet.)
• Implemented using ::after pseudo-element.

3) Visually hidden

This is a modernized variant:

:root [data-text='visually-hidden' i]:not(:focus):not(:active) {
    all: initial;
    clip-path: inset(50%);
    contain: content;
    position: absolute;
    height: 1px;
    width: 1px;
    white-space: nowrap;
}

• Has intentionally high specificity of 0, 4, 0 which should be enough to win over most other selectors without resorting to !important.
• Does not have negative margin as it can change the text reading order.
• Lack of negative margin may however cause an edge case which adds extra scrolling.

Rendering fixes

Opinionated stylings

This list may get outdated over time or may be incomplete.