Submitted about 4 years ago

Landing Page built with SCSS & Bulma (CSS Framework)

Bonrey•1,130

@Bonrey

A solution to the Clipboard landing page challenge

Preview Code

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 😁

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

ApplePieGiraffe•30,525
@ApplePieGiraffe
Posted about 4 years ago
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)! 😁
Roc Tanweer•2,500
@RocTanweer
Posted about 4 years ago
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 😉

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