Pinegrow Community Support Forum

The Ultimate Block Kit

#1

I thought I would throw this out there for anyone who wants to spend 45-60 minutes putting together the ultimate Block Kit for your projects, once you have built your own blocks.

Start a new project with PInegrow Blocks, save as a Blank Template and keep this in a folder such as My Template

Save all your custom blocks to one HTML page (or two). Follow the guide for defining your blocks within PInegrow.

Open your blank template. Load project as library for your custom blocks. Test to see all blocks work and now press save.

My Template includes

  • Pinegrow Blocks
  • Custom Bootstrap Studio Blocks
  • Custom PInegrow Blocks

I have broken down the CSS into

  • Pine.css
  • Studio.css
  • Custom.css

This means when I open my template I have access to all my blocks in PInegrow and I can quickly take advantage of the excellent features of Pinegrow, such as “blocks options”.

I know some may have an issue with all the “bloat” which is basically a few kb but you can clean this up when you complete a project, but trust me, it’s worth doing this if you want to focus on design when starting a blank project, as sometimes you need to experiment quickly with different layouts.

1 Like
#2

One further tip, is when I build a website, I create an additional page called “blocks.html” I then build individual blocks for that website on a single page, saving each block as a “html snippet”, allowing me to drop the snippets onto any page with all css applied.

1 Like
#3

So where is The The Ultimate Block Kit at?? where is the download??

1 Like
#4

@Eric I like your posts

What type of blocks would interest you?

1 Like
#5

Well you said something about The The Ultimate Block Kit and i was wondering where is the download for it at?

#6

I put together the Ultimate Block Kit for my projects, because I’m currently working on more projects than I should have taken on, however Pinegrow and my block kit allows me to build multiple websites, focusing on the design, instead of worrying about the code, because I’ve already done all the hard work putting together blocks.

The Pinegrow blocks included are also perfect to break up sections, allowing me to quickly try new layouts, so what I’m saying to you @Eric, have a go at building your own block kit because once you learn how to build your own blocks (or snippets) you take full advantage of Pinegrow and the powerful features, making it the best front end development software on the market.

#7

thanks jack for the info

#8

if you ever see a layout/block and want something similar, post a link here of the website and I will build the block from scratch using bootstrap or foundation, just to get you started if you’re struggling to get to grips with pinegrow and building blocks.

I actually have plans to build a bootstrap starter kit once bootstrap 4 is released with Pinegrow, which will include Footers, Headers, content blocks etc because while the current starter kit is excellent, its more aimed at designers/developers.

1 Like
#9

Hi Jack,

long stalked your thread here and while I admire your diligence and commitment, I have a slightly different attitude.

My thread would have been named “The Ultimate Block - Yeah” because I think in fact, all you need is one.

But it certainly needs to be highly adjustable within seconds for all the specific content requirements. And those requirements are various, literally. It’s a bit like music: Whenever you think you heard all - a new song is coming up and it will be different to all the billions before.

But hey - isn’t it (one of) the framework offering this flexibility? Not for me, I don’t use em - therefore I created my own. And I’m close to the “One block - the Ultimate”.

Cheers

Thomas

Just to prevent myself from questions:

No it’s not to download and if - it’ll be paid (video screencasts on how to handle and some more background infos included). Cause I think good work should be honored. And I’m, as well as Jack after knowledge and solutions. Not canned stuff.

2 Likes
#10

Thanks for the words Thomas and respect for building your own framework.

I feel the same. Why should people work hard to produce something for others to just take, without a simple thank you half the time? I can think of one reason, drive traffic to your website by offering “the ultimate block kit” or “the ultimate framework” for free - as-long as you benefit in some way.

#11

This can actually be substantial and in addition to the pay it back/forward mindset of Open Source, this can offer many unforeseen benefits to a developer.

I have yet to re-find it and will post the article here if I do. But I once came across a developer whom showed the vast benefits he was rewarded with by doing this. If I recall he first offered his framework/plugin for a small price, made some money. But then open sourced it or offered for free and the benefits and success listed after were staggering in every regard.

I know it may not be an idea that some people consider or desire, but it can have many unforeseen benefits. Another popular option in similar regard is offering a free version and then payed version(s) with further and worthy benefits to users, this too can provide similar benefits to the developer as well.

Sometimes, this kind of traffic and industry awareness can be priceless.

1 Like
#12

Its true @Pinegrow_User, open source, offering your product for free, could make you a rich man! You only need to look at open source as an example or moving slightly off topic, Facebook and Twitter.

People love a freebie (all of us do) and I know if I built a quality bootstrap block kit and offered it for free, I would drive traffic (and I mean traffic) to my website but I need to look into this more, so if you find the article please post as it’s always interesting to read such articles.

#13

sure thing jack. show me everything you know. I am having a bit oof hard time getting the grips of PG. And i thank you for all your effort guidance. here is one but it is a demo site http://demo.graygrids.com/#smartext from https://graygrids.com/item/smartext-responsive-html-site-template/ if all possible could you include some notes with step by step. When i finally get this all down I’m going to credit you jack for being my teacher! Thank you again my friend for your wisdom and knowledge

1 Like
#14

Hey Eric, I hear you’re looking for a teacher? Jack Clarity is here my friend :grinning:

The old Jack would have visually been able to build these blocks, however he would have shown you his bad habits, such as terrible CSS class naming & overuse of CSS classes. After starting work on my first big project, I quickly learnt I had to learn the correct way to develop and style websites, as you can get away with bad CSS practice on smaller projects, but you will get found out on bigger projects, unless you do things correctly and I now focus on using the correct CSS selectors, combing CSS classes and while I’m no guru, I am going to teach you how to build similar blocks in Pinegrow and I’ll upload a video.

1 Like
#15

@Eric I’ll give you a shout when I’ve put together one of the blocks, but they won’t be exact as I’m not going to copy them, however all block kits are very similar, so i’ll do a header, content thumbnail row, image gallery (with hover), a contact form and a subscribe to newsletter.

This will actually be good practice for me, as I have plans to build a professional block kit.

1 Like
#16

That’s awesome Jack you are the Man. I am looking forward to seeing your video, I can’t wait. Holla at me when you’re video is ready for viewing. Again thank you Jack "The Man":grin::+1:

1 Like
#17

No worries @Eric. Give me a couple of weeks and I’ll run through the entire process from scratch of building a bootstrap block in Pinegrow.

1 Like
#18

@Eric here is a taster of what to expect from my videos, I’ll show how easy it is to:

  • Build professional blocks
  • Customise Bootstrap
  • Create custom stylesheets and classes
  • Use snippets to save time
  • Style your pages and change the default section/header tags, saving time when you drop these into your page
1 Like
#19

@Jack_Clarity that was awesome! thank you Jack can’t wait to see the whole thing!!! i didn’t even know you could make an overly

1 Like
#21

No worries @Eric it’s just understanding why you’re using a div, so you can apply css and create an overlay.

But i’ll explain that in detail when I upload videos with text and transitions, so you actually learn how to build your own blocks.

1 Like