Building your own blocks

I haven’t decided if Jack or Jaffy will do the video but at the moment Blueman is preventing me from uploading as Blueman (linux bluetooth manager) doesn’t like my bluetooth headset - I sound like I’m talking from underwater!

Firstly - I have travelled the world and I’m not blonde but I’m afraid I had a man-bimbo moment and confused Budapest with Bucharest…although it appears I’m in good company:

You will see why I’ve mentioned this when you watch my video!

No sound as I only have my chromebook with me (hooked up to the tv via HDMI) and car is off the road and as much as I enjoy walking, I can’t be bothered going into town to buy a plug-in headset. However it’s uploaded in full HD.

Anyway, what I’ve done is created a video showing how I put together the fancy footer, I went through the whole process from scratch visually copying my previous effort and didn’t pause the video or try be perfect, it just shows all the steps and creating css classes for a new stylesheet attached for a mock up bootstrap block.

Remember - I’m not a professional, i’ve had no professional training, followed no html/css courses, so if anyone is watching and has any issues with how I put together my blocks & css classes then please give feedback as would be interesting for myself also as i’m still learning.

When I design my blocks I usually design them for laptop resolution and then adjust, so if you decide to design blocks similar to myself then you have to make adjustments, such as media query for various screen size and adjust the bootstrap layout, testing the block for all screen sizes and making sure the column layout is correct for all screen sizes.

If people are interested after watching my video then in future I will show further videos (with sound!) and show the entire process of adjusting for screen sizes and making a perfect bootstrap website with custom blocks that works on every screen size.

:sunglasses:

2 Likes

I recall the developers mentioning they don’t like to hype themselves up (or their product) so just for a laugh, just to add some humour to my YouTube description - I’ve updated the description

Using Pinegrow to build a mock-up bootstrap block in roughly 30 minutes with no html knowledge needed, just basic understanding of css and the bootstrap framework.#

£100 chromebook running linux, 2gb memory and CPU running high.

Drinking my favourite coffee and designing bootstrap blocks like the professionals just to show the power of PInegrow.

If you’re prepared to learn CSS/Bootstrap and have a creative mind, you can design websites of the highest standard and remember this is a “mockup” done in 30 minutes - just imagine what I can do in double/triple that time :slight_smile:

1 Like

Congrats.

I think this concept, would be a worthwhile endeavor and resource for Pinegrow users and people researching and considering the app. It will also help you think though and develop your own processes further and improve your own skills, while helping others to learn with you as you share your efforts along the way.

It certainly can’t hurt Pinegrow to have more resources for the community and exposure in general.

1 Like

It depends on what people hope to learn - you can see from the video nothing is particularly complicated but everything looks easy once you know how, right?

Many believe design is easy but again its only easy if you have a creative mind and my process works, as I design my way rather then teach from a book or script. I can select colour schemes just because I know the correct flow, I just know what works and doesn’t work.

Also if anyone says “bootstrap websites all look the same” possibly because everyone designs the same way. You can do whatever you like within a block. Virtually every bootstrap website starts with a big photograph, because designers think they have to follow trends, but bootstrap is just a framework, you can be as creative as you want, bootstrap isn’t going to restrict you.

Anyway…watch out for my next video:

$50 Pinegrow / $200 Chromebook / Linux Vs Dreamweaver / $3000 Applemac / Mac OS

:laughing:

So, as you can see, there is the big photograph (to keep everyone happy) but multiple CSS shapes and then depending on the content I use for the video, I’ll show how you can create something different, something original and be in complete control over the block you’re designing, rather then use a generic looking template.

(couldn’t resist) I love working with CSS shapes.

Overall:

This has been the general common trend of most sites across the web for really the last 4-5 years (if not further), just sections / blocks of content stacked down the page. Not really surprising, mostly due to responsive layouts/frameworks, general standards of adopted common usability, etc.,

Where and when things go from here, well time will tell when the masses decide to follow a new trend. There are certain things still lagging in browser support (looking at you IE/Edge, etc.,) as well. So that will also play a role as people seek to push what can be done across browsers and platforms without the fear of compatibility.

That is the challenge for designers as I know many don’t care much for design, focus on “call to action”, but this doesn’t mean your website can’t be different, original and also effective.

I was reading up on CSS shapes and browser compatibility - I tested the above example on Firefox/Chrome and Opera without any problems as I’m not trying to flow text around the shape

As far as I know IE has an issue with rounded borders from IE8 and earlier? but I will test the above example on Edge and see what the result is, but regardless of the result, its nice to be get creative rather than create another “hello world” block!

1 Like

Somehow I feel like your responses to my last two comments, that perhaps you have missed my points or intentions. EDIT: Or perhaps, I am. :wink:

I am still going through and reading the new posts but I wanted to ask if it is possible to export these blocks out as a plugin and then just load and activate them on whatever page you want? If you can then why do we need the plugin Leo is creating? I am still not understanding the process I guess.

Say you had 10 websites and for each website there was 3-4 blocks you wanted to save as smart components, you could save them as smart components ready for future projects.

You then start a new project and you want access to all them blocks, you would need to load each “project” as a library, so you may have 10 projects loaded which will add your saved smart components to the panel.

Leo’s plug-in means you can save as many sections as you want, to one template and his plug-in means you can load all your sections within one plug-in which is similar to having one user library.

But no you don’t need Leo’s plug-in, it’s just an additional way of using your own blocks and I think Leo’s plug-in would be excellent for selling a template that is broken down into sections - a customer can then load up the template/plug-in within PInegrow and drop blocks into a page and build their own site.

With Pinegrow, you can activate any of your saved smart components on whatever page you wish, just IMO it becomes cumbersome when you have multiple projects and sections spread across multiple websites.

http://docs.pinegrow.com/editing/kelvin-pine-a-free-personal-resume-bootstrap-theme <<< this is the free plugin which uses a template and you can also easily modify it to your requirments, hope you have seen this template as well by Kelvin Pine.

Thank You!
LEO

1 Like

@Jack can you redo the video you put up with audio describing what you are doing and why you are doing it? I can’t follow along without description of what and why you are doing something. Thanks.

I am beginning to understand now what the plugin is about. I thought you could just create the components and put them into the library but it seems the components section is a separate segment of the program. I could I guess copy the code and put them into the library and it gets saved in the users library or from what I read you can export into plugin and load and activate the plugin on your page and it will show up in the library or “LIB” section.

I haven’t had a lot of time to do much yet but here soon I am going to really get into power user mode and figure out my work flow with Pinegrow.

Terry that is my plan so I will update with further videos and also show how I save a smart component and activate within an existing website.

@Jack,

Done yet? :wink:

Come on, get to it… I want to see your work flow with narration of what and why your doing what you do. Chop chop…

1 Like

@Jack no excuses, it’s the weekend and I’m sure you have no plans

1 Like

Terry won’t be happy but another Video (no sound) showing the basics of creating your own carousel. Nothing complicated, just the simple steps to styling the carousel, preparing it for when you decide to customise to a higher standard.

You will also notice the carousel description/div needs to be adjusted so they are responsive on smaller devices, but I just wanted to show how to get started with the basics.

https://youtu.be/VnRpCZJPDxM

1 Like