Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Landing Page built with SCSS & Bulma (CSS Framework)

Bonreyβ€’ 1,130

@Bonrey

Desktop design screenshot for the Clipboard landing page coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello, folks! πŸŽ‰

Once again, I decided to try out something new, and this time my choice was another CSS framework β€” Bulma.

At first, this tool seemed very useful to me. There was nothing complex and it helped me add basic styles in no time. However, as I went on with the project, I needed my site to be more responsive and some of the predefined classes didn't suit my needs. That's why I ended up writing lots of @media queries and other styles.

Anyway, I enjoyed working with Bulma way more than with Bootstrap, especially, when it came to responsiveness. I think it has something to do with its simplicity. However, if someone asked me whether I'd prefer writing my own styles or using one of the CSS frameworks mentioned above, I'd most likely go for the former.

I'll probably try out a couple more CSS frameworks before making up my mind, though 😁

Community feedback

P
ApplePieGiraffeβ€’ 30,545

@ApplePieGiraffe

Posted

Hey, Bonrey! πŸ‘‹

Just wanted to drop into say well done, once again, on another challenge! πŸ‘ Everything's looking pretty on point! πŸ‘Œ (I like the custom favicons you've been adding to your solutions, BTW.) πŸ˜€

I also think it's interesting to hear your thoughts on CSS frameworks (since I mentioned I haven't really tried them out very much, yet) compared to good ol` regular CSS. If you're up for it, keep on trying new things (as you mentioned), and I'll be looking forward to hearing about your experiences with them! πŸ˜…

As always, keep coding (and happy coding, too)! 😁

1

Bonreyβ€’ 1,130

@Bonrey

Posted

@ApplePieGiraffe thanks a lot, as always! πŸ˜ƒ

Yeah, I'm up for two other frameworks: tailwindcss and Foundation. I'm curious if they're so different from Bulma and Bootstrap. As always, I'll post my experience here. πŸ˜‰

And happy coding to you, too! πŸ˜„

0
Roc Tanweerβ€’ 2,500

@RocTanweer

Posted

Another great πŸ‘Œ project from you @Bonrey

You worked quite a lot on this project as it seems...

I would like you say something, may I?

  • You are the second one I saw using placeholder classes, I am really happy..! You are quite interested in SCSS
  • Why not using a mixin for all those media queries... DRY should be followed, no?
// conversion from pixel to rem
@function rem($var) {
    $result : $var / 16;
    @return $result * 1rem
};

// responsiveness 
$breakPoints : (
    'extraSmall' : rem(320),
    'small' : rem(375),
    'large' : rem(768),
    'tab' : rem(1024),
);

@mixin responsive($size) {
    $breakPoint : map-get($breakPoints, $size);

    @media screen and (max-width : $breakPoint){
        @content
    }
}
  • I would suggest learn dart-sass and use scss modules and stop using import as the higher developer are suggesting because import will be deprecated see this article

  • I see people using css framework but I don't know why but it doesn't feel important to me...any suggestions?

Hope these helps you and happy coding πŸ˜‰

1

Bonreyβ€’ 1,130

@Bonrey

Posted

@RocTanweer thanks a lot for your feedback! 😊 I myself thought about learning dart-sass, since it has so many cool features.

As for the CSS frameworks, it's just another thing I wanted to try, since everyone's raving about them nowadays. Anyway, I can't say they're very useful in terms of basic CSS styles. However, they may come in handy when you need a certain component (e.g., a toggle switch, or a search bar) and you don't want to create it from scratch using plain css.

1
Roc Tanweerβ€’ 2,500

@RocTanweer

Posted

@Bonrey I am looking forward to see how you would use css framework then maybe I'll start working with them 😁

1
Bonreyβ€’ 1,130

@Bonrey

Posted

@RocTanweer I'm currently working on a project using dart-sass, as you suggested. Then, I'll switch back to the frameworks πŸ˜‰

1

Please log in to post a comment

Log in with GitHub
Discord logo

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