I am new to Pinegrow and back to web-development since stone-age … wondering why I cannot find the CSS “filter” property in the visual editor of Pinegrow.
Well, I can create it directly in a CSS code snippet, respectively a class, and then assign it to the HTML Element – but I cannot believe that this is meant to be in the workflow in pinegrow … so what I am missing?
As an example I want to achieve a blur effect on an image and so I use “filter: blur(8px)” in the CSS code / class.
I am wondering if there is certain strategy in CSS coding or in Pinegrow that some CSS Properties are made accessible through the visual editor and some not … but what would be the logic behind this “splitting”.
Yes there still remains various widely used omissions from the industry not found in the Visual CSS Editor. But perhaps since you have made this post CSS Filters will now be addressed also. That’s what happened when it was pointed out that Gradients were missing in this thread. They were then added using that suggested Grapick library.
CSS Filters should not need a library (but they also exist if needed) as they should be much easier to implement. Both Box & Text Shadow are present already and have blur so CSS Filters in general should be able to be implemented as well. Plus CSS Filters have good support of course SVG filters could be used as fallback if truly desired.
An example might be CoffeeCup’s Site Designer (below), but various other apps support them as well.
Good luck with your request, but yes it seems overdue.
I guess if needed they could choose to use the one below from GrapesJS the same source as Grapick, which is Pinegrow’s gradient picker in the CSS Visual Editor as mentioned in that above thread.
GrapesJS is pretty impressive for open source.
If they don’t want to roll their own, then thats an option among many.
while it’s a pity to read that CSS Filter is not implemented yet (! ;-)) in the Visual Editor, its great that you enfold a path that the developer(s) of Pinegrow might take – support of the finest way!
Just to strengthen this a little bit more … the visual editor is a huge benefit for designing websites and I believe even for those who are experts in HTML & CSS, as it unbans to focus on & act in code when doing visual things, like experimenting with layouts and designing a beautiful website.
I know this from the desktop world when using XAML & C# in UWP Apps on Windows … where XAML is quite the same as HTML & CSS and C# the JavaScript thing.
UX & UI design really becomes a joy & fun as Visual Studio (it began with Expression Blend) majored and you could do all the “design & workflow things” inside the IDE visually and not only by typing code.
I see Pinegrow nearly on the same road, as it has this awesome interaction feature (based on the GreenSock technology) and the timeline editor … which is like the storyboards in XAML … and having Visual Studio Code for the coding sides of things.
So I believe the visual editor is crucial for getting “brain freedom” when its up for design things – it might be not so obvious if you know all the tags and you do it in CSS code snippets, but if you really dive into the Visuals and visual kind of thinking & creating you are working in the “right brain” and code-/text-writing & CSS Logic is a “left brain” task … if you really let go, I think you will experience a difference when you can stay in the “right brain” and letting ideas flow, which a full-fledged CSS visual editor would promote.
This also relates to the overall workflow and having a need for a second tool like Adobe XD or Figma to create the visual design of the website – you may need it anyway if the project is large and there are different people involved with different opinions and roles … but if this is more or less a “one wo/man show” it makes a difference in time & hence budget if there is 1 tool that rules it all in a great & enjoyable way, or not.
So please Pinegrow’ers … let the sun of CSS filter shine into the digital pine we like to use … because that’s what pines are made for – let the sun in and the seed out in the most effective way nature can realize .
You’re welcome @gecko, sometimes input works and other times (seems like most for me) it does not. Just a few years ago the entire Visual CSS Editor was yet to be released. So you missed it before that.
You may like the notion of this other Pinegrow design centric app that may one day come to fruition. Which is still supposedly being worked on, the following update is from 8 months ago.
Usually most pines grow fast, while certain things around here seem more like hardwoods. But keep up the suggestions even some messages in bottles reach the other side someday. While others sink into the abyss of the depths below. Again welcome and good luck on your own suggestions journey @gecko. ;–)
… wondering why I cannot find the CSS “filter” property in the visual editor of Pinegrow.