Skip to content
Submitted 11 days ago

Custom CSS Library, used Flexbox and utility classes to style elements

Arsalan2078•50
@Arsalan2078
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 am most proud of being able to use my custom css library. This will very significantly quicken styling process and reduce setup.

What challenges did you encounter, and how did you overcome them?

I encountered issues with css specificity, speficially with my padding classes which were generated automatically.


    Learning

p-xs-100 is responsible for mobile screen size padding on all sides, while pt-xs-50 and pb-xs-50 added padding on top and bottom respectively. The latter two didn't override paddings set by p-xs-100 class, which was generated after the two.

I addressed the issue by creating two scss loops:

  • First generates universal margins and paddings
  • Second generates margins and paddings on one side at a time
What specific areas of your project would you like help with?

I am not particularily happy with my typography, and there are definitely more techniques and tips I could use to improve upon scss.

Community feedback

  • ErwiniaDev•40
    @ErwiniaDevPosted 11 days ago

    Hi, there, First of all, I'm sorry I'm such a beginner so my feedback won't necessarily be the best...

    Congrats for your project, it's near to the model!

    The only detail I found was the border-radius of the card (the model's is smaller than yours, 10px if I'm not being silly). However, I did find your border-radius: 0.625rem in your style.css (line 2675) but only for the image. It's 1.75rem (line 2671) for the card.

    I hope my feedback helps you in spite of everything. All the best!

    Marked as helpful
    1
    Arsalan2078•50
    @Arsalan2078Posted 11 days ago

    @ErwiniaDev I noticed that in Figma, mobile version of the card and desktop one have different border radii. I didn't account for that. Thank you for pointing that out, I'll be more careful!

    0
  • geomydas•1,440
    @geomydasPosted 11 days ago

    bro your library already exists. check out tailwindcss

    0
    Arsalan2078•50
    @Arsalan2078Posted 11 days ago

    @geomydas i used bootstrap and a bit of bulma before, but my hands never quite reached tailwind.css. Is it really so good as people say?

    0
    geomydas•1,440
    @geomydasPosted 11 days ago

    @Arsalan2078 yeah, its good. its the same thing as what you did like pb-xs-50

    0
    geomydas•1,440
    @geomydasPosted 11 days ago

    @Arsalan2078 yeah, its good. its the same thing as what you did like pb-xs-50

    0
    Arsalan2078•50
    @Arsalan2078Posted 9 days ago

    @geomydas but how would I use custom variables like colors, fonts, spacers, etc. It appears Tailwind does not appreciate being used together with Sass

    0
    geomydas•1,440
    @geomydasPosted 9 days ago

    @Arsalan2078 check their docs, tailwind isnt meant to be used with other css preprocessors.

    0
    geomydas•1,440
    @geomydasPosted 9 days ago

    @Arsalan2078 check their docs, tailwind isnt meant to be used with other css preprocessors.

    0
    geomydas•1,440
    @geomydasPosted 9 days ago

    @Arsalan2078 check their docs, tailwind isnt meant to be used with other css preprocessors.

    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