Design comparison
Community feedback
- @jguleserianPosted almost 2 years ago
Musicalaudio,
I loved the organization of your HTML, in fact, I organized my in a similar way. I noticed from your screenshot that the overall styling does not match up with the model, so I dived into both of your CSS stylesheets. I also took a look at your README file, but it was still in its template form.
Looking at your reset CSS, I noted that it was very thorough, in fact, it defined a lot of things that were superfluous for this project. I guessed that the stylesheet is a standard template you use or borrowed from somewhere else. I admit that many of those settings are foreign to me, so in my observations below, keep in mind that I may have missed or misunderstood something in either of your 2 stylesheets.
- I saw some properties, such as "place-content," that I did not know were CSS properties or used with CSS grid.
- I noticed that you set the <main> to display as a grid, but no further delineation as to what would regulate the height or width, either in the definition of columns/rows, not in the individual items. I suspect this is what left the container dimensions to form to the content and not the content conforming to the container dimensions.
- I couldn't see a global reset of your "rem," so I assumed that you kept it to the standard 16px and created two variables to deal with the two font sizes: var(--fs-base) and var(--fs-h2). While this worked for the fonts, it still seems like it would be more difficult for the rest of the measurements, like for padding, margins, gaps, etc. I wonder if resetting the rem to, say, 10px, in the <html> or <body> would make all measurements standard and easier to calculate throughout.
- I didn't see the font on the button change to color of the background during the hover effect.
- I liked the way you tried so many things, such as the easing in/out during the hover transitions and the systematic and thorough way you created the variables.
- Your html was easy to understand and had effective structure.
Anyway, keep up the good work. I don't know if my comments are helpful or not, or if they even understood some of what you did, so take the ones that help and discard the ones that don't. Thanks for posting your solution and letting me take a look.
Happy new year!
1@MusicalaudioPosted almost 2 years agoHey @jguleserian, thanks for the feedback.
1 - "display: grid" with "place-content: center" is a common way of centering an element. It's less verbose than using flex, align-items and justify-content all together and I find that even though it's more verbose than "margin:auto" it's more explicit and descriptive since "place-content: center" pretty much tells whoever is reading it that the content is being centered.
2 - Again, grid was mainly being used here to center the element, the size of the row/column by default is auto. You're right, this makes the element size conform more to the size of the content rather than the content conforming to the container dimensions, though I did intend to set a max-width on the containers which I had forgotten to do, so thanks, I've added them now.
3 - As for not resetting the font-size in the root, I used to reset it it be 62.5% in the html element to make it easier to work with, but a had received feedback that this was bad for accessibility and was linked to a thread (which I'll link below this comment) that discussed the issue. https://www.frontendmentor.io/solutions/html-and-sass-mobile-first-and-bem-bFoDUbvML#comment-6116f0eb4d906848d246ce26
4 - I had a background-color of transparent on the hover selector. I'm not sure if this had been pushed after you left the comment, but it was there when I had last checked.
Again, thanks for the feedback, I hope this made some of my decisions more understandable.
1 - @jguleserianPosted almost 2 years ago
@Musicalaudio Thanks for the follow up! It's dialogues like this that help me learn so thanks for giving me your rationale. I find it interesting that, after giving you this feedback, someone also critiqued me on using the font-size reset (62.5% rule). I was concerned because in one of my courses, this was seen as a common or best practice. I was given a couple of sources to look at, including the one you supplied. Anyway, I did some research on my own and found that the critique of this rule, like many things, also has its own critics. What I found out was that if done correctly, most, if not all of the objections disappear, and one receives all the benefits of the rule (easier to read and write the code with less wacky conversions) without the detriments. Here is how the rule could be done to avoid issues:
- Set the font size to 62.5% in the <html>, then...
- Set the font size to back to 1.6rem in the <body>
What results is:
- standard font size returns to 16px and finicky plug-ins, etc. still function properly
- the initial html content (before you style it) looks like it would have if you didn't use the rule
- any time you deviate from the default, eight er size a container, img, etc., you can use the easy (and understandable) conversion with rem
- the unit "em" will also remain consistent as it did before However, the only objection that I can see that is insurmountable is that if you are working on a team and that team does not use this rule, then you would have to adapt. However, I really don't see this as an issue since the reverse would also be true, i.e., that you have to adapt the other way if they DID use the rule. I'm still a neophyte, so I don't really know the industry that well, so if you get any additional insight or have any other thoughts, I would love to hear them. Meanwhile, I will probably continue to use the rule for now and see if I run into any problems. If so, I will be sure to post something. Happy coding, my Friend! Thanks again for the response. Jeff
0@VCaramesPosted almost 2 years ago@jguleserian
What are the benefits of using
font-size: 62.5%;?0@jguleserianPosted almost 2 years ago@vcarames
It resets rem to a standard of 10px (instead of the default 16px) and em remains contextual. Later, as you adjust font-sizes or if you are trying to size an object, such as an image, the conversions of the new sizes to a unit that is more conducive to responsiveness is easy. It is also much easier to read/interpret when you go back to review the code.
For example, if I need the width of an image to be 300px, if I've reset the font-size in the
<html>to be 62.5%, then I can put the width of the image to 30rem. If I had left the default root font-size at 16px, then I would need my calculator to figure out that the size needs to be 18.75 rem.The same is true with a font size, say, of 15px or 20px. If I want to use rem to make my font sizes more responsive using the 62.5% rule, then I would simply set the font size to be 1.5rem or 2rem respectively. Under the default method, I would need to stop for a calculator (either to write the code or read and interpret it) to convert 15px or 20px to rem, and the result would be equally difficult to understand for a reader of the code: .9375 rem and 1.25rem respectively.
Anyway, I know this method is not without controversy, but this is the main superficial benefit.
I hope this helps answer your question.
Jeff
0@VCaramesPosted almost 2 years ago@jguleserian
Thank you for your response.
I see a lot of new web developers, using this technique and I just wanted to know your reason was behind using it.
Using this method simply because of the need of a calculator 9or needed it to do calculations) doesn’t seem like a strong enough reason, especially when your code editor has an arsenal of tools that are free to use (That’s just one of the reason why it is now considered outdated).
You can make the
rem/emtopx(and vice-versa) conversion easier by simply downloading an extension for your code editor without having to touch theroot font-size.0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord