I had to integrate two conflicting style frameworks.
The architecture of the app had a different look and feel for the public/admin sides, but it was rolled into a single ball of mud.
The development pace of the team was glacial, because they had to restyle 50% of the framework defaults.
I dug through the code and realized that the reason some components looked so terrible was that they were built with different em basis. So I forked one framework, and wrote a script to find any lines terminating with ‘em’ or ‘rem’, extract the value, and multiply it by a const and then rewrite it in pixels.
This worked almost perfectly except for a few collisions with some other uncommon css property name. It allowed us to keep using those frameworks without needing to restyle things over and over again Which saved a ton of time in getting early pages shipped.
Comments
I had to integrate two conflicting style frameworks.
The architecture of the app had a different look and feel for the public/admin sides, but it was rolled into a single ball of mud.
The development pace of the team was glacial, because they had to restyle 50% of the framework defaults.
I dug through the code and realized that the reason some components looked so terrible was that they were built with different em basis. So I forked one framework, and wrote a script to find any lines terminating with ‘em’ or ‘rem’, extract the value, and multiply it by a const and then rewrite it in pixels.
This worked almost perfectly except for a few collisions with some other uncommon css property name. It allowed us to keep using those frameworks without needing to restyle things over and over again Which saved a ton of time in getting early pages shipped.