Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/basesecrete/ariato
UI library
https://github.com/basesecrete/ariato
css-framework html-css-javascript ui-design
Last synced: about 2 months ago
JSON representation
UI library
- Host: GitHub
- URL: https://github.com/basesecrete/ariato
- Owner: BaseSecrete
- Created: 2021-02-22T16:45:06.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-03-08T14:04:45.000Z (10 months ago)
- Last Synced: 2024-11-18T23:42:19.925Z (about 2 months ago)
- Topics: css-framework, html-css-javascript, ui-design
- Language: HTML
- Homepage: https://ariato.org
- Size: 7.62 MB
- Stars: 22
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Ariato
Ariato 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.
## Documentation
https://ariato.org
This 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.
## ariato.css
*ariato.css* brings **coherent style** to HTML elements and components, without requiring to add dozens of CSS classes.
*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**.
*ariato.css* first targets classless HTML elements.
```html
button
button
```
Then, *ariato.css* targets classless Wai-aria roles and states to style other usual web application components.
```html
- Tab 1
- Tab 2
- Tab 3
- Tab 4
Tabpanel 1
Tabpanel 2
Tabpanel 3
Tabpanel 4
```
Only after that, if no existing html element or wai-aria role does the job, it uses minimal css classes. (ex: ```.card```)
We then use the context (ex: ```.card > header```), or modifier classes (ex: ```.is-something```) to style variants.
### Layouts not included
Thanks 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.
## ariato.js
*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.
## *”No aria is better than bad aria“*
Wai-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.
# Quick use
### jsdelivr CDN
Link to ariato.css and ariato.js in your html layout.
```html
...
```
### or install via npm
```shell
npm install ariato --save
```
## Install
This is a Jekyll website. Install it to use it as a styleguide and to edit separated css and js files.
Install Jekyll: https://jekyllrb.com/
## MIT License
Made by [Base Secrète](https://basesecrete.com).
Rails developer? Check out [RoRvsWild](https://rorvswild.com), our Ruby on Rails application monitoring tool.