Pushing the limits of Kirby’s Markdown field

, ,
1

I’m a big fan of writing, and compiling, content directly within Kirby’s original Markdown entry field.

With everything in plain text, and thumbnails helpfully displayed in the image field alongside in the control panel — for me it’s still the best, and lowest-friction workflow — for both spontaneous blog posts, and long-form articles alike.

The big downsides of this Markdown field, lie in its limited layout options. So I’ve spent a lot of time experimenting with CSS for the classes set in Kirby’s image KirbyTag , and I’ve come up with a few ideas to extend the capability of this simple text field.

My recently updated Sample blog post is a demonstration of the wide range of layout and styling that can be achieved, using just plain Markdown text and one standard KirbyTag, at https://www.brianliddell.com/blog/a-sample-post-with-everything-in-it

My CSS is messy, but it works. The two areas I struggled with most were:

  1. Horizontal spacing and sizing of images. I got this to work with percentage widths, but it needed horrible positioning hacks for my ‘image rows’. Also, printing pages with percentage widths is still full of bugs in all the browsers I tested. So, I resorted to old-fashioned pixel widths, margins, and floats — for everything— plus a ‘hidden hr’ trick for image rows.

  2. Precise vertical spacing of text and headings, alongside floated images, gets surprisingly complex. My CSS relies on using margin-top for ALL vertical spacing. This is the ONLY way to control vertical spacing between specific combinations of headings, images, and text — using the super-powerful ‘adjacent sibling’ * + * selector.

I’m very enthusiastic about using Markdown for the sort of writing I do, and the varied layouts I wanted.

I encourage you to take a look at the Sample blog post I’ve linked above. It’s not as capable as Kirby’s latest Blocks and Layout fields.

But, I think it offers a powerful way of improving user-compiled layouts, without adding friction or complexity to the edit field.

Let me know what you think!

2 Likes
2

Hi @brianliddell, thanks for sharing! I, too, love to stick with markdown wherever possible (for my own stuff; the new blocks and layouts are gold for client projects) and it’s fun to see the results of your tinkering. I may copy an idea or two for my own use :wink:

Special thanks for this titbit:

After several months of using Markdown in Kirby, I’ve only just discovered that there are two possible list spacings available in its syntax

…that’s such a great feature and I wasn’t aware of it either!

Best,
// Sebastian (a fellow Brompton tourist)

3

That’s great! Thanks for sharing your thoughts.

In addition to the list spacing I also find the --- / <hr> solution for image rows very interesting. I did something similar once with a row wrapper element but didn’t think of using a <hr> and hiding it via the adjacent sibling selector :exploding_head:

4

Thanks @sebastiangreger and @thguenther for your feedback!

I’m at an early stage in blogging (“what’s the point of writing, when no one will read it”), so it’s highly motivating to hear that you found my ideas useful.

— Brian Liddell