Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/merri/alku

We are divergent. The CSS framework for people who desire to have more accessible defaults.
https://github.com/merri/alku

classless-css css css-framework css-reset css-utilities css-variables html-attributes normalize-css postcss

Last synced: 3 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/merri/alku
Owner: Merri
License: mit
Created: 2023-03-10T19:50:51.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2024-02-18T19:26:06.000Z (7 months ago)
Last Synced: 2024-09-24T20:53:42.767Z (4 days ago)
Topics: classless-css, css, css-framework, css-reset, css-utilities, css-variables, html-attributes, normalize-css, postcss
Language: CSS
Homepage:
Size: 231 KB
Stars: 4
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# 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

```bash
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:

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

### Usage: HTML

As your first CSS:

```html

```

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](https://modernfontstacks.com/)
- [normalize.css](https://github.com/necolas/normalize.css/blob/master/normalize.css) & [Modern normalize](https://github.com/sindresorhus/modern-normalize/blob/main/modern-normalize.css)
- [sanitize.css](https://github.com/csstools/sanitize.css/blob/main/sanitize.css)
- [Simple.css](https://github.com/kevquirk/simple.css/blob/main/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:

```css
: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](src/alku.css).

## 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. |
| `` | Link to external site with a matching icon. [¹](#1-external-link-icon) |
| `

`
`

` | Remove `list-style` and reset margin and padding of the list. Safari VoiceOver workaround to retain list semantics. |
| `data-text` | Typographic utilities [²](#2-typographic-utilities) |
| `data-text="visually-hidden"` | Hide text visually, keep it available for screen readers. Display if focused (useful for skip link). [³](#3-visually-hidden) |

### Notes

#### 1) External link icon

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

```html

Opens external site

Example

```

- `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` | `

` without margin |
| `heading2` | `

` without margin |
| `heading3` | `

` without margin |
| `heading4` | `

` without margin |
| `heading5` | `

` without margin |
| `heading6` | `

So for example `

` 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:

`Slightly bigger text than the usual 16.`

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:

```css
: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](https://github.com/alphagov/govuk-frontend/pull/1109).
- Lack of negative margin may however [cause an edge case which adds extra scrolling](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/84).

## 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.