For the variables and components is there a best practice for a responsive page design. As an example:
Is it best for a border to be pixels for a responsive design?
Is it best for a spacing to be rem for a responsive design?
etc?
Hey Bill,
Great question. Unfortunately, it’s tough to give a firm answer on this. I’d say it’s largely preferential and dependent on what you’re trying to accomplish. In my opinion, when it comes to responsive web design, everything that can be made scalable with REM units should be. Though there are some elements that should not be sized using REMs. Borders are a good example. I typically use Pixels for borders, and while a good argument could be made for using EMs in certain contexts, EMs are not available in Skuid at this point so I would stick with Pixels.
This is a tricky subject, and honestly the best way to get better at choosing the appropriate unit in a given situation is to build a solid understanding of how each unit works and what the differences are. Below, I’ve linked a few resources that were really helpful for me. A couple of the resources talk about the difference between EMs and REMs, and while EMs aren’t currently available in Skuid, those resources are great for understanding REMs. Hope this was helpful!
A Bite-Sized Best Practices Guide for CSS Units: Em, Rem, Px, and More
Thank you Sam.
