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:
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.
Precise vertical spacing of text and headings, alongside floated images, gets surprisingly complex. My CSS relies on using
margin-topfor 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!