Mobile-first almost pixel-perfect solution with animations (HTML/SCSS)

Community feedback

• 

  CyrusKabir•1,885

  @CyrusKabirPosted over 2 years ago

  Hello my dear friend ♥ you did very good on this challenge and I think it's perfect pixel no almost and UI it's good and I just want say some sassy things 😁

  • it's good to use @mixins when there is some arguments, I notice that you used slideInFromLeftanimation for just defining animation configs for different elements but you can use PlaceHolders in sass and just for changing animation delay you can add them in their classes, also you can check this article if you want 8 sass tips
  • you can name your media queries for more readability with sass, I mean using just some numbers with relative units it's not descriptive, you can check this articles for more information about naming @media in sass @media in sass, naming @media

  Marked as helpful

  1

  ---

  

  Karol Binkowski•1,640

  @GrzywNPosted over 2 years ago

  @CyrusKabir Thank you a lot for sassy tips!

  I will definitely use placeholders more in my future projects. They are the great way to avoid bloating CSS with the same code. I improved my solution based on your recommendations and added something extra:

  • I replaced mixin slideInFromLeftanimation with a placeholder
  • I removed animation-delay mixin entirely and changed it to regular CSS code.
  • I created breakpoint variables and media query mixins. Based on that I changed how this SCSS was structured. (I removed media queries in the end entirely)

  And something extra:

  • I replaced primary color variables with a map and created all classes for each color of the card using @each loop.

  I probably should also change the structure of sass files, but I think it's not really worth it in a small project like this one. Also, about breakpoints and media queries - I'm currently using this file in my other project. I don't know if you've seen it, but it's amazing.

  Thanks again for everything! Have a nice day and happy coding ! :)

  1

  

  CyrusKabir•1,885

  @CyrusKabirPosted over 2 years ago

  @GrzywN your welcome, I am very glad it was helpful ☻ edit: @each and sass maps are awesome !

  1