I’m new to Pinegrow and out of curiosity I purchased: Bootstrap 4 Restaurant Website Block Kit “pg-restaurant-pro”. Noticed that when you place some blocks to a page it is using all CSS for all blocks even if you only use one. This means that you have to look in the CSS copy the particular code and paste it to a custom CSS file to create a SEO friendly website.
What I’m looking for are building blocks that only add the CSS that’s needed for a particular block to a custom CSS file. Does this exist or do all plugins have some technical limitation because of the plugin structure? I find the pg-restaurant-pro methode not very unusable!
Structured Code
All template styles are neatly organised in one CSS file which you can quickly & easily edit post project keeping only what you have used. There is also only one small additonal JS file added to your project.
So when you add the block library, you add the stylesheet for all the blocks. This is normal, and will have an negligible effect on SEO, but if you really want the leanest possible website, you can always use an Unused CSS tool to strip away the CSS not being used. I would be careful with doing this however, because some of those tools don’t take timing effects of javascript into consideration.
Honestly, I doubt the miniscule hit in loading time will even be noticeable.
I’m in webdesign for many years used to work with Dreamweaver, but jumped of the Adobe boat at CS6 and still have the complete Master Suite. For years I’m using Sublime Text 3 now with great pleasure.
Pinegrow came across in a review and I decided to give it a try along with Sublime Text. (because the text editor in Pinegrow was not usable for me I found after 1 hour experimenting with it). Pinegrow has a great potential and I created a Bootstrap 4 website with SASS compiling in a couple of day’s.
About the plugin.
I worked with many applications: Sublime Text 3, Affinity Photo, Affinity Designer and the CS3 till CS 6 Master Suite. The plugin structure in all the other apps is different from Pinegrow. In Dreamweaver or Sublime and Photoshop and Affinity you can apply endless plugin stuff from different plugins on one project. "The Bootstrap 4 Restaurant Website Block Kit “pg-restaurant-pro” plugin takes over your whole project, spits out 35 links to Google fonts in the head and all the CSS for all 150 blocks. Of course it matters for your SEO I can tell you from experience and it slows down your site without reason. (of course you can find the CSS and edit a custom file, but a plugin is there to make your life easier and not more complicated) I want to be able to use a navigation block from plugin “X” and a cards block from plugin “Z”.
My idea about plugins.
The way I would design plugins is that it has the possibility to place a block and once the block is placed it spits out custom CSS only for that particular block to the custom CSS. And with a clear description like /* Navbar 34 etc. */ Then I want the possibility to open a other plugin and insert something from that other plugin, without an other ton of CSS in my project. Only the CSS that comes with that other block. Seems not more then logical to me!
So my question was: Is this a technical limitation of the Pinegrow plugin structure? Because the way I see it working now makes it super complicated and saves no time at all compare to a ready made blocks template with clear description.
I don’t know if it’s a Pinegrow limitation, or simply how the person who created the Restaurant Block kit chose to create the CSS file. I’m not very familiar with the method of creating blocks for Pinegrow. On my own sites, I typically use standard Bootstrap components and customize them as I need.
It’s likely that many of the Restaurant blocks use common classes, but I agree that you don’t want to be calling 35 different Google fonts if you’re not using them. As I said, there are plenty of free tools online that will examine your site and strip out unused CSS from your stylesheets.
The program Boostrap Studio handles custom blocks the way you suggest. Each block includes it its own CSS rules. But there are also downsides to this method. For example, when you add a block, it imports its own short CSS stylesheet, so if you add a dozen blocks, you get a dozen different stylesheets. Another problem is conflicts. If you add blocks created by different people, you might have two blocks that use classes with the same name, and depending on the particular stylesheet’s specificity, one may take precedence over the other, yielding unexpected results on the page.
I think when it comes to a block library like the one you purchased, it makes more sense to have a single CSS stylesheet for the entire library, and to just strip out the unused CSS when you are finished building the website. I haven’t seen the CSS code for the Restaurants Block kit, but as long as it’s been clearly organized and labeled, it shouldn’t be too difficult to clean it up when you’re done building your site.
I think when it comes to a block library like the one you purchased, it makes more sense to have a single CSS stylesheet for the entire library, and to just strip out the unused CSS when you are finished building the website.
No I don’t agree! When you have to sort out your CSS from one file with all the CSS is a pain. It’s much easier that only the CSS used by the blocks you pick and place is automatically written to one custom CSS file and nothing needs to be done. The idea is to be able to use multiple plugins on one project. Sorting them all out!? On a 40 page website and removing all the links from the 35 Google fonts? And finding out what CSS part is using what font?
@AllMediaLab I am afraid Its not possible to do what you are looking for with Pinegrow just yet, it would be perfect if we could, that would be the ultimate goal, to just add a block and only the CSS for that block.
The idea of the kits are, they are design tools like a framework -The restaurant kit includes a number of fonts which are commonly used across restaurant websites and the CSS is organised in one file so its easy to just to remove the CSS or files you don’t need.
There is a trade off in that you save time designing and creating a protype website - but need to spend some time cleaning up the project post project (if you care about this).
The way I am looking at getting around this is, in the next update to use SASS now that Pinegrow supports it quite well and organise the code so its modular and you can just detach the files you don’t use - eg if you don’t use reviews, detach the _reviews.SCSS file
I will consider removing all the fonts as this was just an idea to help users with limited design skills choose a suitable font for their restaurant site.
In the mean time, the simple solution is to create one master page, choose the font you want or remove them all in a code editor or by detaching them in Pinegrow and duplicate this page throughout the project.This would only take a couple of seconds.
The Style sheets are clearly organized and labeled, and use specificity so no block inherits code from another block which prevents conflicts with other CSS used from elsewhere - This also means you should easily have a handle on what block uses a certain font (which you can change in the visual editor with just a click) or the code it uses in general by looking at the first div class - eg pg-restaurant-header-1. If you only use say 10 blocks, you just need to search for these in the file editor, post project, copy the CSS into another file and maybe paste it all back in - again this should only take a couple of minutes.
Really appropriate your reply! So when I purchase some more of your blocks, do you garantie that when the possibility is there they get updated? And what about using multiple plugins on one project? That seems not to be possible too. Is this a limitation caused by the Pinegrow application?
Hi David. This will be the plan going forward, I have been working with Bulma lately and it seems like a good solution as this is similar to how this framework does it.
Yes, I am working on this on the Chocka Blocks plugin update already - including a few other patches for that.
It is possible to use multiple plugins - The premium plugins are designed to work together - the CSS is set up in this way for this - EXCEPT THE START UP BLOCKS ONE - which is stand alone for now.
So its not a limitation as such, but the set up must be in a way for them to work together. Working together in the sense they don’t conflict, they will be separate components. Other facctors would be what framework they rely on - a Bootstrap 4 plugin wont work with a Bootstrap 3 one - but all the premium plugins use Bootstrap 4 anyway (again except the start up blocks one which uses a modified version of BS4 because Bootstrap 4 was not supported by Pinegrow when it was created)
I’ve thought about creating some templates for PG and I agree one CSS file with a ton of unneeded classes is not the best approach. PG would have a huge advantage if this issue could be ironed out. The SASS solution sounds nice but is really just a slightly less worse solution. There is huge potential for PG if there was a seamless solution to adding blocks (block packages/libraries) without adding extra/unneeded code.
Purchased 3 block collections, but they all need a lot of extra work besides figuring out the CSS. Had to replace png icons with real icons. The png’s looked terrible on high resolution screens (that’s not only a 5k imac but any mobile phone today).
There is also a heavy use of background images where it’s absolutely not necessary blocking you from implementing decent picture and srcet HTML and foreground images and making the blocks unusable for modern webdesign.
What I’m looking for are blocks made with real Bootstrap 4 HTML including all the official classes and a little CSS or SASS. Absolutely no background images!
The only real instant usable blocks come with the Pinegrow application.