Starting a new project is fun, starting a new project with the best/new technology available is even more exciting.  There are many popular UI/Responsive frameworks available. The top two at this this time are Twitter’s Bootstrap and Zurb’s Foundation. Each of these frameworks are on multiple revisions and are used heavily on the web.

Bootstrap

I have used bootstrap for quite a few projects, it’s a great framework with a HUGE community.  Bootstrap does a phenomenal job of including as many ui elements styled to match seamlessly with each other and themes abound all over the web. The way bootstrap handles it’s grid system is familiar and easy, but I am not a fan of how it handles the responsive resizing of grids and elements. Bootstraps approach to responsive columns is to add media queries to handle smaller screen sizes. While this works, and most people won’t notice, it does add additional overhead and load for mobile devices.

Another factor for me looking into another alternative to bootstrap is the fact that bootstrap sites look and behave like bootstrap. 95% of the site that use bootstrap are easily identifiable as bootstrap.  Check out the bootstrap sponsored expo gallery to see what I mean.

Don’t get me wrong, I am not saying anything negative about the above sites. These sites all have good design, and they are well done.

It’s the feel of the menus and interactions are all very much the same.

Of course you can modify bootstrap using {less} and create your own look and feel, but unless you are willing to spend countless hours digging into each and every corner of the framework it’s still gonna feel like bootstrap.

Foundation

Zurbs foundation, as the name implies is to give you a foundation to build on top of. it’s an awesome foundation that gives you many of teh tools and helpers you will need while keeping as much as possible out of the design.

Foundation also is mobile first, the exact opposite of Bootstrap. Media queries are added to your css as the viewport increases in size.  This is fantastic for mobile devices and pushes development down the correct paths.

To boot, foundation also uses my preferred pre-processor, SASS.

I have used Foundation on projects in the past, and loved it. The downfall is the amount of time it takes to really make the css and interactions sparkle. As a sole developer, I don’t have the time to included the visual niceties i want my web applications/sites to have.

Semantic-UI

The newbie on the block, Semantic-UI is still in beta and has not released their 1.0 version. Semantic UI is a solid mix between the 2 previously mentioned frameworks.

Built on SASS – Semantic UI uses memorable naming conventions for classes, is tag agnostic, and feels buttery smooth.

This will be my first foray into Semantic UI and I will be posting my progress with the library as it evolves and as my project progresses.