Skip to content
/ alku Public

We are divergent. The CSS framework for people who desire to have more accessible defaults.

License

Notifications You must be signed in to change notification settings

Merri/alku

Repository files navigation

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

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.

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.

HTML attributes Purpose
data-before="cover" Insert a transparent ::before pseudo element which covers the container. Useful to make links cover their entire container.
data-scrolling="horizontal" Wrap tables and other elements that are allowed to grow to be wider than the viewport.
data-scrolling="vertical" Wrap elements that you desire to scroll vertically. Note that you do need to have something that defines the height for the element such as a parent grid element.
<a aria-describedby rel="noopener noreferrer" target="_blank" /> Link to external site with a matching icon. 1
<ol role="list" />
<ul role="list" />
Remove list-style and reset margin and padding of the list. Safari VoiceOver workaround to retain list semantics.
data-text Typographic utilities 2
data-text="visually-hidden" Hide text visually, keep it available for screen readers. Display if focused (useful for skip link). 3

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="".

Value Description
heading1 <h1 /> without margin
heading2 <h2 /> without margin
heading3 <h3 /> without margin
heading4 <h4 /> without margin
heading5 <h5 /> without margin
heading6 <h6 /> without margin
heading Use page default heading font
default Use page default font
mono Use page default monospace font
link Link style
external link External link style. Note that the words must be in this order.
thin Weight 100
extralight Weight 200
light Weight 300
regular Weight 400
medium Weight 500
semibold Weight 600
bold Weight 700
extrabold Weight 800
black Weight 900
extrablack Weight 950
italic Oblique 10% (italic)
underline Underline

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:

Value Description
system System sans serif stack
handwritten Handwritten stack
transitional Transitional serif stack
oldstyle Old style serif stack
slab Slab serif stack
antique Antique serif stack
didone Didone serif stack
humanist Humanist sans serif stack
geometric Geometric humanist sans serif stack
classical Classical humanist sans serif stack
grotesque Neo-grotesque sans serif stack
industrial Industrial sans serif stack
rounded Rounded sans serif stack
monoslab Monospace slab serif stack
monocode Monospace code stack

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;
}

Rendering fixes

Element Description
Lists List elements do not align correctly against floated elements. Especially noticeable with nested lists where the nesting is lost entirely next to a float.
Tables When border-collapse: collapse; is enabled and you apply filter on a table cell part of it's border is or may be included to the effect in both Chrome and Firefox.
Subscript
Superscript
As in original normalize.css these elements have been fixed not to have effect on line height.

Opinionated stylings

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

Feature Description
Anchor Link style is also applied to regular anchor. Anchors as such have no use so this allows easy repurposing of them as buttons that appear as links.
Body The page is in a centered grid column by default.
Cursor Disabled elements have not-allowed. Busy elements have progress.
Disabled elements Reduced saturation and opacity.
Fieldset and legend Padding removed by default.
Focus indication Strong focus-visible is applied to all elements by default.
Form inputs, iframe, images height: auto; max-width: 100%;
Headings Have default font-weight of semibold (600).
Inline media and embeds vertical-align: middle by default.
Links Have font-weight of medium (500) by default. They are also underlined and inherit color.
Nested lists Have no margin.
Scroll behavior Smooth scrolling is enabled by default.
Search input Appear as regular text field for consistent styling.
Strong Has default font-weight of semibold (600). <b /> is bold (700).
SVG fill: currentColor; by default.
Textarea resize: vertical; by default.