Tag Archives: MVC

Twitter Boostrap

One thing I love about the open web is the multitude of tools available to you in order to build web sites and applications quickly and to a very high standard. Over the past few years frameworks and libraries have sprung into existence all aimed at a particular problem domain. Back in the day when these libraries weren’t available throwing together a site, with a content management system, that worked across all browsers, and was very robust, was no small task. Thankfully this has become a lot easier. You have MVC frameworks such as CakePHP that take the heavy lifting out of building the backend, you have JavaScript frameworks such as jQuery that abstract out all of the browser quirks between JavaScript engines and make animation and DOM manipulation a breeze, and finally you have CSS frameworks such as 960 grid which make it much easier to do complex layouts.

I utilise a lot of these frameworks, and the examples mentioned above are just one of the many available. One area of framework which I often would like to use is a UI framework for building interfaces. There is jQuery UI which is a very comprehensive framework but having looked at it I find it a little too bloated.

Another such framework which I recently became aware of was Twitter Bootstrap. This is an interface library which provides common markup patterns with associated CSS and a bit of JavaScript to build lovely cross browser user interfaces. The framework isn’t really suitable for public facing websites but is absolutely ideal as an interface to a CMS.

There are plenty of widgets available which makes it easy and quick to develop a consistent set of forms and tables to display and manipulate your data. There are buttons, tabs, menus, messages and even a handy grid system for your complete UI. I have used it recently on a big CMS build and the results were excellent.

There are a few missing widgets which I would particularly like such as a date picker, but these aren’t too hard to plugin from elsewhere. Also there is a robust roadmap for the framework so I expect things like this to be developed soon.

The CMS I built was based on CakePHP which has a number of in-built helpers which make it quick and simple to build forms. Integrating Twitter Bootstrap with CakePHP wasn’t that hard a task but it doesn’t work out of the box. The markup patterns for the helper and bootstrap weren’t compatible. Fortunately the helpers on CakePHP can be highly customised, its not easy but also not a big task.

I aim to release a plugin helper which will make this a lot easier. It will replace the FormHelper and provides some extra methods to output of UI elements. I’ve been very busy recently so haven’t had chance to write it yet, but look out for it soon on github.