alku v1.0.1

Alku

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

• Ideal for sites that are written in plain HTML or in markdown: you get good looking content by default when you use semantic elements.
• Familiarity: you know browser defaults, they are mostly retained.
• Opt-in resets: utilities do resets. Use utilities for UI development.
• Typography: lots of font stacks to choose form.

Also: does not change the default box-sizing behavior!

Installation

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

Usage: Astro

---
import 'alku/alku.css';
---

Usage: HTML

<!-- minified -->
<link rel="stylesheet" href="https://www.unpkg.com/alku/alku.css" />
<!-- source -->
<link rel="stylesheet" href="https://www.unpkg.com/alku/src/alku.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
• 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.

2) Typographic utilities

data-text works as a typographic style reset (zero specificity), and it removes margin and padding, and inherits color by default (specificity of 0, 1, 0). If you only need the resets you can write data-text="".

So for example <div data-text="heading3 italic external link mono" /> will result into what you would expect from what it says: text in the size and weight of heading3, monospace italic, and looking like an external link.

The following font sizes are available: 24, 22, 20, 18, 16, 14. Usage:

<span data-text="regular 18">Slightly bigger text than the usual 16.</span>

The sizes are fluid and increase gradually from 400px to 800px viewport width being 4px bigger at the end.

All the variants from Modern Font Stacks are also available:

So if you want a part of the site use operating system default font you can do it with data-text="system".

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.