{"id":21565833,"url":"https://github.com/basesecrete/ariato","last_synced_at":"2026-01-04T12:04:04.854Z","repository":{"id":57183676,"uuid":"341268828","full_name":"BaseSecrete/ariato","owner":"BaseSecrete","description":"UI library","archived":false,"fork":false,"pushed_at":"2024-03-08T14:04:45.000Z","size":7985,"stargazers_count":23,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-13T03:09:01.684Z","etag":null,"topics":["css-framework","html-css-javascript","ui-design"],"latest_commit_sha":null,"homepage":"https://ariato.org","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BaseSecrete.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2021-02-22T16:45:06.000Z","updated_at":"2024-12-13T11:17:07.000Z","dependencies_parsed_at":"2024-03-08T15:25:53.633Z","dependency_job_id":"da703b03-27cc-4db7-be49-473ca1c97741","html_url":"https://github.com/BaseSecrete/ariato","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BaseSecrete%2Fariato","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BaseSecrete%2Fariato/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BaseSecrete%2Fariato/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BaseSecrete%2Fariato/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BaseSecrete","download_url":"https://codeload.github.com/BaseSecrete/ariato/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244160064,"owners_count":20408022,"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":["css-framework","html-css-javascript","ui-design"],"created_at":"2024-11-24T10:21:59.198Z","updated_at":"2026-01-04T12:03:59.826Z","avatar_url":"https://github.com/BaseSecrete.png","language":"HTML","readme":"\u003cimg align=\"right\" width=\"300px\" src=\"assets/images/ariato.jpg\" style=\"margin: 0 0 72px 48px;\" /\u003e\n\n# Ariato\n\nAriato is a vanilla CSS and Javascript web UI framework that encourages writing better html markup. It was initially made for https://www.rorvswild.com, the Ruby on Rails monitoring tool.\n\n## Documentation\nhttps://ariato.org\n\nThis repository contains a Jekyll website that serves as a documentation and a styleguide to preview separated css and javascript files modifications, and to generate concatenated files.\n\n## ariato.css\n*ariato.css* brings **coherent style** to HTML elements and components, without requiring to add dozens of CSS classes.\n\n*ariato.css* cares about **color**, **contrast**, **typography**, **spacing** and **rythm** and sets sensible design constraints. It uses modern CSS to provide features such as **dark mode**.\n\n*ariato.css* first targets classless HTML elements.\n\n```html\n  \u003c!-- button example --\u003e\n  \u003cbutton type=\"button\"\u003ebutton\u003c/button\u003e\n  \u003cinput type=\"submit\" value=\"submit button\"\u003e\n  \u003cspan role=\"button\"\u003ebutton\u003c/span\u003e\n\n  \u003c!-- this is not semantic and not styled as a button. Ariato doesn't include a .button class since there are already better ways. --\u003e\n  \u003cspan class=\"button\"\u003enot a button\u003c/span\u003e\n```\n\nThen, *ariato.css* targets classless Wai-aria roles and states to style other usual web application components.\n\n```html\n  \u003c!-- tab example --\u003e\n  \u003cul role=\"tablist\"\u003e\n    \u003cli role=\"tab\" aria-controls=\"tab-1\" aria-selected=\"true\"\u003eTab 1\u003c/li\u003e\n    \u003cli role=\"tab\" aria-controls=\"tab-2\"\u003eTab 2\u003c/li\u003e\n    \u003cli role=\"tab\" aria-controls=\"tab-3\" aria-disabled=\"true\"\u003eTab 3\u003c/li\u003e\n    \u003cli role=\"tab\" aria-controls=\"tab-4\"\u003eTab 4\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cdiv role=\"tabpanel\" id=\"tab-1\"\u003e\n    \u003cp\u003eTabpanel 1\u003c/p\u003e\n  \u003c/div\u003e\n  \u003cdiv role=\"tabpanel\" id=\"tab-2\"\u003e\n    \u003cp\u003eTabpanel 2\u003c/p\u003e\n  \u003c/div\u003e\n  \u003cdiv role=\"tabpanel\" id=\"tab-3\"\u003e\n    \u003cp\u003eTabpanel 3\u003c/p\u003e\n  \u003c/div\u003e\n  \u003cdiv role=\"tabpanel\" id=\"tab-4\"\u003e\n    \u003cp\u003eTabpanel 4\u003c/p\u003e\n  \u003c/div\u003e\n```\n\nOnly after that, if no existing html element or wai-aria role does the job, it uses minimal css classes. (ex: ```.card```)\n\nWe then use the context (ex: ```.card \u003e header```), or modifier classes (ex: ```.is-something```) to style variants. \n\n### Layouts not included\nThanks to modern properties like ```grid```, ```flex``` or ```clamp```, most page layouts can be done in just a few lines of CSS. Ariato doesn't include a complex 12 columns layout system or all variants a component could have. An external directory may later provide a collection of components and templates.\n\n## ariato.js\n\n*ariato.js* is a small, dependency-free vanilla Javascript library powering some of the components like the tabs or the carousel. It targets aria roles and states if available, or relies on data attributes. It also add keyboard navigation to this components.\n\n## *”No aria is better than bad aria“*\n\nWai-aria is sometimes confusing. The official documentation starts by the intimidating claim that *no aria is better than bad aria*. One of our goal is to figure out what good aria is, and to make it easier to use properly.\n\n# Quick use\n\n### jsdelivr CDN\n\nLink to ariato.css and ariato.js in your html layout.\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003c!-- css --\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/ariato@1.1.0/dist/ariato.min.css\" type=\"text/css\"\u003e\n    \u003c!-- js --\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/ariato@1.1.0/dist/ariato.min.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    ...\n  \u003cbody\u003e\n\u003c/html\u003e\n```\n\n### or install via npm\n\n```shell\nnpm install ariato --save\n```\n\n\n## Install \n\nThis is a Jekyll website. Install it to use it as a styleguide and to edit separated css and js files.\nInstall Jekyll: https://jekyllrb.com/\n\n\n## MIT License\n\nMade by [Base Secrète](https://basesecrete.com).\n\nRails developer? Check out [RoRvsWild](https://rorvswild.com), our Ruby on Rails application monitoring tool.\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasesecrete%2Fariato","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbasesecrete%2Fariato","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasesecrete%2Fariato/lists"}