Rushing through Pinegrow’s interface for newbies
Transcript
So someone asked for a video on running through Pinegrow, I thought a great place to start this is on in other videos but I thought just make a quick five minute 101 video of the Pinegrow interface.
So, what I’m going to do here is just help you get familiar with all of the different components all the different parts and hopefully you’ll be that less daunted when opening up Pinegrow. So, let’s rush through this because it’s boiling right now but, before we do that I just want to remind you there’s a competition, I’m running to win this bad boy, that’s my company logo on a coffee cup um information in the description below good luck.
So, when you open up Pinegrow you’ll see uh you won’t see this many projects because of course you may have opened it the first time but you can see all my projects here but you can also see that you can add a new page or project. If you were to export your Webflow project and you can open it straight away in Pinegrow and start playing around with it like it’s nobody’s business.
You just got to open that project and the files and Pinegrow does the rest really really easy transition what you’re probably going to be doing is creating a new page or project and that’s what we’re going to do right now and then, you’re presented with a list of templates or default kind of setups where bootstrap is automatically included, tailwind is automatic included, angular and various things like that materialize foundation all of these are kind of out the box and there are certain interfaces that work well with these different um tools and libraries.
But, I tend to use plain html and the normalized version is obviously it if you don’t know what normalize is it resets all of the browsers so that if you were to apply no styling they all look the same. So, by opening up this project here you’re likely going to be seeing this window first now this is where all of your html is created if I want an image, drag an image there, if I want to nav, drag it for an h2, drag it…drag and drop baby all day long.
This is where you’re creating all of your html you can also insert custom html. So, if I want to script tag here then, I can do that write custom code script and then just drag that into the page um it also accepts pug now, I don’t know pug but my assumption is that if I do this it creates a div with header if I want a header with it with a class of header then it creates that and I just drag that onto the page this is where all your html is created this next panel here is the file tree of your website now I’ve already created a folder and saved my files but you can see you’ve got a CSS here this is primarily where you just create new files and then you can obviously edit these files and they pop up down here like a lovely bubbly.
So, that’s where your html is created I change it slightly and we’ll get into that but moving on to the top here I don’t tend to zoom in on my page but if you so want to you can do that here, you can also change the the actual layout itself make it larger make it smaller here, um I don’t tend to touch that layout thing or edit inline text this I use quite a lot that if I have a button that triggers say some JavaScript. If I was to click on that button for instance it would just select that button okay well what if I want to actually trigger the JavaScript then I can click that and I’ll actually receive that click event so that’s quite handy there.
This is to open up the code at the bottom as you can see, I can then just write some code here now what I just used there was emit, emit allows you to write really short um snippets of code and it works on what you’re trying to write here it works in CSS as well, I believe but how you get that is if we go to support and settings but you can use emmet in the code editor there. So, this is no code so let’s not worry about that right now um.
We can turn on JavaScript and you’ll need to turn on JavaScript when you use interactions and I’ve got videos on interactions refreshing the page opening the page in a browser pretty self-explanatory here this is opening up a new page so, I can have my mobile and my desktop side by side super handy that.
Next along the line we’ve got the multiplier now if I want if we go back to the html element here and I wanted say six list items I can press the number six drag my list items and it will create six list items on there super handy little shortcut that but that just lets you know which number multiplier you’re on and I just use the numbers so nice little indicator there. Um never use the hide panels but if you wanted a cleaner look you can do that. And I never normally use focus mode I always accidentally trigger it don’t want to speak about it right now because I can’t explain it but that’s what it is anyway.
Jumping over to the right hand side and this is where you’re going to be spending a lot of your time as well this first one here this activates a theme which is great because then you can start to set some default styles on some of the most basic elements you’re basically creating a style system now I have never used this.
This is kind of like html properties so again if I go on to well actually if I just click my heading then I get all of the um html attributes that you would expect for a heading id name title and you can even add your own um data attributes or whatever it is you want.
Next, along is the class styles so this is when there’s a tailwind project so um or a bootstrap project uh you’ll notice this populated with all the default bootstrap or tailwind styles which then you can you can adjust kind of like this but for bootstrap.
Next, this is where a lot of your time is going to be spent right this is where all of the CSS styles exist um they are named according to their CSS property. Now Webflow, they will name things for your convenience for instance they name it font color well color font color in CSS is just color and you’ll see that there but it’s under the font grouping here so you haven’t got to worry too much about it but click through these you’ve just got I’d implore you to explore you’ve got all the CSS properties that you can apply to any of your elements.
So, with that being said we’ve got our h2 selected here and I can start to build my CSS properties here and then you can see they get added to inline styles there we don’t like inline styles but they can be very very handy sometimes. What you might probably want to do if I delete that is start by creating a class so heading one as a two but whatever and then create that style asking me to create a CSS file and now I can add properties to this CSS class now, if I wanted to bend it up and go heading 1 red create that style here then again there’s the heading one and there’s here is the modifier class, go ahead and let’s just change the color to red and you can see these styles sort of building up here on the right hand side.
You can also select your selectors…select your selectors…select your selectors here by clicking on these and then create that and then you’ve got your selector there.
But, one thing we didn’t go over which I thought could be helpful were a day later by the way and I’m recording this um is media queries so I thought I’d just quickly demonstrate media queries so if we quickly it’s a little bit bigger if we drag in a section here and on the style panel we can we can start to add media queries uh if we wanted to my section add a new section here in fact actually we’re going to create it we can add media queries here…um and we can type it all out or whatever or you can manage your breakpoints up here and you can kind of create your own breakpoints now it prompts you to add the meta viewport which is necessary for media crews to work and then you can kind of add your break point.
So, if we have this as 20 10 24 pixels close that then when we create our class here we can add a media query and then we can say, smaller than 1024, larger than 1024 ,and that’s it or similarly you can create the class and you can create all of your styles so this might be a quite common workflow um and then you can add that to the media query down there and then what you’ll see is that if we make the window smaller that clark that styling will actually disappear because it’s not being applied and then you get to see that styling then applied there so that’s media queries in Pinegrow.
One thing I like to do though is actually convert my CSS to SAS and you can do that here good thing about sas is that you get auto prefix styles that aren’t available in certain browsers.
Moving along this is where your interactions exist and I’ve got plenty of videos on interaction so I implore you to go and visit some of those videos but this is where all your interactions are created here. Now this next one is my document tree this is my dom taken from Webflow I actually prefer this to be down here and that’s where you’ll probably become more familiar with the the sort of interface um..
I like this one just because my html stuff is kind of on the left hand side here and then my styles and JavaScript’s are on the right hand side that’s kind of why I move it there but it’s as you would expect you can select elements like this, select elements like this, if I was adding elements i can go here and drag them down here oftentimes what I like to do is right click insert and then select the appropriate element there so that’s uh that’s that’s how I tend to build my my html.
On from interactions then this is where your components are and it’s pretty self-explanatory I’m sure you can create components you can reuse components you can build master templates for certain files and you do all that in the components panel and I..I you know go and play go and play with them there’s some really powerful things you can do you can allow things to be repeated, you can allow things to be editable um really really powerful component um interface there now Pinegrow is a very very powerful WordPress theme creator um..
I’ve got a video on how I just had no intentions I just jumped in and started creating a theme and I was able to create a theme very very quickly so really enjoy their…their ability to create WordPress themes this is where it lives there.
Now, I turn some of these off in the workspace uh where is it show high panels I tend to hide some of those I don’t care about the WordPress one of course when I’m not using a WordPress theme or anything like that but you can kind of customize them there. Other aspects potentially could be if you want to bring in some libraries under file you’ve got libraries and plugins here again you can, you can..you can bring in foundation if you didn’t choose it from the beginning.
And, I think that’s it, that’s..I don’t know how long that was but I tried to get through it as quickly as possible, as a quick primer to the Pinegrow interface, if you want me to elaborate on any specific thing we touched on here then leave a comment below um.
If you see something that someone’s already suggested that they want a video on like that comment so if you’re learning Pinegrow and want to learn from me then hit the subscribe button. I’ll be so happy to have you in here if you want to join my discord and ask me questions on there, then I’ll leave a link below to that.
So, feel free to join the discord and I think that’s everything it’s so hot in here I’m gonna go jump in a bath of raisins thanks for sticking around and I’ll see you in the next one. Happy building the future of the web.