The Joomla! Community Portal ™

Joomla 3.0 Alpha 2 has just been released and here’s what you need to know.

Don’t use it on production

I know this has been said over and over, but please don’t use an alpha on a production site. This release serves two main purposes:
1) Developer preview so devs can get their extensions ready
2) Marketing preview so the world can know what’s coming.

Thanks to the JUX team

The JUX was officially approved at JoomlaDay Chicago 2011, but only started coming together at the 2012 JandBeyond. I am humbled by the talent and devotion of this crew that’s worked around the clock for months and touched just about every single file in Joomla. Special thanks to Rouven Weßling who has been our tether to the core and has gone above and beyond in his efforts. Don’t start celebrating yet guys, we have a lot of work before stable ;)

New Features

Some of the new 3.0 features can’t be missed such as the new installation process and admin template. Other gems may be tucked away, but they’re certainly worth noting.

Consolidated installation

The installation process has been completely overhauled for an optimized user experience. The entire process now takes only 3 steps. You can optionally email the configuration to archive the settings for later as well as optionally emailing the password (off by default for security reasons). It’s worth noting that you must meet the requirements to begin the installation process.

Isis, the new admin template

Isis is the name of the new admin template, following in the Egyptian god/goddess names of previous templates Hathor and Khepri. Built on Bootstrap, Isis takes full advantage of the new core Bootstrap markup and is of course completely responsive. Isis also uses jQuery UI for drag’n’drop, Icomoon font icons for all its icons, and Chosen select boxes for all select inputs. All of this is available to devs, more on this in a bit.

Protostar, the new site template

Alpha-2 ships with an updated version of Beez, but you can preview the new Protostar template by enabling it in the template manager. Protostar continues the “space” naming theme of Solarflare and Milkyway. Like Isis, Protostar is completely built to support Bootstrap and is also responsive (a protostar is a star that’s in a constant state of flux and changes size after all). If you are a developer and want to test your extension against full Bootstrap styles, test against Protostar.

JUI - Joomla User Interface Library

The new JUI files used for all the new features can be found in /media/jui. Think of the JUI as your Joomla SDK. All the tools you’ll need are now in the core and will be continuously upgraded.
JUI includes:

• Bootstrap
• Extended Bootstrap for Joomla
• jQuery
• jQuery UI
• Icomoon font icons
• Chosen js select boxes

jQuery Migration

3.0 Alpha 2 ships with both jQuery (in noconflict mode) and Mootools enabled. jQuery is the javascript library of choice for the JUI, naturally, since Bootstrap is designed for jQuery and we’re using jQuery UI for drag’n’drop (and other things). The goal is to ship 3.0 stable with only jQuery required and enabled for the core, but to maintain Mootools support for extension developers and backwards compatibility.

Drag’n’drop reordering, Select to Sort

The admin content manager views now use jQuery UI for drag’n’drop reordering. To preview, make sure you change the sorting to Order using the all new sorting select boxes.
If you’re a developer and want to start adding the new drag’n’drop, sorting, and more new features to your component check out these docs. The JoomlaShine team provided the drag’n’drop and Michael Babker provided the Sort/Order select boxes.

Bootstrap JHtml behaviors in the core

3.0 Alpha-2 ships with new Bootstrap tooltips, tabs and collapsible accordions. Developers can optionally use the native Bootstrap markup or they can take advantage of the JHtml behaviors. If you’ve used JPane in the past, these should look very familiar. Detailed documentation and development has been provided by Dave Horsfall of HWD. Expect more Bootstrap behaviors in the coming releases.

Icomoon font based icons

145 vector font icons are included in the JUI for standard and consistent icons across the frontend and backend. The beauty of a font icon is that it’s infinitely scalable (just change the font size), retina-friendly, crisp, requires 1 http request, and fully accessible. Retina support is important for the new Macs, iPhones, iPads and any device above 72dpi in which image icons appear pixelated. We’ve implemented the Icomoon icons exactly like Bootstrap icons, meaning you can use the <i class=”icon-home”></i> markup just as you would in Bootstrap. Even better, you don’t need to use the Bootstrap “icon-white” class since these icons automatically take on the font color! You can find the 145 icons currently supported in 3.0 here.

New advanced module chrome options

In the Advanced Options tab of modules you’ll now find options to change the Module Tag from a div to and html5 wrapper like section, Bootstrap Size to change the Bootstrap span grid class, Header Tag to change header h3’s to h1, h2, etc, for SEO purposes, Header Class to add a class such as the Bootstrap “page-header” class, and Module Style to change the Joomla module chrome to any chrome from any installed template. Thanks to Paulo Griiettner and Anderson Grüdtner Martins for this one.

Bootstrap Grid Layouts

One of the major benefits of moving to Bootstrap is the responsive web design support for all browser widths. It is strongly advised for extension devs to upgrade their component layouts using these styles so they can automatically take on the responsive support. While the frontend layout will have more variation, the admin layouts are recommended to settle on standard layouts such as:
span2/span6/span4 for Control Panels with left and right sidebars
span2/span10 for List/Table Views with left sidebar and submenu (more info here)
span10/span2 for Edit Views with right sidebar
span12 for full width

New module position selector

Anderson Grüdtner Martins developed a much more simple select box for module position selection in lieu of the modal window. The select box uses Chosen js for real-time searching, and Anderson customized it to allow a new/custom module position if the search returns no results.

LESS CSS for 3.0 templates

One of the biggest changes in development templates for Joomla 3.0 will be harnessing the power of LESS. Site and admin templates will now have a /less directory and a template.less file, which will import all the Bootstrap and JUI less files from /media/jui/less. Templates devs can now easily choose which LESS files to import from the JUI and which ones they’d like to include for their template. For instance, to easily change all the colors in the theme, use your own variables.less instead of the Bootstrap default. You can similarly change the icons in icomoon.less. Check out /templates/protostar/less and /administrator/templates/isis/less in 3.0 Alpha 2 for examples. The beauty of this approach is that you’ll have all the CSS for your entire site and all components right in 1 compiled template.css file! All without overriding with duplicate CSS like the “old” days of Joomla :)

Of course, if you want to be nostalgic you can just use CSS in your template and import the JUI/Bootstrap CSS from /media/jui/css, but that’s no fun.

Bootstrap Button Groups for Radio Fields

You’ll quickly notice radios as grouped toggles in 3.0 Alpha 2. Extension devs can simply add a class=”btn-group” to their <field parameters in the form .xml for their component, and the radios will magically transform into button groups in the admin.

New features in development

We’ll continue to add and update the features in 3.0 until the Beta release, which is when the features are frozen. Here’s some of the things in the works:

New module menu assignment

Pedro Gonçalves (iMaQma) and Peter van Westen (NoNumber) have been collaborating on an all new UI for assignment modules to menu items. This is one of the more complex UIs in the Joomla admin so we’ve had many rounds of updates to handle all the nested menus, menu items and the potential number of menu items. The new UI will of course use Bootstrap and jQuery, here’s a preview.

Administrator menu manager

Jeremy Wilken (gnomeontherun) and Daniel Dimitrov (compojoom) are porting the full blown admin menu manager from SquareOne to Joomla 3.0 to provide full control over the admin menu.

Bootstrap menu module enhancements

Philip Locke and René Kreijveld will be graciously donating some features from their Joostrap menu module so the default Joomla mod_menu can better handle all the Bootstrap menu/nav features.

Bootstrap 2.1 and jQuery 1.8

JUI will be continuously improved and updated as planned, to provide the latest and greatest for extension developers. jQuery 1.8 was recently released and Bootstrap 2.1 comes out Monday, so we’ll be updating those for the next release.

More jQuery Features

We’ll continue to port over features from Mootools to jQuery so both libraries aren’t required to load. Things like the color picker and data picker will likely be moved to jQuery UI in the next release.

More RTL Support

Chalak Kareem has been a tremendous help with the RTL support for Bootstrap and JUI. He’ll continue to improve overall 3.0 RTL support and help by adding RTL support for Chosen js.

More Accessibility

Andrea Tarr recently attended a Bootstrap accessibility meeting and will continue to provide accessibility improvements to 3.0.

Feedback & Collaboration Welcome!

As always, you can participate but submitting feedback to the JUX Forum and pinging me personally on twitter. Also use those same points of contact if you’re interesting in contributing code to 3.0. We’ll be writing more detailed documentation soon. Developer usage and feedback can change the course of Joomla 3.0 so get to coding!