Skip to content
Submitted almost 4 years ago

Mobile first practicing SMACSS/BEM hybrid with nested flex layout

Jeremy Ng•200
@lanechanger
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi everyone,

I've been reading about SMACSS, haven't read it all yet but was interested in the idea of separating out colors and fonts into a separate theme file so one can hypothetically swap out different themes a lot easier.

I also added a more vertical diamond formation kind of layout for the "tablet" viewport between mobile and desktop as I didn't like how squished all the cards were in the middle, but I also didn't like all the white space on the sides when it snapped to the mobile column layout too soon.

Thanks for checking it out!

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted almost 4 years ago

    Hi there, Jeremy Ng! 👋

    Nice to see you complete another challenge! 😀 Good work on this one! 👍 I like the tablet layout that you added to the page! 🙌

    The only small thing I might suggest is to add a max-width to the heading and the paragraph beneath it so that they still have a couple of line breaks and aren't too wide when the layout first changes from desktop to tablet (I think it looks a little nicer and is easier to read, that way). 😉

    Keep coding (and happy coding, too)! 😁

    1

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