Single price grid component

Community feedback

• 

  Natalie Clamp•230

  @NatClampPosted over 4 years ago

  Wow - bang on! Really well done! I like your use of variables and mixins. How did you manage to get your margins & padding so accurate, did you get the sketch file?

  2

  ---

  

  Douglas Varollo•470

  @DouglasVarolloPosted over 4 years ago

  @NatClamp I am very grateful for the comment. I used only the files in the design folder and imported them into a program to get a sense of the measurements

  An example: https://i.imgur.com/FsDuIK4.png

  1

  

  Natalie Clamp•230

  @NatClampPosted over 4 years ago

  @DouglasVarollo oh cool, thanks for the advice :)

  1
• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  Awesome work on this challenge, Douglas! You've done a really good job matching your solution up to the design, and it scales down well to mobile.

  The one recommendation I'd have on how to improve it would be to be careful not to overuse nesting in Sass. You're nesting your selectors very often, which is generating extremely high specificity selectors in your CSS. For example, this selector: main div.pricing div.pricing-content div.pricing-subscription div p.price strong could just be .price strong.

  As a rule of thumb, I try not to nest more than 4 levels deep in Sass. It's an awesome feature, but it can cause issues when overused.

  I hope this helps. Keep up the awesome work! 👍

  1

  ---

  

  Douglas Varollo•470

  @DouglasVarolloPosted over 4 years ago

  @mattstuddert I started exploring SASS this week, so I'm still learning. Thank you very much for the tips!

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  @DouglasVarollo you're welcome! It's awesome and really powerful. I'm sure you'll love it!

  1