Navbar review

[grantsmith]

I was wondering if I could run my Navbar Boilerplate by the community. I've made this to be fairly flexible to adapt to different sites. And whilst I think the HTML seems pretty solid, the CSS feels a little verbose, in the spirit of becoming a better coder I wondered if the community agrees?

I've made a CodePen and hopefully, it's pretty self-explanatory. I'm not looking for people to rewrite my crappy code 😄, but would appreciate some opinions as to whether certain areas need more attention. Or whether you feel there is a better approach in certain areas.

https://codepen.io/grantsmith/pen/VwawxoB

Thanks in advance for any pointers

 

[Gummibeer]

The only thing I see is that you should add some accessibility attributes and styles. So style active, focus, outline and so on. And add screenreader text for the menu toggle and possibly some aria- attributes.

Except of this I haven't seen something that has to be changed.
You could only check for Tailwind CSS and Alpine JS to slim down your assets. 😉

 

[Adam]

Nice start!

+1 on the accessibility stuff as Gummibeer mentioned. Make sure when you have links in that it is fully accessible using a keyboard only with an appropriate label on both the logo and hamburger toggle. Ideally you'd use a button rather than a div for the toggle to be more semantic.

I would agree that the CSS could be trimmed of some fat. I'd normally opt for the simpler flexbox throughout rather than grid when working with a single axis like that. Is there a reason you chose it for laying out the link list?

These lines here are a bit confusing: $base-size: 1rem; $size-scale-500: $base-size * 1.33; .... If you want to create some rem sizes you don't need to calculate them, you could just set the :root font-size to 16px or whatever and then use $size-scale-500: 1.33rem;. I've not seen 'size-scale' used before like that so took me a second look to work out what it was doing. What does the 500 refer to?

 

[grantsmith]

Thanks for the replies.

accessibility attributes

Yes, good shout

style active, focus, outline

I'm purposely not adding these here as they change per site, but your absolutely right, they should be there

Tailwind CSS and Alpine JS to slim down your assets

Ha! Yes.

CSS could be trimmed of some fat

I actually went the other way in the end and removed flexbox in favour of grid and grid template areas. The menu feels simpler now, to me at least!

These lines here are a bit confusing

Those are linked to my CSS base variables and the help ensure consistent spacing. The numbers refer to the size of the space.

The updated menu below for anyone that is interested…

Navbar Boilerplate - JavaScript

...

codepen.io