What needs to be fixed

I understand everything is under development and I want to make sure some details are well taken care of.

The ATUM template for the Joomla administrator application uses CSS3 columns for template styles panel, which is not a good idea, at least surely not for me.

@media (min-width: 992px)
.column-count-lg-3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

Why this should be fixed

The columns idea makes impossible grouping the options within a <fieldset> markup to be consistent in terms of hierarchy and/or function. On the other side we cannot use a <fieldset> for each group of options, we would have too many tabs, which is again inconsistent.

Having a bunch of options ordered from top to bottom in 3 or more columns looks like a mess, very confusing to the end user, nearly impossible for developers to deliver or improve upon.

Currently there are ways to go around this, ways that involve using a custom field just to add a custom style for the template admin panel and override the styling of the panel, which is not the optimal solution for most of us.

How would you fix it

We really need some way to control the columns behavior for options inside <fieldset>, my first idea (at least what I tested and confirmed to work) is to implement the class attribute for fieldsets specifically to customize the columns behavior as well as possibly grouping these options. For instance, we might also have a field of type="Spacer" to break the columns and the behavior can be set with a specific class for that specific fieldset, but that is a user specific case.

By default the columns behavior should be disabled. Here's what I'm talking about

No columns by default

<fieldset name="default-no-columns">

Expected markup

<fieldset id="default-no-columns">
  <div> <!-- this div can be removed for faster render -->
    <div class="control-group"></div>
    <div class="control-group"></div>
  </div>
</fieldset>

With columns

<fieldset name="with-columns" class="columns">

Expected markup

<fieldset id="with-columns" class="columns">
  <div class="column-count-md-2 column-count-lg-3">
    <div class="control-group"></div>
    <div class="control-group"></div>
  </div>
</fieldset>

Side Effects expected

None that I can think of, only positive outcome is expected.

Implementation plans

Please let me know if this is achievable withing the time frame of the beta release, I can start to research and submit a PR in this regard as soon as you guys submit your feedback.