Carding with SCSS

Community feedback

• 

  Dylan de Bruijn•3,230

  @DylandeBruijnPosted 5 months ago

  Hi @AdityaDwiNugroho,

  Good job on this component, it's pretty close to the design!

  A couple tips:

  • Even though the box-shadow you used is nice, you could make the component look more like the design by getting the box-shadow from the Figma file.

  • You don't need all this code:

  $breakpoint-tiny: 380px;
  $breakpoint-small: 480px;
  $breakpoint-medium: 768px;
  $breakpoint-large: 1024px;
  
  @mixin respond-to($breakpoint) {
      @if $breakpoint == tiny {
          @media (max-width: $breakpoint-tiny) { @content; }
      } @else if $breakpoint == small {
          @media (max-width: $breakpoint-small) { @content; }
      } @else if $breakpoint == medium {
          @media (max-width: $breakpoint-medium) { @content; }
      } @else if $breakpoint == large {
          @media (max-width: $breakpoint-large) { @content; }
      }
  }
  

  The component only needs to look good on two screen sizes.

  • You could try breaking up your SCSS in multiple SCSS files. Relevant documentation.

  • Try to not use absolute values too much like here:

  width: 320px;
  height: 497px;
  

  If you set the width and height of the card in pixels like this and you would add more content to the card you would run into overflow issues. It's always good to leave either width or height as auto so the content can still flow.

  Let me know if you would like more feedback or if you have any questions.

  Marked as helpful

  0

  ---

  

  ADNWeb•50

  @AdityaDwiNugrohoPosted 5 months ago

  @DylandeBruijn Thanks a lot for your feedback and suggestions! 🙌. I'll make adjustments based on your suggestions 😊

  1