single-price-grid-component-v3.0 with CUBE CSS

Welcome

I tried to use CUBE CSS and fluid type units. It took many hours of work, but I'm happy with the result. I know it's not a big deal, but I think I passed another a milestone. I learned that line-height:normal is not equal to line-height:1.5 lol. line-height:normal depends on the font family, but for desktop browsers it's usually `1.2'.

For readable code

I think the biggest problem with CSS is writing readable code. I spent many hours on this and found this method CUBE CSS by Andy Bell. You can organise your CSS code according to on design tokens and use them in your code. This brings CSS and design closer together. You get clean, readable, scalable, and maintainable CSS code.

Resources

• To create fluid type units: https://utopia.fyi/
• The official CUBE CSS documentation: https://cube.fyi/
• To deeply understand how to code CUBE CSS: Learn by doing: CUBE CSS

Thanks

• Thanks to Grace Snow for sharing the resource on CUBE CSS. @grace-snow