Skip to content
Submitted 4 months ago

Blog preview card using Vue

Micha Huhn•200
@MichaHuhn
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I learned how to navigate through the Figma mockup.

What specific areas of your project would you like help with?

I implemented the typography design system like this to reuse the presets given in the style guide:

%typography-text-preset-1 {
  font-family: 'Figtree', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.5;
}

.blog-title {
  @extend %typography-text-preset-1;
}

Do you think that's a good approach or is there a better one?

I'm using so called "SCSS placeholders".

Community feedback

  • MikDra1•6,980
    @MikDra1Posted 3 months ago

    @MichaHuhn

    If you use this styling on most of the elements the best thing to do would be to just rely on inheritance. But if you have this styles specific for only 4-5 elements in you whole design then I think your approach is the best.

    Good job and keep going 😁😊😉

    Marked as helpful
    0
  • Franci Melink•400
    @francimelinkPosted 4 months ago

    Although I don't have experience with Vue JS yet, I can only commend this solution. Regarding best practices, I cannot assess if everything is perfect. However, as far as the HTML code and styles are concerned, I can say, "Good job."

    The HTML is well-structured, the elements are semantic, and the class names for each element are clearly indicative of their purpose.

    According to the "Design comparison," it is pixel perfect. As for accessibility, everything is fine.

    This is definitely a good solution. It's an exemplary reference for me in many aspects.

    Best regards,

    Franci

    Marked as helpful
    0
    Micha Huhn•200
    @MichaHuhnPosted 4 months ago

    @francimelink Thank you!

    0

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