How to structure snippets properly and problem with projects list (rookie level, coming from Webflow)

Kirby 3 Solved ✅
1

Hi there,

I’m trying to set up my first project with Kirby using Webflow as a starting point for the basic html/css structure. I’m a designer and completely new to PHP, so forgive me…

I’ve been following along parts of the tutorial video "Kirby 3: How to build a website from scratch“ and have managed to structure my content and build basic templates with snippets, but:

  1. I’m confused about how to use snippets properly, fe I have a page wrapper around everything (set to relative) to stick my footer to the bottom (absolute), but now the opening tag is in the navigation, the closing tag in the footer. And this probably isn’t how it works, right? (screenshots below)

  2. I’ve trouble setting up the projects list or better, I get the list to show, but somehow it makes my footer shift to left. Any ideas where I could search for the problem?

And generally: I’m determined to get into it (PHP book on the way), and of course I’m reading the docs etc., but I miss some more examples or maybe best practices. Any recommendations where to look for those? Is the Starterkit somewhere up and running btw, so I could have a look at the code there and try to learn from there?

Many thanks!
Carola

Footer with everything shifted left, works when ul isn’t in there.

Bildschirmfoto 2020-07-16 um 11.28.12
Bildschirmfoto 2020-07-16 um 11.28.121665×729 21.6 KB

And the code:
for some reason the system won’t let me put it here…

2

Bildschirmfoto 2020-07-16 um 11.41.12
Bildschirmfoto 2020-07-16 um 11.41.121178×1026 84 KB

3

  1. Don’t use snippets if you don’t need them. I always start with templates first, and as soon as I discover I have parts that need to be reused in other templates (usual suspects are <head>, navigation(s), …), I move them to a snippet.

  2. Layout shifts are usually a CSS problem.

  3. You can download the starterkit and run it on your own computer to play around with (or break it).

4

  1. I used snippets for header, navi and footer (visible in the screenshot of the projects.php) so far, usually things that get reused and in my case will be reused

  2. CSS works completely fine until I insert the suggested PHP for the projects list/gallery from the mentioned tutorial, that’s why I can’t see the connection to the CSS here.

  3. I’m aware of that and did download it of course, nevertheless I thought it would be very useful (since there is only one starterkit), if Kirby would have it hosted somewhere as a reference. It was just a thought, as with other systems it’s easy to learn that way.

5
  1. :+1:
  2. Then most probably the HTML gets mixed up (missing tag?). Check the output in the browser’s devtools and see if it outputs as expected. If not, find out why PHP messes things in the HTML up and fix it.
  3. Even if it would be hosted somewhere, you would only be able to “look” at it and not “play” with it. Imho it’s the playing part that actually will learn you something!
6

  1. okay, I’ll try to look at it again, although the html comes directly out of Webflow and really everything works until the php comes in. What about the page wrapper? Is this a normal way to put the start and end tag in different snippets or could you suggest a better method?

  2. maybe I try to put it differently: you are right, messing around maybe is more helpful, but for me as a non dev, I would wish for more visual examples and it would help me if I could compare the code in the starterkit just easily with the visual example, maybe even with more common structures, at the same time having my own project open in Mamp, I think it would just be super helpful.
    Working with Webflow I enjoy looking at examples and code from others fe when it comes to interactions and just learn from it. But everyone is different;-)

Thanks!

7

PS to 3. okay, I think I got it now: I didn’t know so far how to run different projects in MAMP… :see_no_evil:
Now I know…

8

  1. If you cannot put the start and end tag in the same snippet, you’ve most probably don’t have a good “reusable component” and you should figure out what part is actually reusable. My snippets are always “selfcontained”. E.g. instead of making your entire “header” a component, it might be more interesting to break it down into a few parts (== snippets) if you need flexibility for these parts in some templates. Or, you could even use snippets in snippets if want to keep your templates “clean”…

  2. TBH I don’t think Kirby is a fit for “non-devs”… If you want to build things with Kirby, you’ll have to dive into at least some code and have some basic knowledge of how things work (HTML/CSS/PHP). It’s not a click-and-clack website builder like wix, webflow or squarespace… Imho it offers far more flexibility and power over the output, but it comes at the cost of having to code a bit more. On the other hand; Kirby is a very approachable CMS which is often liked by more “technical designers” who are not afraid to dive into some code. And once you got the basics up, you’ll find you have a really good foundation to work from.

9

Hey @neongrau, welcome to our forum!

We have seen a lot of non-devs here becoming very proficient Kirby devs, so please don’t feel put off. At the beginning, the learning curve might be a bit steep, but we are always here to help.

I haven’t really been able to follow the discussion, so not sure where to best hook in.

As regards snippets, I don’t really agree that their only purpose is to have reusable components. It often helps to move stuff to snippets to create easier to handle chunks of code. The header and footer in the Starterkit are good examples of code that is not self-contained.

Don’t hesitate to ask your questions anytime you get stuck.

1 Like
10

Hi @texnixe,

thanks for the welcome!

So far, my main questions aren’t solved yet, I’ll try to say it differently again:

Snippets: my main problem here was that, in order to make my footer stick to the bottom of the page all the time (even if the content isn’t enough to push it down), I used a page wrapper (set to relative and min height 100vh) to be able to set the footer to absolute. But when I now divide my code into snippets, the opening and ending tags of that wrapper would, as far as I understand it now, be in different snippets. That doesn’t seem a good solution to me, right? So, is there a workaround/best practice or just another good way to make my footer stick to the bottom?

And the 2. question is actually still at the same level as in the original post. If you have another idea why this happens, please let me know. Webflow has some basic structures and CSS that comes with it, but since the php goes into it’s own section, I don’t understand how it can possibly affect the footer? Any ideas?

And are my questions more clear now?

11

It depends. Since the opening body tag is usually in the header and the closing body tag in the footer, an additional opening and closing tag right after the opening body / before the closing body tag for a page wrapper in header and footer would be ok, I think. And personally, I do it this way. Apart from in the header and footer, however, I’d try to avoid separating opening and closing tags, and maybe only move the inner stuff into a snippet.

Not really, at least not without looking at the code/styles. I’ll give you more rights, so that you can post code here. Or is the site already online somewhere?

12

If it’s good enough for you, it’s certainly good enough for me :wink:
I just wanted to learn it right from the beginning, because once you have established routines…

Not yet, but I’ll post the code: only the projects.php or also the css files? (sorry it took me so long to answer, I actually tried to upload the project, but I’m having FTP issues…)

13

Don’t worry!

Since this seems to be a styles issue rather than an HTML thing, it would be good to have both the HTML and the CSS.

15

If you want, you can upload the zipped files somewhere and send me a PM

16

Already on it :slight_smile: It was way to much css… I’ll put it in Dropbox and send you the share-link, okay? And btw I’m not in a hurry, you don’t have to work in the evening for me now…

17

Yep, perfect.