Yesterday, the Joomla Production Leadership Team decided on adding Twitter Bootstrap to the core of Joomla 3.0. Twitter Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, charts, navigation and other interface components, as well as optional JavaScript extensions.
This decision will have ramifications for the whole project. It will make it easier to style Joomla across the core and extensions, having a common styleset and markup. The framework is also used by other major website projects.
Ron Severdia wrote this yesterday:
After many long hours of grueling debate (not really), the PLT has decided to move forward with adding Bootstrap to Joomla 3.0. The work will require some changes to both JForm and JHTML to provide the most flexibility and not force anyone to just use the Bootstrap classes. It was agreed that we should avoid hardcoding classes and that could be done incrementally if more time is needed for implementation.
The only thing left to confirm using Bootstrap is to ensure the licensing is not an issue. The final determination on this will be made by OSM and FSF. If everything checks out on the legal end, we will move full steam ahead with the implementation.
The start
One week ago, Ron Severida posted in the Joomla UX forum, asking the participants to share their thoughts on what UI framework Joomla should base their work on.
The questions presented to the community were:
- Do you use a framework? Is so what is it?
- What are the top three things you look for/use in a framework?
- Have you used any of the above frameworks? What was your experience?
- Which frameworks do you recommend staying away from?
- If you had to choose one framework for Joomla, what would it be?
This sparked an 18-page conversation and discussion that culiminated in choosing Twitter Bootstrap as the framework to be used.
A common Joomla User Interface (JUI) framework
As far as I can understand it, Twitter Bootstrap will provide the basis for a common CSS and markup to be used by developers. This means developers can use a set of common user interface elements like buttons, dropdown menus, icons, tables, form elements and more. The markup used will be the same, regardsless of the component being part of the core or from another developer. Kyle Ledbetter wrote in the discussion:
I envision Bootstrap to be the cornerstone for the JUI, which is a centralized, core "SDK" for components with minimal styling and consistent, standardized HTML markup that can be a starting point for any component, frontend or backend output.
Mootools or jQuery?
The Mootools JS Library has been included in Joomla for a while. Still, a lot of extensions have been using jQuery instead. Twitter Bootstrap uses jQuery, so that means it needs to be included in the Joomla core. My guess is they will include a method of turning the Mootools / jQuery libraries on and off.
Another issue is jQuery. The PLT felt that even if there are legal hamstrings for Bootstrap, adding jQuery to Joomla 3.0 would be a good idea. It opens up a new world of JavaScript features and it would be great to implement MooTools and jQuery consistently in the core instead of having each developer do it their own way. This should lead to a more stable Joomla when using both. The next steps in this area are to establish a formal working group to take this on. More news to come...
What does it mean for you?
The main advantage of using a common user interface framework is that styling your site will be much easier. I think we have all experienced installing some module or component and have to spend time creating separate CSS to make it fit to our site design. Using a common markup, the styling will be immediately compatible.
Kyle Ledbetter said this in a recent blog post:
The grand vision is a standard set of User Interface (UI) elements that can be used on the frontend and backend, in the core and available for all community components. This is something Joomla has never had. Load any 3 major Joomla components (which about 99% of all Joomla sites do) and you get 3 entirely different UIs and User Experiences. This is because the core markup standards and system styles are so incredibly limited that the component developers had to innovate outside the core and create their own markup and UI standards.
The need for a common set of UI elements
He goes on to talk about what the needs of the developers are in terms of UI elements:
We need a minimally styled, centralized set of commonly used UI elements that will suit both the frontend and backend UIs for core and community components so they don't vere off the path (too far) and create a totally separate UI that requires tons of extra time to both learn and style.
Kyle Ledbetter's suggestion for the Joomla admin interface based on Twitter Bootstrap
Developers can contribute back
In the spirit of Joomla, the Joomla User Interface (JUI) based on Twitter Bootstrap can be expanded by the community developers:
When component developers are missing UI elements they can contribute back to the core JUI so all can share and so all can keep with the standard, in an every-expanding community set of best practices. We need these markup standards in every piece of Joomla, not just trying to use them from the outside via a template. Think of either the frontend or admin experience and UI for components like Community Builder, Kunena, Projectfork, JomSocial, Phoca Gallery, RedShop, Virtuemart. All completely separate markup practices and standards that all use similar UI elements on both the frontend and backend.
Making Joomla responsive
Responsive websites are getting more and more common and users demand that sites accomodate to the different tools they use to browse. A responsive Joomla site will resize to the screen it is presented on. Some templates are already doing it, but in a limited way. Kyle explains why:
To TRULY make a responsive Joomla, all the internal html markup needs to use standard classes across all components and modules, so the everything will be consistently responsive. You can try to do that from a template but as soon as a 3rd part component loads, it will break the responsiveness if it doesn't follow the same standards. The responsive standards have to be everywhere.
Working together
You can read Kyle's complete argument for the inclusion of Twitter Bootstrap into Joomla here.
Once we have this centralized, ever-expanding JUI then the entire Joomla development community can unite behind it and finally get on the same page.
How about excisting extensions?
Most every Joomla extension will need to be updated to take advantage of the new styles presented in Twitter Bootstrap. For smaller components and modules it will probably be an easy task. For larger components and templates, though, it will be quite a bit of work. Twitter Bootstrap is not just CSS, it also needs a particular markup (HTML5) to go with it. The wonderful thing about it is that developers can start now, looking at and familiarizing themselves with the framework. Several developers have already started working on a Twitter Bootstrap compatible version of their extensions.
Personally, I have already played around with creating a Joomla 2.5 template using Bootstrap. And after seeing what Kyle has been doing with the framework so far, I can't see why this isn't good for Joomla. Up, up, and away!
