Appwrite Pink Design CSS Library

Hello, I am writing an article on Pink Design CSS library and I am struggling to create a responsive website with the library

What is your problem exactly? I'm sure @Arman or @Elad Shechter will be able to help on this front.

cc @Thomas G. Lopes - took me time to find your handle 😅

After designing the website with the Library. It is difficult to make it responsive. The docs isn't clear in that regards and also there's no option for a padding-top or margin-top Just padding and margin

I will be glad if I can get on a video call to brainstorm this with anyone willing to help

Have you read through this? https://pink.appwrite.io/foundations/responsive and https://pink.appwrite.io/utilities/responsive

As for top/bottom/left/right, pink doesn't have that because pink uses logical properties. Logical properties are more flexible for when the direction of the website needs to change. See https://medium.com/appwrite-io/supporting-css-multi-direction-languages-in-2023-ea8f1f20bb91

All the "margin-top" utility classes are writing with as "margin-block-start", for example: "u-margin-block-start-8" you can find them in this page: https://pink.appwrite.io/utilities/box-model

The reason we aren't using the old margin-top properties is we want to support any language with the new logical properties.

For the question, why we don't have padding utility classes, this is because we aren’t trying to built utility first CSS architecture. Padding is connected to a partial. while margin is isn't.

This is also why we have margin utility classes.

More about supporting different direction languages, you can read this article I wrote: https://elad.medium.com/supporting-css-multi-direction-languages-in-2023-ea8f1f20bb91