Skip to content
Submitted over 2 years ago

Stats preview card with grid, flexbox and CUBE CSS

ania•330
@ania221B
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

  1. I couldn't get the image to look like in the design. It similar but not exact. Can anyone offer a hint how to match it better?
  2. I couldn't match the font sizes and paddings (I don't have Figma files). Does anybody have any tips on how to match them better without specific values?
  3. I tried using CUBE CSS but it seems there is too much code and it looks complex. Can anyone offer any advice on how I can improve? Am I right in thinking it's too complicated?

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 2 years ago

    Hi there, again, ania! 👋

    I thought I'd take a look at other solutions you've submitted. 🙂 Nice work on this challenge! 🙌

    You might want to try using a value of multiply for the mix-blend-mode property on the image in the card component to get it closer to looking like the design.

    The design files will make finding the sizes for fonts and other elements much quicker and easier, but if you don't have those, consider looking into an extension like PerfectPixel, which allows you to overlay an image behind your code so that you can see exactly how your site matches up with the original design.

    I've never tried CubeCSS but I noticed that you're creating a lot of utility classes in your CSS. If you want to cut down on your lines of CSS, it would be easier to use less utility classes and simply assign styles to class for specific elements in your site. If you like using utility classes and such, perhaps look into a CSS framework like Tailwind CSS. Otherwise, small classes such as these might be more useful in larger projects where you want to keep consistency across a site with a common theme. 😉

    Hope you find these suggestions helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful
    2
    ania•330
    @ania221BPosted over 2 years ago

    @ApplePieGiraffe

    Hello!

    Thank you very much! I appreciate that you took the time to look at my questions.

    I will try multiply and the tool you mentioned, thank you!

    CUBE CSS is something I'm trying to learn. I've seen Kevin Powell using it in his video. It seemed very reasonable and looked really neat when he wrote it but I don't like the results I'm getting. There seems to be too much of everything.

    Yes, I think you're right. Having so many utilities is probably good for something bigger and I should cut down on them. Thank you very much once again!

    Thank you and have a great day!

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 2 years ago

    @ania221B

    Thanks, and you too! ☀️

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord