Submitted 11 months ago

Blog preview card using Vue

sass/scss, vue, accessibility

Micha Huhn•200

@MichaHuhn

A solution to the Blog preview card challenge

Preview Code

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".

Code

Please log in to post a comment

Community feedback

P
MikDra1•7,450
@MikDra1
Posted 10 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
P
Franci Melink•400
@francimelink
Posted 11 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

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