Just starting with the demo version.
Created a PHP page (with just HTML for now, based on ‘Holy Grail’). Set up an external style sheet (styles.css) in the page. Basic CSS divs in that css file.
When adding elements and styling those elements, the CSS is placed ‘in-line’ in each div in the HTML code.
How to I get all CSS styleing to be in the external styles.css file, rather than placed in-line?
Thanks…Rick…
Still learning the interface, but if I click on an item in the style view (the ‘outline’ list of styles panel), and change an attribute of the style item, then the attribute is placed in-line, rather than in the styles.css.
What I am looking for is a global-type setting that will put all class atributes/etc into the styles.css file, not in-line.
This is the panel I am talking about (the Tree/Page Structure panel): if I click on ‘nav’ for instance, and add text color, that text color attribute is put in-line on the nav element in the html, and not placed in the styles.css file, as I wish it to be.
In the Styles panel, select CSS style you want the new rule added to. This will add it to the chosen CSS file, as opposed to inline in the HTML.
Good discussion taking place here.
I still believe this portion of the workflow should have some failsafes, as fragmented inline styles can occur for new users or even seasoned users inadvertently. If you recall I had mentioned it previously.
Hopefully something regarding failsafes will be included in Pinegrow 5, so the occurrence or possibility for fragmentation is prevented throughout the styling workflow(s) for all users.
This is a very timely discussion - just working on this:
The improvements regarding working with inline styles have two parts:
This will ship in Pinegrow 5, scheduled for next week.
Good news about the new feature.
If not too late, I’d prefer (and enjoy) a ‘global’ setting of that would ‘force’ all CSS to go into an external file. Perhaps with an option on an individual tag (class) that would allow an in-line style if ‘global external CSS’ was enabled.
So, by default, when that option enabled, all CSS goes into the external file. And perhaps even a button on an individual tag that would move the in-line to the external file (that would be helpful for inline styles that were previously defined).
Pinegrow looks to be a great product, from my limited exposure with the demo version. I suspect you’ll get another happy buyer out of all this. Appreciate the responses.
…Rick…
Thanks for this preview, looking very good! A simple and elegant way to highlight and show that inline style(s) are set. And “Tree panel” filters, I love it already!
Great news, already started with blowing up balloons and making party hats (for everybody),
to celebrate this upcoming release and milestone!
Thanks so much for working to improve the features between the Visual Tools and CSS workflows. This will really be beneficial for all users when visually styling as a failsafe regarding the presence of inline styles in projects.
I especially like the idea of toggling “Show only: Inline styles” in the Tree View Panel.
[ 1. ] Will doing so also visually toggle the other items on the live page - like via the “Hide / show in Pinegrow” ?
Basically like using the “Hide / show in Pinegrow” feature, but for everything that “does not” have inlines styles. That would likewise be beneficial as another visual representation method on the actual page itself.
Seems only logical, if you can utilize the hide/show feature and target the opposite collection of page items “without” inline styles via the “Show only: Inline styles”.
[ 2. ] Another minor suggestion that would prove to be beneficial, is to change the “stroke color” or “background color” of the “Class, ID, Selector Input” field to the UI orange also.
This would provide another simple and elegant reminder for users to take action regarding input, while remaining appropriate to what you have shown via your screenshot.
** Thanks for taking those 2 suggestions into consideration. They seem like minor adjustments (UI and feature that already exists), each could further aid in strengthening this revision and enhancement of the workflow. ;–)
Since our last discussion in that other thread a year ago, I looked at other apps and how they handle things.
BlueGriffon for example puts a large bold color box around the input – but also actually locks the user out of doing anything further until they provide input.
Which is a very intrusive approach by them towards the user and general workflow. So obviously the Pinegrow approach you have shown is far superior, along with its overall visual tools and entire app by comparison. 
@matjaz, this will really be nice revision for users and the Pinegrow visual workflow and interface.
@matjaz.
Ūber Awesome!
Number 5… FIVE? Well done! I’m with @Marf on the whole party hat sketch 
Also, would it be possible to add the HIDE bootstrap classes, as well the current SHOW them that we have?
Once you list them, that is it, no way to get shot of them from your class listing again. and BS Classes can be a bit overwhelming (or any other framework which may be used really) when you just want to view your OWN classes.
ok cheers! it might be a bit late to squeese that in, I assuemed it was there and I couldnt find it, but apparetnly not!
and Next week?
Fab!
I take it very seriously. Already cut my fingers twice, but luckily still got them all ten. I’m able to make 200 party hats a day. Cancelled all my appointments for this week. @schpengle Can you help me with it to get the job done… ( Btw, we also need colorful hats for your “friendly” PineHounds! )
Also need to figure out, how to ship them fast enough to everybody! 
+1 for this!
@matjaz Would be great, to hide them again with one simple click. (See this previous topic)
Reply to Self:
Concerning #1 & #2 suggested above regarding “Pinegrow 5” “PG5” “PG 5”, No and No.
