Modular CSS Layout - snippets for wide views, multi column and gallery

Overview

What is this snippet all about?

Modular CSS Layout (MCL) is a CSS snippets collection that are meant to provide a useful layout options as a complement to the default theme or your chosen community theme. It uses Obsidian’s default CSS classes and HTML structure to achieve the intended layout (I don’t intend to do any color-theme changes)

Do log issues in MCL github repo (link below) if you encounter any compatibility issues with your theme.

How to get started?

Since this is actually just a CSS snippets collection, it isn’t an installation per se, but rather download and enable in Obsidian. As I might update this snippets from time to time, the best way is to use Mara Li’s Snippet Downloader. Anyhow, you can read through documentation on how to do so (link below)

Download the snippets here

Documentation/How to here

Features / Modules

Wide Views

CSS snippet: MCL Wide Views.css

This snippet provides you the following features:

  • Full width page or blocks (dataview, table and backlinks) per page/note basis by specifying custom cssClass at the frontmatter (YAML)
    • wide-page
    • wide-dataview – require Contextual Typography plugin
    • wide-table – require Contextual Typography plugin
    • wide-backlinks
  • Narrow width page per page/note basis for vault with RLL disabled by specifying custom cssClass at the frontmatter (YAML)
    • narrow-page
  • Adjustable RLL (custom css class toggle) applicable to entire vault
    • Disabled by default. Enable it via Style Settings plugin

For wide-dataview and wide-table, you will need to install Contextual Typography plugin.

Example & Screenshot

---
cssClass: wide-page
---

<the rest of your note>

screenshot for wide-page and wide-table

Multi Column

CSS snippet: MCL Multi Column.css

This snippet provides you the following features:

  • Multi column layout using Callout using the following custom data-callout
    • > [!multi-column]
    • > [!blank-container]
  • Allow you to control the width of the sub-callout using custom callout-metadata
    • > [!<anycallout>|<wide-3|wide-2>] for flexibly increase relative width, and
    • > [!<anycallout>|min-0] to remove mininum width for multi-column sub-callout (default: 200px)
  • Multi column layout using (Unordered) List
    • Via custom cssClass at the frontmatter. But note that this will apply to all list in that note
      • two-column-list
      • three-column-list
      • two-column-grid-list
      • three-column-grid-list
    • Using Markdown Attributes plugin but able to apply at block level (inside your note)
      • multi-column-list-block – require Markdown Attributes plugin
  • Side / Floating Column using Callout
    • > [!<anycallout>|<left|right>-<small|medium|large>]
    • > [!blank-container||<left|right>-<small|medium|large>]

<anycallout> refers to any of the standard (or even your own custom) callout e.g. note, tldr, quote

Example and Screenshot

for multi-column callout

> [!multi-column]
> 
>> [!Summary|wide-3 min-0]+ Using callout-metadata `wide-3 min-0`
>> #### How to achieve this?
>> specify the sub callout as `> [!Summary|wide-3 min-0]`
>> - this callout width is 3/6 overall width
>
>> [!warning|wide-2 min-0]+  `wide-2 min-0`
>> #### header
>> - this callout is 2/6
>
>> [!summary|min-0]+ `min-0`
>> #### header
>> - this callout is 1/6

note that when you insert callout within callout, the line separating the callouts should only use single angle bracket (“>”)

for multi-column list

#### Type of Graphics (Plot)
- [Bar chart](https://en.wikipedia.org/wiki/Bar_chart "Bar chart")
- [Biplot](https://en.wikipedia.org/wiki/Biplot "Biplot")
- [Box plot](https://en.wikipedia.org/wiki/Box_plot "Box plot")
- [Control chart](https://en.wikipedia.org/wiki/Control_chart "Control chart")
- [Correlogram](https://en.wikipedia.org/wiki/Correlogram "Correlogram")
- [Fan chart](https://en.wikipedia.org/wiki/Fan_chart_(statistics) "Fan chart (statistics)")
- [Forest plot](https://en.wikipedia.org/wiki/Forest_plot "Forest plot")
- [Histogram](https://en.wikipedia.org/wiki/Histogram "Histogram")
- [Pie chart](https://en.wikipedia.org/wiki/Pie_chart "Pie chart")
- [Q–Q plot](https://en.wikipedia.org/wiki/Q%E2%80%93Q_plot "Q–Q plot")
- [Run chart](https://en.wikipedia.org/wiki/Run_chart "Run chart")
- [Scatter plot](https://en.wikipedia.org/wiki/Scatter_plot "Scatter plot")
- [Stem-and-leaf display](https://en.wikipedia.org/wiki/Stem-and-leaf_display "Stem-and-leaf display")
- [Radar chart](https://en.wikipedia.org/wiki/Radar_chart "Radar chart")
- [Violin plot](https://en.wikipedia.org/wiki/Violin_plot "Violin plot")
{ .multi-column-list-block }

screenshot
multi column showcase

Gallery Cards

CSS snippet: MCL Gallery Cards.css

This snippet provides you the following features:

  • Image gallery using callout by specifying the callout-metadata gallery e.g. > [!NOTE|gallery]
    • Transcluded/embedded images will be stacked side by side. Add empty lines in between the images to create new row
  • Image gallery using YAML/frontmatter .cssClass: image-gallery
    • Specify the following frontmatter at the very top of your markdown notes
    • Similar to using callout, transcluded/embedded images will be stacked side by side. Add empty lines in between the images to create new row
  • Dimension control for images in bullet list
    • Enabled by default. To disable, go to Style Settings and under Modular CSS Layout - Gallery Cards > Image and Gallery Settings enable the “Disable Image Control in Lists”
  • Image Zoom
    • Disabled by default. To enable this feature, go to Style Settings and under Modular CSS Layout - Gallery Cards > Image and Gallery Settings enable the “Enable Image Zoom via CSS in Lists”

Example and Screenshot

gallery using callout featuring langkawi

Support Me

I do this on my free time for personal joy. However, a cup of coffee or two would motivate me further! If you like what I do, and want to contribute back, you can support me via Ko-fi

Buy Me a Coffee at ko-fi.com

22 Likes

This is excellent!

1 Like

I am very new to CSS and someone just shared this with me. I am blown away! Thank you for making such a great post!! AND the documentation is great!

2 Likes

Thanks for the Multi Column feature, I really missed it!

Hello @efemkay, thank’s for this amazing snippet collection.

I would like to have cssclass: minimal-float applied on all notes by default, I searched inside your css files in order to see if I could find the code, paste it on a blank .css file and use it as a separate snippet, but I did not found it.

Could you please give some guidance on how to have that by default without having to type cssclass: minimal-float every time?

Thank you :slight_smile:

@ironhak currently there isn’t a way to do so. Mainly because that might interfere with minimal other functions that I haven’t tested. I can consider as an option in future updates

1 Like

Thanks. I would also like to bring to your attention that this function does not work good on the mobile app: it cuts out the last part of the note.