Loopstudios page using BEM an Scss

Community feedback

• 

  Marzia Jalili•9,250

  @MarziaJalili

  Posted 4 months ago

  Amazing job!

  Some tiny areas you can amend:

  • To make the change of the links (adding the bottom border), you can use the transition property.

  transition: border 0.3s;
  

  This will make sure the border will be added after 300 milliseconds, which makes it look even better.

  • The same goes with the See All button:

  transition: background-color 0.5s, color 0.5s;
  

  • Also, after minimizing the screen and then going back to the desktop mode the hamburger button is still there if not maximized manually and just by click the maximize button of the browser.

  To fix that, completely remove it from the DOM for the larger screen sizes:

  @media (min-width: 750px) {
    .open-navbar-button {
       display: none;
    }
  }
  

  You have put your head down on it, GREAT JOB!

  😎😎😎

  12

  Marked as helpful
• 

  P

  Andrey•4,600

  @dar-ju

  Posted 4 months ago

  Hi SylvainPS78!

  Your work is great! Very close to the original. Hovers work well, mobile menu is great.

  SCSS

  I see you used SCSS, but you applied it not quite correctly - like regular css. BEM together with SCSS should give a tree structure. Let's take .card in your case and all elements of this component should be inside the tree.

  Here is an example of SCSS implementation:

  .card {
    max-width: 100%;
    padding:0 5vw;
    position: relative;
    &__img {
      max-width: 100%;
      min-width: 100%;
      height: auto;
      object-fit: cover;
    }
  }
  

  There is a main - .card and its components inside. The & - symbol replaces the parent name.

  BEM

  There are some errors in BEM. For example, .main__hero__img

  Imagine that there is a section that we can reuse somewhere else in the project, this is the first part of BEM - a block. A block consists of elements. A modifier is if there are similar elements, but differing in font color, background or something else.

  In this case, the block is hero, the img element, there is no modifier. Total: .hero__img.

  The next block is .card and so on...

  With the correct use of BEM and SCSS, your work will become easy and pleasant.

  Other

  • Before the release, always check the code in the validator, there are several errors that need to be fixed.
  • Keyboard accessibility works except for social media buttons. They also do not have a hover.

  Otherwise, everything is great, good luck with your development!

  01

  Marked as helpful