This is Formilk

Formilk is a system of configurable webcomponents created by UpperCod, with formilk you can speed up your design system creation process, associating your design tokens to formilk using custom-properties.

motivations

Formilk was born from the need to:

1. be subtly aesthetic.
2. be easily configurable.
3. be agnostically friendly.

Subtly aesthetic

Easily configurable

All formilk tokens can be managed at root level, for this the following css rule would be enough to modify the color of the buttons

:root{
    --fm--color-button-60: black;
    --fm--color-button-10: white;
}

But there is something much better in Formilk, the tokens are related by group and inheritance, but that is for another article.

Agnostically friendly

This is the best part of Formilk, well the previous one was already good, but this is amazing (or so I think).

Formilk is created with Atomico JS and it is agnostically friendly, this means that at the level of webcomponents Atomico gives additional support to libraries like React and Preact, in the following example you will see the use of React TSX + Formilk

This is Agnostic friendly, Formilk is the example of how you can create components for React without using React and best of all your components will work in any library or HTML

Message

All this Formilk magic is thanks to Atomico JS and its tools:

1. @atomico/desing-tokens: library to sustainably apply layout tokens to your webcomponent system.
2. @atomico/hooks: more than 40 utilities like hooks
3. @atomico/exports: exports all of Formilk, compiling, generating the exports, types, and wrappers for React and Preact.
4. @atomico/react: extend the webcomponents to react and preact respecting all the rules defined in your component created with Atomico.

👐 I invite you to join the Atomicojs community and learn more about our projects! 👇

Comments

[Bruce B. Anderson]

Is there a link to the Formilk library?

[Matias Trujillo]

oh, you're right, I hadn't added a link to the repository

• Github github.com/atomicojs/formilk
• Figma figma.com/community/file/109174456...
• Doc formilk.netlify.app/

I am attentive in case you need ap support to play with Formilk or Atomico

[Devion Villegas]

I wonder what inspired the name. It's 'unique'.

[Matias Trujillo]

Hi, the name is the union of Form + Milk, that's why the black and white tones are by default in the UI, but yesterday I was told about the similarity of the name with Formik (A package for React), so I'll add a distinction in the documentation and in the Readme of this, as we have different goals