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.

AB Development Site Launch

Today sees the launch of my own site AB Development. It has officially been in development from start to finish for the last month on and off. Its nothing complicated and shouldn’t have taken me so long to develop but what I can say is that the site is mine, designed and built from the ground up.

Its certainly not the most creatively inspiring piece of work but its not meant to be, it is designed for function not to create an experience. I’ve been using, where appropriate, a lot of what I have been experimenting with over the past year in this blog. It is specifically built not to act the same in all browsers, I’m not interested in breaking my back making it look exactly the same in all browsers. I have used a lot of progressive enhancement to make it look better in browsers with better CSS support, but not look too bad in other browsers either.

What have I used?

  • A HTML5 doctype, the site isn’t necessarily HTML5 but I needed a doctype to trigger standards mode and the HTML5 doctype is as good as any.
  • Reset v2.0, recently released by Eric Meyer, again in keeping with the HTML5 doctype.
  • A grid system, more specifically I have used the 960 grid system as the basis for the design
  • CSS3 has been liberally applied to produced the alpha transparency effects, rounded corners and text shadows. Don’t have a browser which supports CSS3, well there are fallbacks in place for these browsers courtesy of CSS3 please!
  • JQuery has been used, with a few plugins for the menu, and scroll behaviour, and the also the form submits via AJAX.
  • Twitter feed uses the widget provided by twitter in their resource site, it was customised using CSS

I haven’t fully tested the site in all browsers, but have looked at it in IE6, 7 and 8. Unsurprisingly there were a number of bugs found and surprisingly they were easy to fix to the extent where the site was both functional and visually stable. There is probably more work to do here. Similarly I haven’t provided a fallback mechanism for the form as yet, so if you don’t have javascript enabled you can’t submit the form as yet. No doubt these little additions will be dealt with over time.

In the immortal words of Neil Crookes, abdevelopment.co.uk CHECK IT OUT!