framework

When I first encountered CSS Frameworks, I was a little intrigued, but dismissed the whole notion because it looked overly complicated and the whole code structure was (at first) very difficult for me to grasp. Add that to the fact that the general concept of designing using a grid for some reason escaped me, and you can see why I rejected the whole idea. But bordom being what it is, I decided to one day do some experiments to see what all the commotion was about (by now, CSS Frameworks were gaining in popularity and many people used them). All I can say from the experience is that I was impressed! I tried a few frameworks out, among them Blueprint CSS, YUI Grids CSS, and YAML. The one that stuck with me, however was 960.gs. I was never before able to create basic layouts so rapidly. Adhering to the grid made everything look balanced and nicer, it seemed, and I was soon churning out designs left and right. It was a while before I realized, that using a framework imposed certain limits on how I created my websites. As I became more adept at web design and was aware of semantic naming conventions, it’s obvious that a framework cannot allow you to have HTML that actually has any meaning. Well, I guess you could add extra classes to add that semantic meaning that’s missing from frameworks, but that just adds more to your code.¬†You might as well add inline CSS styles to your HTML because essentially, that’s what you are doing. Also the bigger downside of using frameworks is...

Vertically Centered Text

So, as promised here is a quick web design tip that I discovered completely by accident the other day. As the title suggests, if you want to center a single line of text inside of a containing block that has a known height, all you have to do is set the line-height of the text to the height of the block. For example, if you have a header div with height 100px and want to vertically center an h1 tag inside that div, all you need to do is add the following rule to your css style sheet: h1 { line-height: 100px; } This is what it looks like in practice… Here is some text Pretty easy, right? Remember that this will only work if the text you are vertically centering does not wrap to more than one line. If it does the whole thing will break...