# Modular CSS Layout for Obsidian This is a repository for modular CSS layout hack for use with [Obsidian.md](https://obsidian.md/). Its meant to complement/assist Community Theme, focusing solely on providing alternative layout to standard width and standard top-bottom block view. I mainly do casual test on select popular themes like ITS, Primary, Shimmering Focus, Prism, and Minimal. Need your help to let me know if theres anything not working right. Do log in [MCL GH Issue](https://github.com/efemkay/obsidian-modular-css-layout/issues) if you find anything not working properly. ### Table of Content - [Install/Download](#installation--download-and-enable) - [Wide Views](#wide-views) - [Multi Column](#multi-column) - [Gallery Cards](#gallery-cards) - [Support Me](#support-me) ## Installation / Download and Enable This is actually just a CSS code snippets collection. So it isnt an installation per se, but rather download and enable in Obsidian. The best way is to use Mara Lis [Snippet Downloader](https://github.com/Mara-Li/obsidian-snippet-downloader) plugin as I have plans to update this snippets from time to time ## Wide Views > CSS snippet: `MCL Wide Views.css` > This section only briefly explains Wide Views snippet. Please go through the documentation site [Wide Views - Modular CSS Layout](https://efemkay.github.io/obsidian-modular-css-layout/wide-views/) for more details. 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-callout` - `wide-backlinks` - vault-wide toggle for each of the above - 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](https://github.com/mgmeyers/obsidian-contextual-typography) plugin. #### Example ```markdown cssClass: wide-page ``` ## Multi Column > CSS snippet: `MCL Multi Column.css` > > This section only briefly explains Multi Column snippet. Please go through the documentation site [Multi Column - Modular CSS Layout](https://efemkay.github.io/obsidian-modular-css-layout/multi-column/) for more details. This snippet provides you the following features: - Multi Column layout using Callout i.e. `> [!multi-column]` - List Column/Grid/Card layout using (Unordered) list by either (a) using tag, (b) using Markdown Attributes plugin, or (c) specifying in the frontmatter (YAML) - Float (Aside) Callout using callout metadata e.g. `> [!info|right-medium]` ### Multi Column Callout Multi Column Callout layout take advantage of Obsidian Callout - leveraging it as parent ādivā to house the sub callout (including Dataview results block). You can nest as many sub-callouts within it. The sub-callout wil
