I just spent way way too long trying to get my Bootstrap navbar to not be a giant ugly grey block.

And somehow I've set my website to shrink on mobile devices, so all that fussing over a hamburger menu... bloody pointless.

#growingpains

Haha, nice! Why is the about item struck through? (what do you even say when something has strike though????)

PS. Check out Bulma ;)

@ScriptCoded It's a reminder to set up the link, it doesn't go anywhere yet.

I'll have a look. Cheers!

For websites, both Bootstrap and Bulma are just crap which relies on presentational abuse of CSS in combination with ignorance how CSS works in the first place.

@ScriptCoded Aha! Not the brilliant scientist and second daughter of Capsule Corporation's founder Dr. Brief and his wife Panchy, the younger sister of Tights, and Goku's first friend. 😆

Is it much better than Bootstrap, thing is my instructor is using it... so, I'm stuck with it a little longer.

@Fast-Nop I felt like it was cheating, but I'm following a course. How'd you do it yourself?

@oSullivan For websites, as opposed to web apps, you have a basic document model. You know, with chapters, different heading levels, paragraphs, tables for tabular data and all that. Plus an unordered list of links for navigation.

And then you just style that with CSS, moving things around depending on how much space you have on the target device.

HTML says what things are, CSS how they shall look. Not too difficult.

With frameworks, you blow up the markup with tons of unnecessary divs, and just look at the class names thrown at everything - that's the markup describing how it looks instead of leveraging CSS selector chains.

Result: you have anywhere from three to ten times the markup you need, and you end up with hundreds of kB in totally useless CSS. That's also why you suddenly "need" CSS compilers.

Web apps may be different because they don't follow a document model and don't necessarily have a document sturcture.

@Fast-Nop I'm using plain SCSS in my new projects! I promise!

@ScriptCoded Not to forget plain WordPress of course.

@M1sf3t I think we switch to Bootstrap 4 later in the course, the argument was made that companies still use 3. I've had a few recommendations for Bulma now.

Will definitely try it for my own site. Thanks.

@Fast-Nop @ScriptCoded I think the instructor is building us up to make some web app that we're going to create.

Am thinking it sounds like learning to drive. Learn to pass the test, and when you've got your license you really learn to drive.

@oSullivan OK that may be a different use case. But not too much - presentational CSS is still often nonsense.

One tell-tale sign that should put you on alert are unordered lists (ul) where every list item (li) is receicing the same class. How about no? How about styling the containing ul instead and using the CSS selector chain?

Same for divs in divs in divs for no good reason. Divitis and classitis go hand in hand.

@M1sf3t Noted!

But, I don't wanna give up now. Even if I'm causing myself a headache later.

And I'd suggest that especially for learning, you first learn HTML and CSS without any framework at all. Otherwise, you end up learning but still don't know the basics.

Sure, if the course forces you to do so, you can't help it, but it's the wrong way, and you will likely learn the wrong things.

Doing the actual learning besides the course would be good, provided that your time allows for that.

@Fast-Nop Had to re-read that. And probably will again after a fresh cup of coffee. 👍

@Fast-Nop Right!! That I agree with. And that's what I'm trying to do.

In fact, I'm thinking of trying to recreate the navbar with CSS alone. Or would that be a bad idea at this point?

@oSullivan No, that's a very good idea! Your markup for that should not be more than a "ul" with your main navigation class, and most of the "li" should not have any dedicated class at all, and neither the links in these "li". That would be the goal.

The CSS then would have selector chains like this if your "ul" has the class "menu":

ul.menu li {...}
ul.menu a {...}

The only "li" that should get a class is the one with the link for the page you are currently on. Either for greying it out, or highlighting it.

I wouldn't bother with a drop-down menu at this point. Just a navbar with several items that you can directly click. Markup and CSS only, no JavaScript involved.

@M1sf3t Why not the trick with the hidden checkbox and CSS? That would eliminate the need for JS just for toggling display:none.

@Fast-Nop Brilliant! Thanks. First thing tomorrow I'll have a go.

@M1sf3t Yes, I agree. Besides, my own site is extracurricular. It's meant a place for extra practice. So, ultimately I can do whatever I think is best.

@Fast-Nop Piece of cake. Took me minutes. Didn't get the active link to work properly yet, so you cannot see which page you're currently on. But is looking good. Thanks for the help!

@oSullivan Great job! :-)