DEV Community

Cover image for This is Formilk
Matias Trujillo
Matias Trujillo

Posted on • Updated on

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

Formilk

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;
}
Enter fullscreen mode Exit fullscreen mode

Formilk

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! 👇

Discussion (5)

Collapse
bahrus profile image
Bruce B. Anderson

Is there a link to the Formilk library?

Collapse
uppercod profile image
Matias Trujillo Author

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

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

Collapse
d3vhound profile image
Devion Villegas

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

Collapse
uppercod profile image
Matias Trujillo Author

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