Revisiting CSS

I write this for my own sanity.

I’m building the visual side of the website for my Nepali friends. I know how I want it to look, but getting it to look that way is the problem. Layouts in CSS2 were a nightmare, and although CSS3 has done much to remedy these problems, the new styles are only patchwork to fix a broken monster. But I’m making my way through.

I have a left-hand navigation. I want it to layer vertically. I have a right-hand content space. When both are <div>s, they layer vertically, when I want them to be side-by-side, left-by-right. What’s was going on? <div> elements have a default display of block, so they push everything else in their container below. The solution? Make each display: inline and float both left so they are side-by-side.

I use <ul> tags with <li>, <a>, and <span> tags inside. I use the spans for Bootstrap glyphicons. But the hover was not working on my <a> tags. What’s was going on? <a> elements display inline by default, meaning they make room for everything around them. Hence why the a:hover background-color was only affecting the text. The solution? Make the <a> elements display: block. I had to adjust some margins and paddings, but it worked out.

Oh my gosh! It’s brutal. I know flex-box can do some of this, but it is not recommended for the layout portion of web pages. But it’s starting to look pretty good! I’m pretty happy with my layout plans. I’ll get back to learning ADO as soon as I have something decent to show them. It’s been four months now, it’s always a good idea to give the “client” something tangible to demonstrate progress. It also means I’m learning more about CSS, and that’s is always good.

Falling Behind

I used to be a CSS master back in the CSS2 days. Granted, I was not a webdesign master by any means, I simply had a strong knack for whitespace, layout, and colors. As time has gone on, I have read about CSS3 and even realized that my understanding of the positioning system had been wrong (master status revoked!), but I keep forgetting new features and keep stumbled into new ones. Not going to lie, it really frustrates me. The downside to all this programming and markup is that you really never master anything. You can only strive to be highly proficient, and even then Google is your friend.

I have been beefing up my Bootstrap skills because I’ve done quite a bit of on-the-job work with Bootstrap, but I haven’t really built anything from the ground up. Going from the basic grid structure, I built out a few “row”s and needed to style everything starting with “col” so I wouldn’t need to type out every possibility (col-md-1, col-md-2, etc). I stumbled across a new CSS feature on Stack Overflow and was able to apply the following to get what I wanted:

div[class^=”col-“] {
border: 1px solid #000;
}

Since when did regular expressions get absorbed into CSS? And why that kind of syntax? Shouldn’t you just be matching an attribute value with an attribute itself, not the actual string that sets the value of the attribute?

Looks like I have a lot to learn, but at least I’m also learning how to override Bootstrap classes so I can avoid building a cookie-cutter website. Sure, that’s what my previous company did with a few different colors and our client loved it, but most of the time it shouts “lazy” from the rooftops. Lazy is good for a throw-away test, not a unique identity.