Atomic class
Nomimono provides you the collection of classes for the property that is used often. it is designed to make sure that you can guess most of the class names without open the document and memorize too much.
The atomic class can use in any situation; it will make sure that property will take effect in that element.
You can use it to adjust nomimono's component class, use it with other CSS frameworks or combine multiple atomic classes to create the UI you want.
Class name anatomy
Look at these classes _mgt-6, _fs-3, _dp-f,
_pst-rst.
Atomic class is simple. It starts with
_ prefix, followed by abbreviated of EVERY sound of that property name, then
- and follows with property value. _[name]-[value]
Abbreviated of EVERY sound
Pattern for keyword value.
- display: flex is
_dp-f - cursor: pointer is
_cs-pt - position: absolute is
_pst-asl - width: unset is
_w-us - color: currentColor is
_cl-crcl - margin-left: auto is
_mgl-at - align-items: center is
_alit-ct - justify-content: flex-start is
_jtfct-fst - text-decoration: underline is
_tdcrt-udl
Now, can you guess this
backface-visibility: visible class name?
Yes, it is "_bfvsblt-vsb".
Theme value
Some classes have value from theme variables, especially color (color, background-color, border-color etc.) and spacing (width, margin, padding, left, bottom etc.)
For color you can just use hsl variable name in color section of
theme file. for example _cl-primary, _cl-positive,
_cl-base-200, _cl-content
For spacing you can just use scale number in the spacing section of
theme file. for example _mg-6, _pdbt-8,
_l-0, _w-10
You can visit each atomic class document for more information about each class.