Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 4 years ago

3-column-card component with SASS using the SMACSS methodology

Said Alejandro Rosas Vera•145
@said-alrove
A solution to the 3-column preview card component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Hi!, what's up? I had already made this challenge a few weeks ago, but I started to remade my projects (including the Frontend Mentor challenges) trying to apply new things I've learned, such as SASS (I had already known SASS, but just recently I finished of reading the documentation and practicing with it, so just now I feel confident enough to build projects with SASS).

I have to add that I used my own kinda library with mixins for SASS, such as mixins for media queries, Flexbox, and Grid.

Also, something important to mention is that I used the SMACSS methodology for structuring this project. I've already used this methodology a couple of times, but I'm still in the process of mastering it.

Feedback is always appreciated :D.

P.D. Likewise I've implemented the use of logical properties such as inline-size (width), and block-size (height) due to nowadays there's already enough browser support for them.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Said Alejandro Rosas Vera's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License