ariato
ariato copied to clipboard
BaseSecrete
UI library
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.
<!-- button example -->
<button type="button">button</button>
<input type="submit" value="submit button">
<span role="button">button</span>
<!-- this is not semantic and not styled as a button. Ariato doesn't include a .button class since there are already better ways. -->
<span class="button">not a button</span>
Then, ariato.css targets classless Wai-aria roles and states to style other usual web application components.
<!-- tab example -->
<ul role="tablist">
<li role="tab" aria-controls="tab-1" aria-selected="true">Tab 1</li>
<li role="tab" aria-controls="tab-2">Tab 2</li>
<li role="tab" aria-controls="tab-3" aria-disabled="true">Tab 3</li>
<li role="tab" aria-controls="tab-4">Tab 4</li>
</ul>
<div role="tabpanel" id="tab-1">
<p>Tabpanel 1</p>
</div>
<div role="tabpanel" id="tab-2">
<p>Tabpanel 2</p>
</div>
<div role="tabpanel" id="tab-3">
<p>Tabpanel 3</p>
</div>
<div role="tabpanel" id="tab-4">
<p>Tabpanel 4</p>
</div>
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>
<head>
<!-- css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/ariato.min.css" type="text/css">
<!-- js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ariato.min.js"></script>
</head>
<body>
...
<body>
</html>
or install via npm
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.
Rails developer? Check out RoRvsWild, our Ruby on Rails application monitoring tool.
BaseSecrete