Have anyone tried using the new version’s (3.06) CSS editor? (a downgrade and a struggle for me so far - probably best using an external editor - Atom or similar…)
Can you please describe the issues so we can investigate and try to improve?
My own recent experience…
- The access to the editor isn’t intuitive
- The CSS editor appears as a column on the right and doesn’t work as a proper editor -
I tried to format some lines, but the editor appears to have a mind of its own… - Most editors have a menu or icon bar for most trivial commands, but I couldn’t see any…
- When I tried to expand the editor to the left, at some point, it maintained the same width and inserted
the CSS rules pane on the right
Sometimes less is more - the arrangement in the previous version wasn’t ideal, but at least we could
have viewed/edited the CSS file in full (be it in a basic editor)
It makes sense that as part of your forthcoming Atom integration there will be a command/icon in
Pinegrow to open the CSS file for editing (rather than just loading Atom and looking for the CSS file)
Completely agree.
It is very very difficult to get things to work correctly and it’s certainly far from intuitive. The amount of time I’ve spent attempting to do simple editing tasks and class creation and assignment is shameful.
Oftentimes I find myself going in circles attempting to figure out how to edit a class, or even get a selector assigned to an element. It’s really frustrating, and I wind up turning to manual editing.
I know that the statements above are somewhat vague, so it’s probably hard to know what’s wrong, but it’s an overall UI and behaviour issue. Going in circles because it’s unclear just what does what and never knowing if something is going to work is more or less the problem, for me anyway.
I’d really love to see something in the way of a video or documentation explaining exactly how it is meant to work in full because at the moment I’m considering downgrading to pinegrow 2.x just to be able to make sense of the css.
1 Like
The editor appears to use the key commands based on the ACE javascript editor by Cloud 9. They might be using it for the embedded editor or a subset. I haven’t tried all of them but it should help with navigating the code. More information can be found here:
On OSX CTRL=Command.
Cheers,
Vince
One important issue I forgot to mention:
The minimum I expect in an editor is to be able to do/undo, save or cancel (i.e. abandon changes) -
I can’t find any of the above in the CSS editor.
The current lack of documentation is probably the biggest issue here so here is a very quick and dirty video about the process with the visual css editor.
video: https://www.dropbox.com/s/clcc16f17brxxuj/quick_css.mp4?dl=0
Note: the preview is not clean on dropbox but you can download the video to watch it in HD
Can you please tell me exactly what you don’t get with this process so we can understand what is not clear enough.
2 Likes
Thanks for that @Emmanuel, basically that shows how things should work. Everything looks great when you are fully in control of assigning simple classes such as color, etc. But suppose I want to edit something more complex:
Frequently I will have classes that do not appear under Style Attribute. I can only assume this means that there is some kind of styling that perhaps the Visual Editor cannot deal with? So I turn to manual editing. This CAN be done in Pinegrow but you have to dive into the entire css file, find the class, then access its properties, then do the editing. This is very cumbersome - especially with big css files - compared to Pinegrow 2.x, which always listed all classes and allowed immediate editing controls. In fact I just tried doing this in Pinegrow 2.x and the difference in ease of access allowed me to do in 5 seconds what it took me 5 minutes in 3.x… and that’s apart from all the time taken in trying to figure out what the interface will and will not let me do.
And @ganr8790 is right about the editor sometimes having a mind of its own. It’s difficult to describe until you try doing something and it just won’t do what you are asking it to do, or won’t let you save some kind of class assignment.
And what about leaving the ACTIVE view and opening the corresponding stylesheet ?
You can then “visually” access ALL the rules and benefit from the visual editor as well.
1 Like
In theory, yes, but:
-
Sometimes Active view makes the claim that there are no Style Attributes present at all when in fact I know there are. I’m looking at a bunch of div’s right now that PG3 claims has no styling and for which there obviously is, when you look at the code, and of course appearance wise. But here again, maybe I’m missing something. But it is not a reliable indicator of what styles really are present, at least for me it’s not showing anything.
-
Opening the corresponding stylesheet is fine for manual editing but the problem is that I may as well be using an external editor for that(and currently do). I get that in using PG3 you get the pretty great Visual Editor to use alongside it, but if you’re having to access a sheet’s code anyway, then the Visual Editor isn’t really much help, efficiency wise. And of course all this was never necessary in PG2.x, where you can dropclick on any element and directly edit it’s css properties right there. As far as I’m aware… and it has taken me a while now to figure this out… this seemingly is not possible in PG3. Am i right or wrong there?
I think you’re right in that part of the problem is lack of documentation to this point. I expect PG3 to be at least as good at PG2.x in doing very simple things like editing css. And yet in very basic but important ways, it’s a step back. It is taking me much much longer to get things done in PG3 at this point.
edit: i want to mention here that I don’t expect PG3 to be both a wonderful UI design tool AND a fully blown code editor. I think I miss 2 things about the old Pinegrow: Atom integration, and direct css editing on EVERY possible element. That combined with the not always reliable nor predictable controls and having to figure this all out has made for a troublesome experience, but I think that once Atom integration is up and running, those concerns largely won’t matter.
edit2: one of the problems is that sometimes class edits simply don’t save. i don’t know why, but it happens on a regular basis. not that often, but it does happen every now and then.
The visual editor looks pretty and powerful, but takes time to get used to.
Also, sometime I just want to get my hands dirty and edit the CSS file directly -
e.g. when I copy and paste from other files or to make bulk changes (Find and Replace) etc.
@mfg please post a screenshot or even better, code or project, with the situation where all rules are not displayed in Active css, so that we can investigate the issue. There should be no difference between 2.x and 3.x when it comes to listing active rules.
Probably I can second this.
I exactly know what he means - however I can’t really explain the missing point nor can I say if this is the expected behavior.
So in my example, there is more than one stylesheet involved. A remote one (coming from my own framework) which is (certainly) not dedicated for to overwrite. So for this reason, I created the overwrite.css. Last but not least some project-specific styles.
Now what could be the expected behavior look like? The active should/could show all classes applied - depending on their root stylesheet. Or at least something similar.
This is the current dev stat for the project:
https://clients.updog.co/TrendHolzDesign_2017/index.html
and the “blogpost-example” - from where the screenshot is:
https://clients.updog.co/TrendHolzDesign_2017/blogposts/blog1.html
Hope this helps.
Cheers
Thomas
Thanks.
Sorry @matjaz, been very busy with attempting to complete a project. It’s rather like @Thomas says, but generally speaking the behaviour is kind of not very consistent or intuitive. I’m learning and have spent many hours coping with it, but it’s not a great UI imo at the moment, at least insofar as css protocols work. Most everything else is really great!
edit:
As with many aspects of Pinegrow, I strongly feel that a much more specific and careful explanation/documentation of protocols would help greatly. Personally I’ve watched many videos and read many documents and had to re-watch and re-read them again and again in order to puzzle out what exactly is being referenced. And I’m still doing that, even now. So if I could offer a suggestion for documentation going forward, please be very very clear in documentation and videos. Thanks!
1 Like
@Thomas looking at the blog1.html: article has .content class, but there is no .content CSS rule defined in any of the stylesheets. You can check this with browser dev tools, for example. CSS Active panel only shows CSS rules.
HTML element can have classes and attributes, but that doesn’t mean that CSS rules for those classes, atrributes are also defined.
We’ll try to do a better job at explaining how this works in the new documentation as @mfd suggested.
Hi Matjaz,
you’re certainly right!
I did a very bad example in this case:
The class of content does not have any attributes behind, but there is an “inherit” declaration called:
.content > div:not(.title) {
margin: -80px auto 0;
max-width: 900px;
padding: 0 1.25em;
}
Its properties certainly appear on the first DIV inside the DIV the .content is applied to (where else?) and Pinegrow does an excellent job. My bad.
Cheers
Thomas
Thanks for the video earnoud. Surely we need more tuts and docs about the new version, since I face the same issues that other users in this conversation already mentioned.
