Firstly (locked out my account as forgot password and email reset doesn’t work)
I upgraded to Pro for the reason I wanted to start creating my own blocks and I understand now why some claim the process is quite complicated - However I only find the process complicated if you want to create blocks from a website designed by a third party.
Following the video http://docs.pinegrow.com/editing/build-your-own-blocks - if you create a website yourself, the process is quite easy, especially if you keep on top of the css rules, I can be guilty of having more then required, so when creating blocks I plan to keep my rules clean and create say a page of various:
Headers
Nav Bars
Footers
Keeping the rules/setup as clean as possible, allowing me to drop my own blocks into all of my websites.
Here is a screenshot of my first block (just a simple contact detail block with map as background).
[quote="Jack, post:1, topic:267]
I upgraded to Pro for the reason I wanted to start creating my own blocks and I understand now why some claim the process is quite complicated - However I only find the process complicated if you want to create blocks from a website designed by a third party.[/quote]
It can be complicated when not using 3rd party also. Just one example: What happens if you have years of previous sites that you wish to leverage items from, that you may or may not remember the intricacies of too well?
Regardless of where the source originated I still feel strongly this process and workflow could be easily automated.
Hi Pinegrow User (it is indeed the one and only Jaffy lol)
Granted I’m looking at this from a different angle, as unlike yourself I don’t have years of previous work (or experience) - I’m building every website with Pinegrow/Atom.
It would be nice to have the process automated, say for example every section that is defined as a component, when you define the component, pinegrow will track exactly which css/js/images are associated (with that section) and add such files to the resource library. That would be ideal, just I’m unsure of how easy that is for the developers to implement?
edit: just read your links and I see you have already discussed this and had a response!
And thanks for welcoming me to the Pro club
Hopefully I can start building up a library of quality blocks as I’ve been looking at the standard of blocks created elsewhere and I’m confident I can build blocks (of that standard) and maybe we can start sharing blocks we create? just to help each other with projects.
The nice thing about Pinegrow is that it is utilizing native files, so any past project (within reason, using modern standards) is accessible for consideration.
This was what I mentioned in the second thread, to have a shareable repository (much like Bootstrap Studio), where users could search and use other peoples bundled components, blocks. I think in doing so, coupled with a more approachable UI, Pinegrow would open up to a much broader market of users and increased revenue stream. We will see with time how things transpire, but hoping such things are given consideraion.
Ok, I’m loving this block building, I may now officially be a geek
Add all your css rules to style library, create your new block, click update and add any images to resources but because style library is already added (from my first block) if I save additional rules in style library, they are saved without having to manually add to resources (for each new block)
Here is my second block, tried something different for the contact form
So that would be my tip for anyone wanting to create your own blocks, you can see from my blocks, very simple changes and you have your own customised blocks ready for any future projects.
Plus it helps with the design process when you experiment, giving you fresh ideas for future projects.
I was having a problem with certain resource files copying over (even if added to component resource library) , I have just defined 20 new blocks and instead of adding resources (via pinegrow), because all the assets were saved in the “assets folder”, I copied and pasted the assets folder (using file explorer) to the directory of the website where I plan to use my defined blocks and simply attached the style sheet when adding a block to the page.
It saves adding every image/css/js through Pinegrow, as obviously if the path set via html/css is set to read files via assets, then you can copy and paste the folder to the directory of every website that you plan to use your defined blocks.
Anyway, just wanted to mention this, incase it helps anyone when creating blocks from large websites and you want an alternative method of adding resources.
I should add, the correct way (is the best way) apologies to the PInegrow team for daring to try a different way - after playing around with the set-up, the resources now add when I click update index with library resources.
For some reason the image files failed to add, as did js (include in footer), was a long day and I must have made an error!
As the title is “building your own blocks” - I wanted to show a block I’m currently working on for a hotel template, this is at a very early stage (literally took me 20 (ish) minutes!), however you can see the concept, created with no code, simply drag and drop elements, custom css, makes life that much easier when designing a layout, before you move onto hand coding certain elements.
This is why I love Pinegrow, as all my previous experience is from photoshop layouts, many years ago and I love working visually and this layout is very similar to how I would have started in photoshop when working on a mock up.
I have to say a big thanks to the Pinegrow team for this software as it allows me to design blocks like a professional, building websites of the highest standard.
Here are 3 recent blocks (I’ve been designing 3-6 blocks an hour) so I won’t show all of the blocks I’ve created in the past week, but saving these blocks means the majority of work has been done in terms of layout and for future projects I just adapt as required.
That is my reason for showing, hopefully it will inspire people to create their own blocks as even in their current “mock up” state, I thought it showed how powerful PInegrow is.
Here are two other blocks, that are again at the mock up stage but show how powerful PInegrow is.
My main tip/advice for anyone, is to learn layers - at times it feels like I’m working in photoshop. Say I drop a div within a section, I can then add an overlay and then a div on top of that div and so on. I would then play around with css rules to move the div’s where I wanted them placed!
I’ve been thinking of doing YouTube videos to show I make a block and use css so maybe I’ll do that in the coming weeks as I’m not sure everyone realises how powerful the software is, especially when I’ve built the above blocks without touching a single line of html or loading up atom, the only manual aspect is custom css.
Ok…I’m obsessed with this block building and here is another block, took me 30 minutes as I visited one of the worlds leading web design agencies and wanted to see if I can design blocks to match the Pros! The guys who are paid big money and quite clearly I can recreate any design in Pinegrow.
Of course I’m only “copying” for my own learning, but set yourself a challenge and visit a website and redesign that website ( or block) and you learn so much, knowledge you can use when creating original designs.
Nice job Jack. I’m looking forward to your comprehensive tutorial and resource site, downloads, etc. Just kidding, but in all seriousness, I really miss Jaffy.
I watched some of your video, I really could not understand what you were saying. From what I saw though isn’t that what Pinegrow allows us to do anyway? Creating our own blocks of code? I don’t see anything special there, just duplicating what Pinegrow alrready does or am I missing something?
Do you know how Bootstrap Blocks are Loaded ? If yes then my plugin is all same you just need to paste the HTML code into the template file which i mentioned at the end of video and then just add additional class and data-name attribute for particular block, paste the CSS at the end of the add stylesheet and js in corresponding js file that it, now every time you load the block same as you load Bootstrap block, all your snippets will be loaded.
NOTE: My plugin is quite simple and straight forward reading all the block for template files with corresponding class and data-name and adding them inside LIB section so you can drag and drop them.
I really could not understand you so I have no idea what you said.
Why would I need a plugin to add things into the Lib when I can do that myself? I don’t understand your plugin then.
When Jack does his videos on how he is creating his code blocks and I research more on creating them in Pinegrow so I understand how it is done now I may then better understand why your plugin is better than out of the box Pinegrow. Right now I don’t get it.
I don’t use frameworks most of the time so what bootstrap or any other framework does or how it works in an editor I wouldn’t know anyway. I may start using Foundation and Bootstrap now that I have an editor that is designed to work with them but using a framework just to use a framework I am not on board with that thinking. The littlest possible to get the desired result is how I work, most of the time I can do it without any frameworks of any kind including javascript. Depends what it is though. If it can be done just straight html and minimalist css then that is my preferred method.
I use a lot of PHP and do template creation CMS style on the backend on the fly to create pages based off of user interactivity with the site and content. Doing straight flat html pages I have not done in years but I do work that way when designing layouts then break it up. I see Pinegrow helping with that as I have just used it to cut a part and build from scratch a really crappy table based layout that reminds me of Microsoft Frontpage days.
Yes if you can do easy by yourself, Then you don’t need any plugin, this was just for your information as @Jack is creating Components Blocks, this plugin does the same thing, and yes you can create Components blocks by yourself easily using PG IDE as well.
It is the same thing but it works via Plugin method, you just need to add the block into template.html file and give it a special class and name and save it next time just load the plugin and that block will be shown.
- after playing around with the set-up, the resources now add when I click update index with library resources.
