search

mosra / m.css

A no-nonsense, no-JavaScript CSS framework, site and documentation theme for content-oriented websites
https://mcss.mosra.cz
Other
406 stars 92 forks source link

rows, columns, tables, oh MY! #245

Closed egberts closed 3 months ago

egberts commented 3 months ago

Firstly, thank you for the awesome m.css, it is used as a website over at my website, egbert.net.

Secondly, you and your work are awesome.

Where do we currently stand on tables, CSS and all?

I mean, I've been using Pelican's jtable markup instead of the patched PythonMarkdown | col1 | col2 | col3 approach.

mosra commented 3 months ago

Hi, thanks for the thanks!

Remind me, are you using reStructuredText or Markdown? I remember we were discussing tables briefly in https://github.com/mosra/m.css/issues/220, but seems like no conclusion was reached.

Personally I'm using the reST "simple" table syntax if possible, i.e. the second variant shown here: https://docutils.sourceforge.io/docs/user/rst/quickref.html#tables (Or see the snippet in the m.css docs.) The first variant works also although for me that's quite a lot of extra typing for little gain, so I don't use it much.

I have no idea what syntax Markdown uses and the whole Markdown syntax "ecosystem" feels extremely chaotic, ad-hoc and with no clear design direction to me. So I'm afraid I can't really help there, sorry.

For a real-world example of the reST table, see https://github.com/mosra/magnum-website/blob/6059f5ca26dfe5bb5f19101a6ccd395b79ea2c5c/content/blog/backstage/lightweight-stl-compatible-unique-pointer.rst?plain=1#L426-L435 (and the live version is at https://blog.magnum.graphics/backstage/lightweight-stl-compatible-unique-pointer/#take-it-it-s-just-a-single-file). Most important part is slapping the m-table CSS class on it, it's not done by m.css by default (because I'd need to derive/patch the docutils table directive or something, which feels quite brittle, etc.).

Regarding CSS styling, there's quite a lot including coloring individual rows or cells (see the m.css documentation for tables), although not much is achievable with the reST syntax. I don't need those extra features much in practice, but if I do, I simply create the table with pure HTML and then include it with the .. raw:: directive. Such a case is for example at https://magnum.graphics/build-status/ (source is at https://github.com/mosra/magnum-website/blob/master/content/build-status.rst?plain=1 and https://github.com/mosra/magnum-website/blob/master/content/build-status.html).