130 Blocks for Pinegrow - Loads like Bootstrap Blocks for Pinegrow

@simmo @schpengle

Its possible to get the blocks working in another project, though this is not ideal at moment with pinegrow. This is because of code bloat and possible conflicts with code. For example you could end up with a lot of duplicate classes etc like lots of h1, h2, h3 tags when editing CSS. if you are careful this won’t be a problem but will mean some manual editing of Style sheets to keep things clean and organised.

To load the blocks into another project (there are actually a couple of ways to do this in PG, this is my preferred way):

Copy the files from chocka blocks folder over into your project or vice versa. You might need to rename some files like stylesheet or main javascript file name to avoid conflicts. Obviously you don’t need to copy files like bootstrap files or FA, or you could overwrite these.

Now all files are in the existing project you have 2 options.

1 Manually add the important CSS and JS scripts

Use a web editor like Atom or notepad to Manually copy and paste the Header and footer scripts (CSS and JS ) over into your existing projects pages header and footer from components.html (or blank.html) Remember to change if you renamed any of these css or js files.You could also do this inside pinegrow using the the code editor.

This for me is the easiest way to load blocks into existing PG projects I just did this and took less than a minute to add them and all working fine.

2 Add the CSS and JS in pinegrow:

first click file>manage stylesheets and add the stylesheets you copied from chocka blocks

go to PRJ>right click on the page you are working on and click add resources…then add in the js files you added

Notes

Sound like you already tried the second one so if first does not work (works for me) consider:

If you have issues check where you added the stylesheets in header. Maybe move down below main stylesheet etc.

Pay attention to structure, add css to css folder and js to js folder, ideally it will have same folder structure and naming as chocka blocks to quickly get things working.

If things still look broke check order stylesheets are in.

Try refreshing or reloading project if you have PG open if still looks broke also

If you still have issues I can do a video showing how I quickly do this (complete with whistling tune ha) , hopefully PG gets a bit smarter at adding component libraries