A Visit to Bootstrap Headquarters

On August 1, the Joomla! project flew Andrea Tarr of the Production Leadership Team from Massachussetts to San Francisco to take part in a Bootstrap accessibility coding session. Why? Because Bootstrap is becoming part of Joomla, and Joomla cares about accessibility. In this interview Andrea describes that experience and what it means for Joomla 3.0.

What is Bootstrap and why is it so important for Joomla 3.0?

Bootstrap is an Open Source project, and is kept on Github just like the Joomla CMS and Platform. It is a framework containing different UI elements, a combination of CSS and javascript, almost like a style sheet that has all different kinds of elements and interactions.

Joomla had a problem that they were trying to solve, and the solution was Bootstrap. A Joomla website looks great when you make or purchase a club template, but when you start adding in third-party components that can change. Those components may use elements not included in the UI of the Joomla core.

When third-party developers come along they have to add CSS and markup to achieve a desired effect. Another developer who has the same issues will come up with another solution. Templates don’t necessarily handle this, although some template clubs create templates to work with specific components (K2, Kunena, etc.), to keep a consistent look when jumping from component to component.

Until now, a third-party developer would look to the Joomla core to create something that would work well. But with Bootstrap developers can find all the elements they need: dropdowns, tabs, etc., in one place. So even if Joomla doesn’t use an element for one of it’s core components, developers can find it, and they will all be doing that same thing the same way. When a template club makes a template it will only have to code a particular thing once, and it will work across all components.

We have taken the bootstrap idea and brought it into Joomla as “JUI”, and have added some things to it that are Joomla-specific.

Where is Bootstrap located and how did your visit with them come about?

Bootstrap is part of Twitter, located in the brand new Twitter headquarters in San Francisco.

We have a couple of issues with Bootstrap that make it not absolutely perfect for our needs. Despite its many benefits, Bootstrap hasn’t worked with languages as much as we have in Joomla. Things like the length of words and reading right-to-left aren’t all there. We can take care of some of these items ourselves, and in addition, changes are happening at Bootstrap to make it better.

Like many projects starting out, accessibility tends to get ignored and added later on. That’s where Bootstrap is right now, and they are working to improve in this area. It has some accessibility features, but is not nearly as far along as Joomla where long strides have been made over the course of its history for people with disabilities. We didn’t want to take a step backwards in going with Bootstrap.

I had been doing some issue tracking in Bootstrap to help them identify the accessibility issues and see what needs to be done about them. Bootstrap decided to have a code sprint, and bring a group of people together who were interested in accessibility. The Joomla project flew me across the country to San Francisco to be a part of this group that included some people who I recognized as well as a big accessibility guy I had been following for a couple of years on Twitter. It was a good group - about a dozen of us all together.

By the time we met, Bootstrap had already gotten a lot of accessibility improvements into the code, and we spent the time getting in to that dev environment and setting things up to start contributing together. Not too much code came out of that one day meeting, but we are now prepared to do a lot more in the future.

Last week Bootstrap came out with version 2.1, which has a ton of new accessibility features.

Joomla’s accessibility requirements are high. In the 1.5 release we came out with frontend templates that were accessible. Hathor, an accessible admin template shipped with version 1.6 and has been included in every version since then. Now in addition to frontend viewing, people with disabilities can also create. Unfortunately, in 3.0 we will still be shipping with Hathor, since Isis (the new backend template) doesn’t yet meet the accessibility standard. We hope to get Isis in by 3.5.

Any closing thoughts on your Bootstrap adventure?

I think this experience really shows how serious Joomla is about accessibility.

And clearly, so are you Andy. Thank you for all your effort in this critical area!