It’s quick and convenient to add classes to elements with Pinegrow. It’s a good coding practice to follow ‘Single responsibility principle’ in terms of CSS classes too, which naturally results in usually a lot of classes attached to elements. When working with Bootstrap properties in Pinegrow, it actually happens by itself – there is nothing wrong about that, as Bootstrap also promotes this.
Some developer, like me like to group CSS classes attached to elements on a logical manner – so that related classes follow each other. It results in a cleaner code, and as such better code-readability, and easier maintainability.
Because of the above, it’d be nice if Pinegrow could:
• Sort classes attached to elements by drag and drop,
• or (even better) automatically sort classes attached to elements by name/abc.
Sorting classes automatically by name/abc would make a lot of sense, because – when classes are named smartly, or by BEM methodology – their names are often related.
Is there a chance this fetaure would be added in future verions of Pinegrow? It’d be very nice, and a great productivity-booster!
Starting from the next update (5.941) PG will order classes alphabetically. Sorting of classes will happen when a class is added or removed from the element. This means that existing elements will not be affected, until their classes are modified either through Add Class tool or through Properties panel.
But this is maybe not for everybody desired behaviour, there will be always users that want to order them differently than ABC (permanent or for a specific project), and having an own system/way of organizing them. So hopefully it’s going to be configurable in Pinegrow settings (also to avoid complaints from users that don’t like this new/changed behaviour).
Personally I don’t mind that sorting CSS classes alphabetically is becoming the new default setting. But there also need to be the option to disable it, when I (somebody) don’t want/need it.
@Marf’s remark may be true – though I’m personally really happy to have classes automatically sorted alphabetically (as this is the way how I work), some developers prefer to group / sort them differently in the markup. Read this article for example on this: https://csswizardry.com/2014/05/grouping-related-classes-in-your-markup/
Maybe you misunderstood me, or I gave the wrong signal. I also like to have them sorted! But this is not always for everybody, or for every situation/project desirable. So the best way, in my opinion, is to be able to have a setting to toggle it on/off. (Which Matjaz maybe already have covered and implemented it this way).
I only wanted to point out another view to this changed behaviour. Maybe better implement it user configurable, with a toggle setting (on/off). Then introduce now this new “sorting” behaviour, and getting user complaints about it. And need to fix/change it in a next version… Better have this covered now right away!
@Marf, I actually just wanted to confirm your remarks with complete agreement – I don’t know how my answer could be received differently – but anyway, sorry for the misunderstanding. +1 for Marf’s idea, to be able to toggle this new behavior on or off.
I’m a bit reluctant to introducing another setting, every new thing makes the app more complicated.
Auto-ordering would be an improvement to the current situation, without negative side-effects - I think, please correct me if this logic is off:
There is no sorting now and new classes are always added at the end
This means that people can’t really enforce their favorite ordering method now, without manually editing the class attribute
Auto-ordering will only happen when classes are edited with Add Class tool or with a Property control that maps to a class (like most Bootstrap controls).
So, the changed behavior would only disturb users who now:
Use Property controls and Add Class tool - AND -
Then open the code in code view and manually re-arrange classes
How many people would do that? Compared to such workflow it makes more sense to edit classes in code directly.
I understand why you want to avoid an extra setting.
I totally agree with this! Changing the current behaviour to “auto-ordering” is a welcome change and an improvement.
You can divide the users in 3 groups.
1 - Users that really don’t care (if or how they are ordered)
2 - Users that want them ordered alphabetically
3 - Users that want them ordered differently
With adding this new “auto-ordering” behaviour, it brings a solution for group 2. I think that group 3 is always the smallest group (now and in the new situation). So changing this behaviour will make more (the most) users happy!
Edit :@matjaz I changed the last part of my comment (better formulated).
The new changed behaviour is only “extra” negative for the ones that want to order the classes differently than ABC. And still want to use the GUI for faster workflow to add classes.
When they now use the GUI to add new/extra classes they know these new ones are placed at the end. And they know where to look when they want to change and re-order the new ones to fit in their preferred order with the other classes using “codeview”.
In the new situation, when using the GUI to add new/extra classes, ALL classes are re-ordered and breaks their “order system” completly. More work for them to get them all back in the preferred order.
But this is probably not affecting a lot of users (if they already exist). Because like mentioned before, the ones that are using an order system that is different is a small group of users I think.
Thanks @matjaz for pointing this out – for me this is more than reassuring. I haven’t realized reordering only happens if visual controls are used, but along this behavior it’s unlikely this will cause any problem for even power users I think.
@matjaz I assume that this is a change in the Pinegrow Core/API that handles CSS classes, and that this is also a change and going to work for all integrated and bundled frameworks that has a GUI to change properties. Not only Bootstrap, but also Foundation, Materialize, Font Awesome, etc…
And expect so that this new “auto-order” behaviour is also going to work directly and affects other Frameworks and Plugins with a GUI that uses the Pinegrow API. Or do they need to change/update their code to apply this new behaviour to their Plugins …??
Probably interesting to know about this upcoming changed behaviour for people like @RobM, with his UIKit Plugin. And @Thomas with his own Reginald Magic Grid System. And @benhanna (and for all others that have a custom plugin for Pinegrow that controls/map CSS classes).
No problem, happy to help! It’s fun to be a little bit involved and think and discuss about improvements and new features. Because in the end we can all benefit from it. A win-win situation!
Yep, adjusting or optimizing things is of course always possible.
certainly am following your discussion and thanks @Marf for mentioning me.
Basically, I’ve never (really) minded about the class-sorting order on elements. Thus spoken, I had in fact as well the wish to re-arrange them recently. But to be honest, neither random or even alphabetical is to me a real game-changer.
To me - it’s more another methodology I’d follow, which could be described as:
rather than “names” and “terminology” of classes. So my bet would be more the drag’n drop within the classes HTML panel.
I’m using the apply_class method, so it would affect my plugin as well. But whatever your wishes are, I’m fine with it - as long as I have not to change my plugin’s code .
I use SCSS nesting to keep my sheets in order by sections. So .header for example, would be my parent for all css that is in the header section. Then I normally order the SCSS inside each section as it appears on the page so for example:
.header {
.title {}
.subtitle {}
.logo{}
.nav {}
}
.main-content{//nested class/ids in here too}
.footer{//nested class/ids in here too}
I love using the property tools and add class tool they really save time, so am I one of the 3rd type of people who are going to get messed up with this? @matjaz if you’re worried about too many settings add an advaced settings area and newbies won’t be overwhelmed and people like me will not be negitively affected by changes like this.
@jonroc this feature doesn’t affect the order of class rules in CSS/SASS code. It only sorts the classes within the element class attribute. This feature is already released.
.