Kirby frameworks and grids

Hi, Trying to understand what a framwwork is. I understand that Kirby is a framework, but I’d like to know how to layout a page with a framework - I guess it’d be a grid. At the moment I’m positioning stuff using margins, position, top etc., but I don’t think that’s right, could you please advise me what’s the best/easiest way to position elements on a page.

I think you’re mixing things up.

Imho Kirby is a “content management framework”, which has a set of opinionated ways of dealing with content (markdown, folder setup, templates/controllers/models/…). You can combine that with the Kirby Panel to get a “content management system” (aka CMS), which enables you (or your client) to actually “manage” the content via a UI.

Next to that you have to indeed design a frontend which visualizes that content. You do that with HTML/CSS(/JS). For that you could use a framework to help you out (there are a lot of these out in the wild: e.g. Twitter bootstrap/Zurb foundation/tailwindcss/…).

One of the huge benefits when using Kirby is that you’re totally free in choosing which or how you’ld like to do this. One of the downsides is that you have to have knowledge of those front-end technologies for actually building it. When you’re lacking these skills, you could have a look at and see if there’s something which can act as a good “starter” and build from there.

Thanks very much for this, yes you’re right I am a little confused.
Anyway after a bit more googling and looking at Kirbys’ index.css. I think flexbox may be what I’m looking for. Just like to know if flexbox and rem units play well together?

These are usually referred to as CSS frameworks (although they do contain JavaScript).

Some advantages of such frameworks are:

  • fast prototyping
  • helpful when building stuff in a team
  • easy to employ

The downsides:

  • you get a lot of stuff you will probably never need (unless you customize)

Apart from these bigger ones, there also smaller CSS frameworks just to help you build “grids”, for example this one: grid2flex

These all usually work by requiring a HTML structure where you just have to add the relevant classes, and the framework takes care of the rest, i.e. if you are lucky, you don’t have to write one line of CSS.

Well, yes, but rem is a unit, and flexbox is a layout mode, so these are completely different things.

And while flex box is certainly not a bad choice at all for layout because it probably does what you want and has good browser support today, depending on your target group you may also need fallbacks to support older browsers, see Can I use... Support tables for HTML5, CSS3, etc

It sounds to me like you would benefit from taking a course on this stuff. Theres plenty of free “how to make a website” guides out there, but I think from all the questions you are asking, you might benefit more from a longer end to end course that you would get at places like Udemy, Treehouse, Pluralsight or the bundles offered on Stack Social.

Mackenzie Child does some great free videos on front end like these ones. Have a nose around his channel theres more on there.

The problem with learning stuff like this from scratch is that answering one question for your self often throws up 5 more… which is part of the fun but can be frustrating :slight_smile:

And I’m very sorry to have to say it again, but this forum is really not the place to ask HTML/CSS related questions. These question can be answered with a google search or visiting relevant websites.

If you are just creating your first website, as seems to be the case, there is a lot to learn, as modern responsive websites are not that easy to create, there are many things to keep in mind - even without the additional burden of PHP backend stuff. As @jimbobrjames said, it is not usually done with a single question.

I don’t know what you are planning to do, just get a single website out into the world as quickly as possible or if you want to learn this stuff in general. If the latter is the case then learning this stuff from the ground up as I had already suggested in another post is the way to go.

And here’s a nice playful resource to learn flexbox:

Thanks Sonja, I’ll try and stick to Kirby related questions in future.