Awesome
MONO - monotone css framework for semantic html
Motivation and goals
The main purpose of this design is document or blog sites, the classic web.
- communicate with a user through forms rather than colors, which is more obvious and accessible
- get a unique design, away from boring standards
- possibility to apply any color you need for branding
- use only semantic selectors, no component classes to force a native platform and a11y
Instalation
npm i @artalar/mono
Or
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@artalar/mono/mono.css">
Usage
Setup docs site
There are two options (first the simple one).
- Add
mono-all
class to the root (body) of your site and write semantic html - Add
mono
class to needed semantic elements
Template
Create html file and fill it like this, then paste all you content (.md
generator output) to the main
tag. Change navigation and footer as you need.
Change colors
Use --mono-main
and --mono-back
css variables. You could use our sandbox to try different colors and get the contrast (with sync
checkbox enabled).
Roadmap
- add styles to input elements and it variations
- add styles to the rest html elements
- fix design consistance
- use consistent sizings by css variables
- fix cross-browser issues
PR welcome!