Review of Roots WordPress Theme

May 18, 2011 | No comments

I recently had the pleasure of using the blank WordPress theme Roots for the first time. I was pleased with the experience, but I do have a few suggestions for how the theme could be improved:

Adjusting the nav bar width: Roots supports 960.gs, the grid-based CSS layout framework. For the most part this works quite well, with all elements adjusting to any width of box that you choose to put them in… except the main nav. The nav UL is set at 100% wide, so it renders at 960px. However, if you have left the right and left gutters out of your design, you’ll want a nav of 940px wide, which is achieved with the class .grid_12. However, since the nav UL is set to 100% and its parent nav#nav-main is not, you won’t get the nav bar down to 940px until you put a width of 100% on nav#nav-main as well.

Utility nav alignment: The utility nav (nav#nav-utility) has absolute positioning (top:0;right:0), but when its parent has a right margin, this does not affect the position of nav#nav-utility. Therefore you have to add the same width of the margin to the right value in the #nav-utility declaration (e.g. right:10px).

Height and width on logo image: The logo img tag has height and width values, which is generally not best practices. Very few logos will actually be those dimensions — 300×75, so if a developer forgets to delete the values in the HTML, the image will be distorted.

Leave a Reply