Cosmoe UI
docs
Best practices
Tips for efficient use
Learn how to use the resources efficiently.
Getting started
While the below instructions are important, do know that the best way to use the resources is the way that works the best for you.
Setting max widths
You will notice most of the resources (except some components) have their width set to fill with 1fr. It simply means that the stack will take up all the space of the parent stack it is inside. The best practice is to set width to fill and height to fit for responsiveness.
With Fill width, you should also set max-width properties to ensure that your content fits different screen sizes the same way. For example, in a breakpoint size of 1200px, if you set the max width of an Hero header UI block to 1000px, it means the header won't expand more than 1000px, no matter the breakpoint size (like when viewed on a 1920px breakpoint).
Keeping the UI kit in reach
Try to keep the UI kit file open as a separate tab along with your project file tab at all times so that you can easily switch to the kit project file and copy and paste resources from it to your main project.
Utilize the Master file
As outlined previously on the benefit of using the Master file, trust us, starting a new project by duplicating that file will save you a lot of time in regards to color and text styles.