Dynamic Blox

A Web Design Resourse

Breadcrumb Section

The Transition

July, 22, 2014 | Articles,The Curve

It’s been close to a year since the transition to the responsive Lemonade grid framework. I took a liking to it from day one. I even made modifications to it that mirror features in Bootstrap and Foundation. My biggest issue with it is the amount of time I have to invest in each project. After all, it’s just a grid system nothing less, nothing more. Due to that reason alone, I have decided to move on. For the past week I have done some research on Foundation. I am already familiar with Bootstrap, but I will revisit the docs page again and real soon. The third option is HTML Kickstart; I used portions of this framework in the past, but not the entire package due to its limitations. I’ve also used portions of Bootstrap as well and recently started a new project with Foundation. Maintaining complete control over the appearance of a layout is very important to any frontend developer. Some of these frameworks can pose a serious challenge to your presentation if you are not up for finding resolutions and troubleshooting.

Main Navigation Menu

The main navigation menu is usually the most difficult part, when you are developing a theme for any content management system. The source of this issue comes from the classes that are injected in the markup by the CMS. I always roll my own navigation, which will work on just about anything I theme for. Using Bootstrap, Foundation and even HTML Kickstart presented issues that have diverted my time and energy. None of these issues are impossible sets of problems. Honestly it’s all about preference, and I prefer not to search the web for answers or spend time finding a resolution for something as trivial as a responsive navigation menu. This is the one THING that has kept me from fully committing to any of these frameworks. Keep in mind that when you write your own navigation system, you intend to keep it as lean as possible. Especially if you are adding multiple sub menus. In doing so, no matter how many classes are added by the CMS, your menu will not break. Bootstrap and Foundation add multiple classes on all levels in the navigation system that requires you roll up your sleeves and start digging into code that you really don’t want to bother with. HTML Kickstar isn’t as complicated, but it has some issues that has to be addressed as well. I am sure you can find fixes for these problems or if you are diligent enough you can solve them on your own. As I mentioned before, this is something I would prefer to avoid completely.

Excessive Markup

The other issue is the sheer amount of markup you have to write. Back in the day, when XHTML was the markup of preference, a lot of guys that I worked with had what we called “div-itis”. It’s a condition that derives from adding excessive div tags in your markup just for the sake of writing. I completely understand the reason for the excessive markup, “the stew is already cooked, all you have to do is warm it up and add seasoning”. In other words, the excess markup is to relieve you of any menial CSS writing. Foundation tends to be slightly leaner than Bootstrap and HTML Kickstart has them both beat in that category. This isn’t really an issue if you are developing static sites. It can become an issue for a complicated project that requires heavy backend and client-side coding.


Bootstrap and Foundation are very similar. Comparing the two is like matching up WordPress and Drupal. One team boost their popularity and following through inclusion. The other team prefer to build their reputation through exclusion. I am sure you can figure out the subliminal message. HTML Kickstart is perhaps the easiest one to use out of the three. It is less intimidating because it is leaner than the other two (Bootstrap and Foundation). The grid system for HTML Kickstart is very basic, but works, as you would expect it. As far as I can tell at the present, I have not come across anything documentation for a CSS preprocessor in the Kicksart project. The addition of Less and Sass would definitely add value to the brand along with a better responsive horizontal navigation menu. Bootstrap without a doubt is the 400 pound Gorilla in the room. I like to think it’s more popular because it present less of a challenge to new users and Designers prefer it. Foundation tends to be more trendy with the hard core geek types. The little blurb about it using Compass (Sass), which requires that you have Ruby installed might turn some folks away. Truthfully, it’s just as easy as Bootstrap and even share similar issues like responsive videos and so forth…


At some point during this week, I will decide on which framework to start using exclusively. I am hoping to get some feedback on this issue before I take the plunge.