{"id":15047038,"url":"https://github.com/merri/alku","last_synced_at":"2025-10-17T04:11:05.124Z","repository":{"id":177865108,"uuid":"612371447","full_name":"Merri/alku","owner":"Merri","description":"We are divergent. The CSS framework for people who desire to have more accessible defaults.","archived":false,"fork":false,"pushed_at":"2024-02-18T19:26:06.000Z","size":237,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-10T00:44:00.388Z","etag":null,"topics":["classless-css","css","css-framework","css-reset","css-utilities","css-variables","html-attributes","normalize-css","postcss"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Merri.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-10T19:50:51.000Z","updated_at":"2023-10-23T16:58:15.000Z","dependencies_parsed_at":"2024-12-28T18:15:08.943Z","dependency_job_id":null,"html_url":"https://github.com/Merri/alku","commit_stats":null,"previous_names":["merri/alku"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Merri%2Falku","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Merri%2Falku/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Merri%2Falku/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Merri%2Falku/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Merri","download_url":"https://codeload.github.com/Merri/alku/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248137998,"owners_count":21053775,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["classless-css","css","css-framework","css-reset","css-utilities","css-variables","html-attributes","normalize-css","postcss"],"created_at":"2024-09-24T20:53:54.718Z","updated_at":"2025-10-17T04:11:00.062Z","avatar_url":"https://github.com/Merri.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Alku\n\nA classless + HTML attribute utility CSS. Might become a component library later on, we shall see.\n\n-   Ideal for sites that are written in plain HTML or in markdown: you get good looking content by default when you use semantic elements.\n-   Familiarity: you know browser defaults, they are mostly retained.\n-   Opt-in resets: utilities do resets. Use utilities for UI development.\n-   Typography: lots of font stacks to choose form.\n\nAlso: does not change the default `box-sizing` behavior!\n\n## Installation\n\n```bash\nnpm install alku --save-dev\npnpm install alku --save-dev\nyarn add alku --save-dev\n```\n\n### Usage: Astro\n\nIntended to be the first CSS you load:\n\n```astro\n---\nimport 'alku';\n// or alternatively if you wish to be more specific:\nimport 'alku/alku.css';\n---\n```\n\n### Usage: HTML\n\nAs your first CSS:\n\n```html\n\u003c!-- minified --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://www.unpkg.com/alku/alku.css\" type=\"text/css\" /\u003e\n\u003c!-- source --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://www.unpkg.com/alku/src/alku.css\" type=\"text/css\" /\u003e\n```\n\nOr host it yourself.\n\n## Sources of inspiration\n\nStealing ideas from many sources (as we all do) and mixing in some ideas of my own.\n\n-   [Modern Font Stacks](https://modernfontstacks.com/)\n-   [normalize.css](https://github.com/necolas/normalize.css/blob/master/normalize.css) \u0026 [Modern normalize](https://github.com/sindresorhus/modern-normalize/blob/main/modern-normalize.css)\n-   [sanitize.css](https://github.com/csstools/sanitize.css/blob/main/sanitize.css)\n-   [Simple.css](https://github.com/kevquirk/simple.css/blob/main/simple.css)\n-   Emoji fonts from Emojiterra.com's stylesheet\n\nThere are others, maybe I find or remember them again some day.\n\n## Customization\n\nYou can customize these CSS variables in your own stylesheet:\n\n```css\n:root {\n\t--page-default-font: var(--system-sans-stack);\n\t--page-marker-font: var(--mono-stack);\n\t--page-heading-font: var(--old-style-serif-stack);\n\t--page-mono-font: var(--mono-stack);\n\n\t--focus-color: Highlight;\n\t--link-color: currentColor;\n\n\t--ol-indent: 2em;\n\t--ul-indent: 1.375em;\n}\n```\n\nYou can check the available font stack variables from [source alku.css file](src/alku.css).\n\n## HTML attribute utilities\n\nThese are opinioned usability related extensions of HTML via the CSS.\n\n| HTML attributes                                                    | Purpose                                                                                                                                                            |\n| :----------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `data-before=\"cover\"`                                              | Insert a transparent `::before` pseudo element which covers the container. Useful to make links cover their entire container.                                      |\n| `data-scrolling=\"horizontal\"`                                      | Wrap tables and other elements that are allowed to grow to be wider than the viewport.                                                                             |\n| `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. |\n| `\u003ca aria-describedby rel=\"noopener noreferrer\" target=\"_blank\" /\u003e` | Link to external site with a matching icon. [\u003csup\u003e1\u003c/sup\u003e](#1-external-link-icon)                                                                                  |\n| `\u003col role=\"list\" /\u003e`\u003cbr /\u003e`\u003cul role=\"list\" /\u003e`                     | Remove `list-style` and reset margin and padding of the list. Safari VoiceOver workaround to retain list semantics.                                                |\n| `data-text`                                                        | Typographic utilities [\u003csup\u003e2\u003c/sup\u003e](#2-typographic-utilities)                                                                                                     |\n| `data-text=\"visually-hidden\"`                                      | Hide text visually, keep it available for screen readers. Display if focused (useful for skip link). [\u003csup\u003e3\u003c/sup\u003e](#3-visually-hidden)                            |\n\n### Notes\n\n#### 1) External link icon\n\n`aria-describedby` should point to an element which describes that the link leads to an external site. For example:\n\n```html\n\u003c!-- best place is in the beginning of body element --\u003e\n\u003cdiv id=\"link-to-external-site\" hidden\u003eOpens external site\u003c/div\u003e\n\n\u003c!-- example link --\u003e\n\u003ca href=\"https://www.example.com\" aria-describedby=\"link-to-external-site\" rel=\"noopener noreferrer\" target=\"_blank\"\u003e\n\tExample\n\u003c/a\u003e\n```\n\n-   `rel=\"noopener noreferrer\"` is recommended for security reasons.\n-   Icon is part of the last word and does not wrap alone to a new line. (Except in Samsung Internet.)\n-   Implemented using `::after` pseudo-element.\n\n#### 2) Typographic utilities\n\n`data-text` works as a typographic style reset (zero specificity), and it removes margin and padding, and inherits color\nby default (specificity of `0, 1, 0`). If you only need the resets you can write `data-text=\"\"`.\n\n| Value           | Description                                                     |\n| :-------------- | :-------------------------------------------------------------- |\n| `heading1`      | `\u003ch1 /\u003e` without margin                                         |\n| `heading2`      | `\u003ch2 /\u003e` without margin                                         |\n| `heading3`      | `\u003ch3 /\u003e` without margin                                         |\n| `heading4`      | `\u003ch4 /\u003e` without margin                                         |\n| `heading5`      | `\u003ch5 /\u003e` without margin                                         |\n| `heading6`      | `\u003ch6 /\u003e` without margin                                         |\n| `heading`       | Use page default heading font                                   |\n| `default`       | Use page default font                                           |\n| `mono`          | Use page default monospace font                                 |\n| `link`          | Link style                                                      |\n| `external link` | External link style. Note that the words must be in this order. |\n| `thin`          | Weight 100                                                      |\n| `extralight`    | Weight 200                                                      |\n| `light`         | Weight 300                                                      |\n| `regular`       | Weight 400                                                      |\n| `medium`        | Weight 500                                                      |\n| `semibold`      | Weight 600                                                      |\n| `bold`          | Weight 700                                                      |\n| `extrabold`     | Weight 800                                                      |\n| `black`         | Weight 900                                                      |\n| `extrablack`    | Weight 950                                                      |\n| `italic`        | Oblique 10% (italic)                                            |\n| `underline`     | Underline                                                       |\n\nSo for example `\u003cdiv data-text=\"heading3 italic external link mono\" /\u003e` will result into what you would expect from what\nit says: text in the size and weight of heading3, monospace italic, and looking like an external link.\n\nThe following font sizes are available: 24, 22, 20, 18, 16, 14. Usage:\n\n`\u003cspan data-text=\"regular 18\"\u003eSlightly bigger text than the usual 16.\u003c/span\u003e`\n\nThe sizes are fluid and increase gradually from 400px to 800px viewport width being 4px bigger at the end.\n\nAll the variants from Modern Font Stacks are also available:\n\n| Value          | Description                         |\n| :------------- | :---------------------------------- |\n| `system`       | System sans serif stack             |\n| `handwritten`  | Handwritten stack                   |\n| `transitional` | Transitional serif stack            |\n| `oldstyle`     | Old style serif stack               |\n| `slab`         | Slab serif stack                    |\n| `antique`      | Antique serif stack                 |\n| `didone`       | Didone serif stack                  |\n| `humanist`     | Humanist sans serif stack           |\n| `geometric`    | Geometric humanist sans serif stack |\n| `classical`    | Classical humanist sans serif stack |\n| `grotesque`    | Neo-grotesque sans serif stack      |\n| `industrial`   | Industrial sans serif stack         |\n| `rounded`      | Rounded sans serif stack            |\n| `monoslab`     | Monospace slab serif stack          |\n| `monocode`     | Monospace code stack                |\n\nSo if you want a part of the site use operating system default font you can do it with `data-text=\"system\"`.\n\n#### 3) Visually hidden\n\nThis is a modernized variant:\n\n```css\n:root [data-text='visually-hidden' i]:not(:focus):not(:active) {\n\tall: initial;\n\tclip-path: inset(50%);\n\tcontain: content;\n\tposition: absolute;\n\theight: 1px;\n\twidth: 1px;\n\twhite-space: nowrap;\n}\n```\n\n-   Has intentionally high specificity of `0, 4, 0` which should be enough to win over most other selectors without resorting to `!important`.\n-   Does not have negative margin as [it can change the text reading order](https://github.com/alphagov/govuk-frontend/pull/1109).\n-   Lack of negative margin may however [cause an edge case which adds extra scrolling](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/issues/84).\n\n## Rendering fixes\n\n| Element                    | Description                                                                                                                                                             |\n| :------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| 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.              |\n| 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. |\n| Subscript\u003cbr /\u003eSuperscript | As in original `normalize.css` these elements have been fixed not to have effect on line height.                                                                        |\n\n## Opinionated stylings\n\nThis list may get outdated over time or may be incomplete.\n\n| Feature                     | Description                                                                                                                                        |\n| :-------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------- |\n| 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. |\n| Body                        | The page is in a centered grid column by default.                                                                                                  |\n| Cursor                      | Disabled elements have `not-allowed`. Busy elements have `progress`.                                                                               |\n| Disabled elements           | Reduced saturation and opacity.                                                                                                                    |\n| Fieldset and legend         | Padding removed by default.                                                                                                                        |\n| Focus indication            | Strong `focus-visible` is applied to all elements by default.                                                                                      |\n| Form inputs, iframe, images | `height: auto; max-width: 100%;`                                                                                                                   |\n| Headings                    | Have default `font-weight` of semibold (600).                                                                                                      |\n| Inline media and embeds     | `vertical-align: middle` by default.                                                                                                               |\n| Links                       | Have `font-weight` of medium (500) by default. They are also underlined and inherit color.                                                         |\n| Nested lists                | Have no margin.                                                                                                                                    |\n| Scroll behavior             | Smooth scrolling is enabled by default.                                                                                                            |\n| Search input                | Appear as regular text field for consistent styling.                                                                                               |\n| Strong                      | Has default `font-weight` of semibold (600). `\u003cb /\u003e` is bold (700).                                                                                |\n| SVG                         | `fill: currentColor;` by default.                                                                                                                  |\n| Textarea                    | `resize: vertical;` by default.                                                                                                                    |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerri%2Falku","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmerri%2Falku","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerri%2Falku/lists"}