Fylo component using Sass & flexbox - Desktop first

Community feedback

• 

  Dorian Alvarado•240

  @Dorian30

  Posted almost 5 years ago

  Really interesting Jen! I like this solution. I came here, after you submitted your feedback on my solution. I really liked yours! After reading your feedback I thought I could come and learn some things. From my side I have only a few quick notes.

  I would suggest to use more semantic tags for your HTML. Also, for illustrative images like the wave below the page I think it is better to use pseudo elements ::after or ::before and avoid making your HTML more verbose.

  On a side note, I would like to ask you why choosing rem as your first option. I really like how you kept consistency and only used rem, but why choosing that above the others ?

  Also, I saw that in your HTML you wrote font-size: 67% (or some value near that one, I don't remember), but different browsers can have different font sizes. Here I think we are assuming we will have 16px across every browser, or was this intentional ? In that case, what are the reasons for doing that ? Isn't it better to sent a default font size to reset browsers fonts ?

  Looking forward to your answer!

  23
• 

  Freddy Munive•170

  @fmunives

  Posted almost 5 years ago

  Hi Jen,

  You had a great job and your styles are very ordered. You're using BEM, that's a good methodologie to work.

  The unique recomendation when you declared transition: all .3s; and later you give the &:hover { border: 1px solid $color-file-icon; }

  For performance it's better to be more specific with the value because all applies for all properties and you just need to apply border property.

  You can check your code in 38 line https://github.com/En-Jen/fm-fylo-data-storage-component/blob/master/sass/components/_files.scss

  21
• 

  

  Matt Studdert•13,611

  @mattstuddert

  Posted almost 5 years ago

  Hey Jen, I've only just come across this solution. I don't have much to add beyond the great tips that have already been given. So I'll just say, amazing work! Your solution looks great and scales down really well to mobile.

  You mentioned in the title that you went desktop first. Is that a personal preference? Even if you didn't work mobile-first I'd still recommend using min-width media queries. It can often lead to less CSS code and has the benefit of loading in fewer styles for mobile users, which can be a nice performance gain.

  Keep up the awesome work! 👍

  12