Jumpstarting Web Design Using Bootstrap
Looking for ways to improve my web site’s look, I turned to frameworks for help.
I’m feeling pretty good about the structure I want for my web site. Plugging away on my test site, I’ve updated my old blogging script to present unique titles with modern slugs, improved categories and decent paging. In the backend I have page redirects working to reduce duplication, added stub 404 pages to prevent caching of bad links, and turned on decent logging to track errors. Yet, the look is still circa 2006. It may be flat, but it isn’t responsive and needs an update.
I’ve tried other systems, starred in my Github account, but when I ran across a tutorial for Bootstrap at w3schools.com I got excited. One of the benefits of using Bootstrap is to build a responsive web design. Bootstraps grid system, mobile first design seems to work well. But there is more.
The first thing that caught my eye was the typography. Since I present a lot of code on my ZX81 blog, I often use the deprecated
<tt> element. Bootstrap instead provides stylized HTML elements like
<pre>. They look great and I don’t have to add my own CSS. I almost went with W3.CSS, but this feature alone was winning me over.
Another thing I like was the navigation features. The original navigation on my site is old and, like the rest of my site, doesn’t work well with mobile. Looking for a quick fix, Bootstrap let’s me take my existing navigation list and build a clean look with only a few classes. Loving it. I just wish I'd discovered Bootstrap years ago.
Digging in I spent about two hours last night just hacking at my theme and trying out Bootstrap features. I still have a lot of work to do, but I have a better appreciation of what Bootstrap does, and what it doesn’t. You still have to style your site. Although my site is looking better, there is more to do—adding better margins, larger fonts, etc.
One other advantage I’ve learned since landing on Bootstrap is that others develop for it. I did a quick search and found various themes developed around it. Start Bootstrap, for example, has prebuilt templates that look pretty good. Hoping they help get me past some of those design elements I still need to work on, I've grabbed a couple. Although I’m more of a do it yourself kind of developer, these templates are useful and look great. Plus, if you just need a template there are premium ones as well.
Got other ideas? Something better? Let me know!