Currently on Pinegrow 6.1 (paid). It appears that it uses Bootstrap 5.0. Would like to use Bootstrap 5.1, but customized w/local install.
Is that possible? Recommended steps?
Hi @wiverson,
Not sure of the scope of what you want to do. Using 5.1 is as simple as downloading that version and replacing your CSS and JS files with the downloaded versions. I haven’t looked at the changelog between 5.0.1 and 5.1, but I imagine that most of the built-in controls within Pinegrow should be compatible. Anything new to 5.1 will have to be added/edited by hand.
Cheers,
Bob
I picked local for the Bootstrap 5.0 files in Pinegrow.
I’ve got the following files in my project:
/bootstrap/css/bootstrap.min.css
/bootstrap/js/bootstrap.min.js
/bootstrap_theme/bootstrap.css
I’m using the Design panel to customize my Bootstrap. It looks like activating that panel caused my pages to all point to the /bootstrap_theme/bootstrap.css file.
If I want to switch to Bootstrap 5.1, which files do I replace? Do I swap out the /bootstrap/css and /bootstrap/js files and then the /bootstrap_theme/ will get updated when I tweak something, or…?
BTW, I’m @wiverson on Twitter too, if you are @BobMPhD hi!
@RobM Hi Bob,
You should be able to update Bootstrap with one click! This is a other reason that I use Sublime Text and a build system instead of Pinegrow for professional work. That way I can update all my dependencies including Bootstrap from Github with one click (that’s the way it’s done in 2021). It keeps Pinegrow out of the pro ballgame!
Regards,
David
Hi @wiverson,
You should update the bootstrap.min.js system in place and then replace the /bootstrap_theme/bootstrap.css file with the new bootstrap.css file. The original /bootstrap/bootstrap.min.css is ignored when the design panel is activated. You may have to unlink and relink the updated CSS using the manage stylesheets option. Not sure if Pinegrow will be unhapy with a new file having the same name.
And yup, I’m also @BobMPhD!
Cheers,
Bob
Hi @AllMediaLab David,
That is the great thing about Pinegrow. It is a tool that gets along just fine beside other tools. I’m not sure I get the - if you just add one more feature it will be perfect - mind set. Look at how many things you can do with Gulp or Grunt - I can’t imagine adding all those into Pinegrow. Personally, staying bleeding edge with frameworks scares me a bit. I would rather be slightly legacy to know everything works as expected. I introduce enough bugs of my own without having to worry about the ones that the framework developers introduce for me! Anyway, my $0.02.
Cheers,
Bob
Did test the beta version of the terminal plugin in Pinegrow Windows 10 and experienced total freedom for the first time in Pinegrow and was being able to do a full production/distribution within the app. I could load a Bootstap 5 template of choice, update/install any dependency/script etc. etc. Unfortunately it never worked on my iMac en the plug was pulled out by Pinegrow staff. Never seen anything of it again.
Think Pinegrow devs should leave the responsibility of choice with the user and not dictate how webdesign is done nowadays! Pinegrow looks to me as a kind of Dreamweaver CS5 from 10 years ago and seems to have missed any webdesign development that is used at the moment. That’s nice for semi profs and people with one website, but not for serious production of large projects.
I do use Pinegrow for prototyping and individual development of parts of websites.
Hi @AllMediaLab,
Just to clarify
The terminal/Monaco plugin was implemented by Paul before he became associated with Pinegrow. It was his decision to pull/stop development. It was never an official plugin. Pinegrow is all about freedom. We don’t dictate that you use a particular feature. You can make your development pipeline as complicated or simple as you would like. I should point out that it isn’t that difficult to open a terminal program at the same time as Pinegrow.
One of my other hats here is Developer’s liaison. I want people to customize and expand Pinegrow exactly how they want it to be. If someone wants to write some custom scripts to streamline their flow - I’ll help! This seems pretty professional grade to me.
Again, I’m not sure how it is dictating. Maybe it isn’t catering to your style, but the majority of users seem to like it and find good value. If it isn’t suitable for your large projects or flow, then there are other tools to use.
Cheers,
Bob
Good to read the history of the plugin thanks for the info, but I believe that nowadays you should be connected to Github in your webeditor like I am now with Terminus and Sublime text to be able to install and update all your dependencies. And not have to ask on a forum, can you please update Bootstrap (all the time). The lack of a Github connection in Pinegrow that is easily done with Gulp and node.js is a no go for me with Pinegrow for any website I make. Imagine I have to use Sublime Text and Terminus and Pinegrow all together that makes no sense to me.
For my part, I always come back to this excellent article posted by @matjaz in 2018
As for the rest, to make things easier, Bootstrap 5.1 will soon be integrated directly into Pinegrow through one of our monthly updates, as is the case for all Bootstrap updates since 2014.
For designers in a hurry, it is still possible with a little organization and observation of the structure of a standard Bootstrap 5 project as currently proposed in Pinegrow, to update - by hand - any BS5 project.
1 Like
Don’t agree! Think it’s a outdated narrow minded opinion!
I have been reading that article in the past and it only proves a lack of interest and experience of what’s going on today in a web design agency.
Node JS is used by at least 20 million websites
I use a build system for years and tried it with Pinegrow together (only worked OK with the terminal plugin). Never encountered one error and never something went wrong! It’s not complicated and makes life easier. Specially to technically maintain websites during the years of existence. And easy for development. Want a gallery or what ever plugin implemented in your website? One simple line of code installs the gallery in your website and you can even let the links automatically appear on the distribution version of the website. Need to update Bootstrap or whatever framework? Only 3 words of code will do!
This is how websites are made in 2021!
That’s your point of view and I respect it.
Obviously 2018 is not 2021 but the emergence of the nocode / lowcode apps (and the high demand from web designers) is an indicator that seriously strengthens this opinion.
In the end, David, the important thing is that you find the workflow that works best for you with Pinegrow, or other tools of your choice.
I wound up turning off the design panel and dropping in this 5.1 version of Bootstrap with a dark theme. Everything seems to be working fine and now I have a nice dark mode starter. I’ll try flipping on the Designer again later and see if I can customize from there.
FWIW I’m building out a Java Spring Boot app with Thymeleaf templates and it’s all basically working really well.
Obviously both Bootstrap and Pinegrow will keep moving forward with different release schedules. I think it would be a good thing to clearly document how Pinegrow will handle Bootstrap upgrades in the future. For example, if Pinegrow 6.1 bundles Bootstrap 5.0.1, what happens to an existing project when, say, Pinegrow 6.2 ships with Bootstrap 5.1?
As an enterprise dev looking at Pinegrow with fresh eyes right now, the only thing I’m wishing for right now is a detailed explanation of the various files and/or directories that Pinegrow prefers. What I’d like to know:
- Should it be put into version control?
- What file[s] are required for what features? e.g. to activate Bootstrap tooling, or Interactions, etc.
- What file[s] should I drop in to do an upgrade to Bootstrap (or Tailwind)?
- If I drop in, say, an upgraded Bootstrap 5.0.1->5.1.0 what happens if I have customized Bootstrap with the design panel
Anyways, I’m really enjoying using Pinegrow with Spring Boot Thymeleaf pages and HTMX. Very productive. I’m using Supabase for auth and persistence and it’s crazy how fast I’m building stuff. Using Pinegrow side by side with IntelliJ, working fine.
1 Like
With @ehigiepaul’s plugin providing the Terminal capability, can’t we tick this one? I see that he has made his plugin public on github.
Is your ask to have this terminal in-built within Pinegrow and have an option to hide it? Because using paul’s plugin works exactly the same, we could use the plugin if we need Terminal as a feature.
Disclaimer: Testing out paul’s plugin on github is still in my todo list and I haven’t been able to do it yet, so I haven’t really used it…
Hi @TechAkayy,
I got it working on Windows 10, but unfortunately it doesn’t work on my iMac 5k and that’s my main web design workhorse. I beta tested it on Widows 10 and Mac for @ehigiepaul (I have all OS’s available for testing in my web design studio). It was not perfect yet on Windows 10, but I was able to install a build system, clone a repository from Github, install and update dependencies, optimize images, minify code and use the Browser Sync local server. But obvious the Beta Terminal plugin needs further development!
Did not notice any Terminal development after the Monaco editor was implemented in Pinegrow. It’s a shame, because I bet that a whole new group of users would be attracted by this feature in Pinegrow.
Exactly! Now you have to use it as a Pinegrow plugin and it doesn’t function on Mac. When it is integrated with a “developers” ON OFF button (like in the plugin panel!) it would make sense and you don’t have the hassle of the plugin to load etc. Just like in Sublime Text, at the bottom the Terminus Terminal appears after clicking CND + Shift + P or Ctrl + Shift + P and typing Terminus…etc…
I was very enthusiastic about the terminal plugin and planning for future tutorials about this subject, but giving the current situation I went back to Sublime Text and the Terminus plugin.
I find it unbelievable that a feature like this is not implemented in a so called Pro webdesign application. And for the people who don’t want to use it they just don’t have to click the ON OFF button and will never be bothered by a Terminal in Pinegrow
1 Like
I see your desire to see Terminal as a feature within Pinegrow itself, so that you don’t have to use a separate app like VS-code or Sublime Text that has integrated terminal.
Likewise, numerous other features are provided by editors like VS-code through it’s large extensions marketplace (git, debugging, bookmarks, etc etc…).
Obviously, Pinegrow team are sticking to the bare essentials of unique visual designing features, and keeping other heavy features out, with assumption that we users use such external editors simultaneously while visually designing with Pinegrow.
Does Terminal fits these bare essential set of features of Pinegrow philosophy is the real question, will leave it for them to work it out…
Personally, whenever I have a node based project (node_modules) using a bundler, I’m so used to working on it simultaneously in both Pinegrow & VS-code (ctrl + ~ to see the integrated terminal in my mac), it really is a powerful combination…
One alternative is @ehigiepaul could decouple his plugin separating the Terminal and code editor and was able to make the Terminal work for Windows, Mac & Linux… Again, if he has the time & willing to.
But, with my minimal knowledge of pinegrow internals, panels are not really easy to extend via plugin, esp when restarting Pinegrow… May be if pinegrow team can help here to make it easy to add panels and preserve them (restoring last set of panels / workspace) when restarting pinegrow… then a plugin encompassing something like xterm.js with cursor at the root folder of the project wouldn’t be hard to spawn as a child process…
3 Likes
Exactly my idea too!
1 Like
This is getting rather far afield from “Bootstrap 5.1.0” but 
I have to echo that I don’t (personally) see a ton of value in adding a Terminal into Pinegrow. I mean… just tab over…? Terminal implementations are tricky, and I’d much rather see the Pinegrow team focus on being a killer visual editor that plays nicely with external tools - everything from WebStorm to VS Code to IntelliJ or Nova or whatever floats your boat.
4 Likes
Hi @wiverson,
Speaking to your questions raised earlier. Ill mostly be talking about Bootstrap, but I think the answers will be identical for Tailwind CSS:
So there are two folders and two files that are more internal to Pinegrow in a project. Depending on your needs they may or may not be neccessary to add to version control.
The first folder is the _pgbackup folder. This contains snapshots of previous saves. This is Pinegrows internal versioning to back things up through the History panel. This doesn’t need to be put into version control IMO.
The second folder is the _pginfo folder. This contains some internal settings info, like fonts. This doesn’t need to be versioned - I think it will regenerate if you download a project and open it.
The pinegrow.json file should likely be versioned if you are sharing a project with multiple people. It stores information like breakpoints and activated libraries/plugins.
The second file, projectdb.pgml stores the info from your Design Panel, so should be versioned. Everything else is standard HTML/CSS/JS. Version as you would any other project.
So, for the most part there aren’t too many other extraneous files added by Pinegrow except the pgia.js file which powers Interactions.
To upgrade, replace the standard CSS/JS files that you would in any non-Pinegrow project. Be warned, if Pinegrow is currently delivering framework 2.X, upgrading to 2.Y may mean that some controls will be broken. For example, if there is a change to the classnames, like changing from .display-white-md to .display-md-white, Pinegrow will still add the old classname and will not act as expected.
The Design Panel adds new variables to replace the existing variables in a framework. Nothing should be a problem unless the framework authors change the variable names.
Glad you are enjoying,
Bob
There is nothing tricky when you implement a terminal in a web-editor, most text editors did it without a problem. It means that you decide when to install/update and saves you hours of time. For the people who don’t like it… don’t use it!
Imagine you have a 250 websites to maintain, are you browsing to Github to see what updates are available? Are you manually downloading every single dependency/script you need to implement in a website that takes hours or do you like to have the possibility to install all dependencies like your Bootstrap 5.1.0 (that contains some important new classes by the way!!) in 2 clicks? And then I’m not even talking about: image optimizing, minify code etc. etc.
The value would be when you want to update Bootstrap you only type in: npm install bootstrap and when you want to use Bootswatch you type: npm install bootswatch instead of spending useless time to figure out how it works to install, download it and maintain it with updates manually.
Considering the fact that I use no jQuery in my Bootstrap 5 projects anymore and have around 8 to 12 dependencies/scripts in a project it is unworkable to maintain this manually for all clients.
The visual aspect is taken care of by Browser Sync anyway and every change you make is visible within a second in your preferred browser.
And yes you can use Pinegrow aside from a other text editor of your choice, but it complicates things more then that it makes it more easy. That’s why I like the idea of a terminal in Pinegrow very much. And already beta tested the terminal plugin for Pinegrow.
The Terminal Plugin in Pinegrow:
