rene.css

[edenvidal]

• [ ] suggest refinements @stanislavasal

Two main comments: We need to change the containers that are currently styled only with borders because they are not very visible. I think starting from the "Layout" page, we need to work on enhancing the content and making it more informative using visual methods. Perhaps we should create special images or animations.

More detailed:

• [ ] Add color codes to Colors. We can add them directly inside the containers

Reference:

• [ ] The blocks are barely visible, and I feel they don't convey much information. I think it would be better to create a static image/animation for this block

I couldn't find a reference, but I suggest creating an animation where blocks will first appear one by one, then spread apart, and between them, a container/arrow with the captions "hr" will appear. Below is an animation draft that I quickly coded:

https://github.com/rnbwdev/rene.css/assets/90899256/444133ca-7b28-4cd1-9b5c-732fa450451f

• [ ] Here I think it would be sufficient to simply add specific size values for each block as static images (for example, block, two arrows inside and a labels "number + unit of measurement")

Reference:

• [ ] It might be great to add animations with movements here too, indicating the values in the appearing block (in the video above, it's gray). Alternatively, we could just create a static image with values

• [ ] Here, I suggest making the blocks colored/black-and-white and adding animation (not looped, but at the moment when they appear in the viewport, the blocks will transition from their normal position to the one defined by this style), to make the style guide viewing a bit more fun for everybody and understandable for beginners

I'll also add a reference that I quickly coded myself as an example for the column style:

https://github.com/rnbwdev/rene.css/assets/90899256/403ac0db-d807-4357-a3ce-cec58f74adc3

• [ ] Here, I suggest changing the logic of displaying paddings. Instead of making a block of corresponding size, let's add each padding to a specific block, highlight it (padding), and add the dimensions

Reference:

• [ ] Here everything is great, but we could try making the blocks more visible

[stanislavasal]

@edenvidal Hello! Check it please :)

[edenvidal]

this is great @stanislavasal ! we'll come back to refine it soon 🙌