web development  / 

Pushing the limits of Markdown

How to to create more powerful blog post layouts in Kirby CMS — using my ‘hidden hr trick’ — and ‘lobotomized owl’ selectors
Kirby’s Markdown text entry field, with the images listed helpfully alongside

I’m a big fan of writing content directly into the Markdown entry field in Kirby CMS

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

The 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 demonstrates the wide range of page layout and text styling that can be achieved, using just plain Markdown text and one standard KirbyTag

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

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

Precise vertical spacing of text, headings, horizontal rules, and images, can get 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 Heydon Pickering’s super-powerful ‘lobotomized owl’ selectors.

The key Markdown and CSS coding patterns I used

See what can be achieved

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

I encourage you to take a look around my site, and at the sample blog post I’ve linked above. Of course, these Markdown and CSS ‘tricks’ are not as capable as Kirby’s brilliant new Blocks and Layout fields. Nevertheless, I think they offer an easy, ad-hoc way of creating more powerful layouts, without adding friction or complexity to the editing experience.

Let me know what you think!