efemkay · JonathanBaby · Feb 7, 2026
diff --git a/MCL Gallery Cards.css b/MCL Gallery Cards.css
@@ -25,7 +25,7 @@
 	This snippet is part of MCL collection of snippets for customising layout, and it provides the following
 	- "gallery" callout-metadata i.e. [!<any-callout>|gallery] for flex/grid layout
 		- use together with MCL Multi Column [!blank-container] for invisible container
-	- YAML `cssClass: image-gallery` to achieve similar to callout but using only Contextual Typography plugin & <p>
+	- YAML `cssclasses: image-gallery` to achieve similar to callout but using only Contextual Typography plugin & <p>
 	- Image Zoom via css
 	- Dimension control for images in lists <ul>
 

diff --git a/MCL Multi Column.css b/MCL Multi Column.css
@@ -43,13 +43,13 @@
 
 	What is this snippet for?
 	- to allow Obsidian users to change the layout with preset css by just specifying
-	  the cssClass in the frontmatter (YAML) or naming the Callout block
-	- available cssClass
-		- cssClass: two-column-list
-		- cssClass: {.two-column-list-block}
-		- cssClass: three-column-list
-		- cssClass: {.three-column-list-block}
-		- cssClass: multi-column-list
+	  the cssclasses in the frontmatter (YAML) or naming the Callout block
+	- available cssclasses
+		- cssclasses: two-column-list
+		- cssclasses: {.two-column-list-block}
+		- cssclasses: three-column-list
+		- cssclasses: {.three-column-list-block}
+		- cssclasses: multi-column-list
 	- available Callout format
 		- [!multi-column]
 		- [!blank] / [!blank-container]
@@ -384,7 +384,7 @@ body{
 	/* -- Special Adjustment for Themes -- */
 
 		/* Minimal. Minimal Float. Updated for Minimal V7.4.7 */
-		/* "Reset" the default "cm-sizer" width but respect Minimal Settings, and require cssclass ".minimal-float" as Minimal own wide table will not work together with float i.e. removing :not(:has(table)) from .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)) */
+		/* "Reset" the default "cm-sizer" width but respect Minimal Settings, and require cssclasses ".minimal-float" as Minimal own wide table will not work together with float i.e. removing :not(:has(table)) from .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)) */
 		.minimal-float.markdown-source-view.mod-cm6 {
 			.cm-sizer {
 				max-width: var(--max-width); width: var(--line-width);
@@ -422,7 +422,7 @@ body{
 
 
 /* === List Column ===*/
-	/* supported for (1) css :has(), (2) yaml cssclass, (3) CT plugin, and (4) MA plugin
+	/* supported for (1) css :has(), (2) yaml cssclasses, (3) CT plugin, and (4) MA plugin
 		- CSS :has() can be applied to sublists, so no column rule. CT plugin apply to div that houses the ul, so column gap is different
 		- xx-column-list for first level only list, but apply anywhere but xx-column-list-block apply at block level. Both require JV's Markdown Attributes plugin
 	*/
@@ -436,7 +436,7 @@ body{
 		.cm-s-obsidian .HyperMD-list-line span[class*="mcl"] {background-color: var(--background-primary) !important; color: var(--text-faint); font-size: 0.9rem; }
 
 
-	/* -- List Column using YAML cssclass and Markdown Attributes i.e. {.three-column-list-block} -- */
+	/* -- List Column using YAML cssclasses and Markdown Attributes i.e. {.three-column-list-block} -- */
 
 		/* define the column gap and column rule */
 		.two-column-list div > ul,   .two-column-list-block,
@@ -480,7 +480,7 @@ body{
 
 		/* Adjustment for misaligned bullets (this is a hack, need to find better solution later) */
 		ul:has([href="#mcl/list-column"]) li > .list-bullet::after, /* :has() */
-		.markdown-preview-view[class*="column-list"] li > .list-bullet::after, /* yaml cssclass */
+		.markdown-preview-view[class*="column-list"] li > .list-bullet::after, /* yaml cssclasses */
 		.tag-mcllist-column ul li > .list-bullet::after, /* contextual typography */
 		ul[class*="column-list"] li > .list-bullet::after /* markdown attributes */
 			{ position: relative; }

diff --git a/MCL Wide Views.css b/MCL Wide Views.css
@@ -8,7 +8,7 @@
 
 	What is this snippet for?
 	- for any users to use with any theme to complement any missing page/block width control
-	- available cssClass:
+	- available cssclasses:
 		- wide-page
         - wide-table
 		- wide-dataview
@@ -46,7 +46,7 @@
 
 
 /* === Adjustable RLL === */
-    /* cssClass toggle to allow users to adjust the RLL via Style Settings.
+    /* cssclasses toggle to allow users to adjust the RLL via Style Settings.
        Obsidian v1.0.0 makes it easier to do adjustable RLL ;) */
 
 	/* -- Main Code - Editing and Reading View -- */
@@ -55,7 +55,7 @@
 
 
 /* === Narrow Page === */
-    /* cssClass YAML to allow users with disabled RLL to introduce RLL per
+    /* cssclasses YAML to allow users with disabled RLL to introduce RLL per
        page/note basis. width is following obsidian default setting, or you
        can change it via MCL's Adjustable RLL */
 
@@ -383,7 +383,7 @@ settings:
     -
         id: narrow-view-title
         title: Narrow Page Settings
-		description: Control max-width page/note with cssClass `narrow-page`. RLL must be **disabled**
+		description: Control max-width page/note with cssclasses `narrow-page`. RLL must be **disabled**
         type: heading
         level: 2
         collapsed: true

diff --git a/README.md b/README.md
@@ -28,14 +28,14 @@ This is actually just a CSS code snippets collection. So it isn't an installatio
 > 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)
+- Full width page or blocks (dataview, table and backlinks) per page/note basis by specifying custom `cssclasses` at the frontmatter (YAML)
 	- `wide-page`
 	- `wide-dataview`
 	- `wide-table`
 	- `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 width page per page/note basis for vault with RLL disabled by specifying custom `cssclasses` 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
@@ -48,7 +48,7 @@ This snippet provides you the following features:
 
 ```markdown
 ---
-cssClass: wide-page
+cssclasses: wide-page
 ---
 
 <the rest of your note>
@@ -100,7 +100,7 @@ Multi Column Callout layout take advantage of Obsidian Callout - leveraging it a
 
 
 ### List Column/Grid/Card
-This layout take advantage of markdown unordered list (i.e. `- list item`) to create multi column (and multi row for List Grid/Card) layout by matching with an identifier i.e. either `#mcl` tag, Markdown Attributes plugin syntax, or `cssclass:` key at frontmatter.
+This layout take advantage of markdown unordered list (i.e. `- list item`) to create multi column (and multi row for List Grid/Card) layout by matching with an identifier i.e. either `#mcl` tag, Markdown Attributes plugin syntax, or `cssclasses:` key at frontmatter.
 
 ![](https://raw.githubusercontent.com/efemkay/obsidian-modular-css-layout/main/docs/assets/hero-mc-list-column-grid-card.png)
 
@@ -156,7 +156,7 @@ You can apply to any callout as the identifier is done on the callout-metadata i
 
 This snippet provides you the following features:
 - Image gallery using callout by specifying the callout-metadata `gallery` e.g. `> [!NOTE|gallery]`
-- Image gallery using YAML/frontmatter .`cssClass: image-gallery`
+- Image gallery using YAML/frontmatter .`cssclasses: image-gallery`
 - Float Image using image alt-text
 - Image and Mermaid Diagram Controls
 	- Dimension control for images in bullet list

diff --git a/...t with Multi Column Dataview/MCL Showcase - Float with Multi Column Dataview.md b/...t with Multi Column Dataview/MCL Showcase - Float with Multi Column Dataview.md
@@ -1,5 +1,5 @@
 ---
-cssclass: text-justify
+cssclasses: text-justify
 ---
 
 ## General linear model

diff --git a/Showcases/Multi Column Callout and List/MCL Showcase - MC Callout and List.md b/Showcases/Multi Column Callout and List/MCL Showcase - MC Callout and List.md
@@ -1,5 +1,5 @@
 ---
-cssclass: wide-page
+cssclasses: wide-page
 ---
 
 > [!multi-column]

diff --git a/docs/gallery-cards/02-image-gallery.md b/docs/gallery-cards/02-image-gallery.md
@@ -21,7 +21,7 @@ nav_order: 2
 Image Gallery layout will allow you to create masonry like image gallery layout by placing image embed (i.e. `![[path/to/image.jpg]]`) in successive row of line. There are 2 different ways you can do so i.e.
 
 1. Using Obsidian Callout (by specifying the callout metadata `gallery`)
-2. Using frontmatter (by specifying `cssclass: image-gallery`)
+2. Using frontmatter (by specifying `cssclasses: image-gallery`)
 
 {: .warning-title}
 > Markdown image embed (i.e. `![](path/to/image.jpg)`) not supported
@@ -52,15 +52,15 @@ Image Gallery layout will allow you to create masonry like image gallery layout
 ![](https://raw.githubusercontent.com/efemkay/obsidian-modular-css-layout/main/docs/assets/gallery-callout-langkawi.png)
 
 
-### How to Use -- with Frontmatter `cssClass: image-gallery`
+### How to Use -- with Frontmatter `cssclasses: image-gallery`
 
-- Specify `cssClass: image-gallery` at the frontmatter *(top of your markdown notes fenced by two three-dashes `---`, see example below)*
+- Specify `cssclasses: image-gallery` at the frontmatter *(top of your markdown notes fenced by two three-dashes `---`, see example below)*
 - Insert embedded images (i.e. `![[path/to/image.jpg]]`). Put next to each other (with single spacing) for same row placement. Add single empty line to create new row.
 
 
 ```markdown
 ---
-cssClass: image-gallery
+cssclasses: image-gallery
 ---
 
 ![[path/to/pic1.jpg]] ![[path/to/pic2.jpg]]
@@ -74,7 +74,7 @@ cssClass: image-gallery
 > **Syntax below only works with Reading View**
 > ```markdown
 > ---
-> cssClass: image-gallery
+> cssclasses: image-gallery
 > ---
 >
 > ![[path/to/pic1.jpg]]

diff --git a/docs/gallery-cards/05-gc-settings.md b/docs/gallery-cards/05-gc-settings.md
@@ -16,23 +16,23 @@ nav_order: 5
 
 
 ## Image in "Gallery" Settings
-"Gallery" refers to gallery callout-metadata and/or "cssClass:image-gallery" frontmatter
+"Gallery" refers to gallery callout-metadata and/or "cssclasses:image-gallery" frontmatter
 
 | Settings | Description |
 | --- | --- |
 | Hide Strange New World Indicators | Hide Strange New World count indicator in Image Gallery (both using callout and css helper) |
 | Gallery Callout Gap | Set the gap between images in `[!<anycallout>\|gallery]` |
-| Max Height for Images | Set the max height for Images in `[!<anycallout>\|gallery]` and `cssClass: image-gallery` |
-| Max Width for Images | Set the max width for Images in `[!<anycallout>\|gallery]` and `cssClass: image-gallery` |
+| Max Height for Images | Set the max height for Images in `[!<anycallout>\|gallery]` and `cssclasses: image-gallery` |
+| Max Width for Images | Set the max width for Images in `[!<anycallout>\|gallery]` and `cssclasses: image-gallery` |
 
 
 ## Image in Lists Settings
 
 | Settings | Description |
 | --- | --- |
 | Disable Image Control in Lists | Turn this on to have the max height and width set below to have effect to images in bullet list |
-| Max Height for Images in Lists | Set the max height for Images in `[!<anycallout>\|gallery]` and `cssClass: image-gallery` |
-| Max Width for Images in Lists | Set the max width for Images in `[!<anycallout>\|gallery]` and `cssClass: image-gallery` |
+| Max Height for Images in Lists | Set the max height for Images in `[!<anycallout>\|gallery]` and `cssclasses: image-gallery` |
+| Max Width for Images in Lists | Set the max width for Images in `[!<anycallout>\|gallery]` and `cssclasses: image-gallery` |
 
 
 ## Mermaid SVG Settings

diff --git a/docs/gallery-cards/index.md b/docs/gallery-cards/index.md
@@ -10,7 +10,7 @@ has_children: true
 
 Gallery Cards CSS snippet will allow you to create image gallery and control image customisation (like rounded corner and max width). In summary this snippet will provide the following features:
 - Image gallery using callout by specifying the callout-metadata `gallery` e.g. `> [!NOTE|gallery]`
-- Image gallery using YAML/frontmatter .`cssClass: image-gallery`
+- Image gallery using YAML/frontmatter .`cssclasses: image-gallery`
 - Image and Mermaid Diagram Controls
     - Dimension control for images in bullet list
     - Image Zoom (via CSS)

diff --git a/docs/multi-column/05-list-column.md b/docs/multi-column/05-list-column.md
@@ -58,7 +58,7 @@ For this approach, do note that there's a dot (`.`) before the class name. This
 Here's an example markdown:
 ```md
 ---
-cssClass: two-column-list
+cssclasses: two-column-list
 ---
 
 - list item 1 #mcl/list-column
@@ -78,7 +78,7 @@ cssClass: two-column-list
 > Note that this approach do not work well if the last bullet is indented (not part of top level list). Example here
 > ```md
 > ---
-> cssClass: two-column-list
+> cssclasses: two-column-list
 > ---
 >
 > - list item 1 #mcl/list-column
@@ -99,7 +99,7 @@ Using this approach, you will have to specify the css for the column type at the
 Here's an example markdown:
 ```md
 ---
-cssClass: two-column-list
+cssclasses: two-column-list
 ---
 
 - list item 1 #mcl/list-column

diff --git a/docs/multi-column/06-list-grid.md b/docs/multi-column/06-list-grid.md
@@ -69,7 +69,7 @@ Using this approach, you will have to specify the css for the column type at the
 Here's an example markdown:
 ```md
 ---
-cssClass: two-column-grid-list
+cssclasses: two-column-grid-list
 ---
 
 - #### Core Work

diff --git a/docs/showcases/float-with-mc-dataview.md b/docs/showcases/float-with-mc-dataview.md
@@ -12,7 +12,7 @@ nav_order: 2
 
 ```md
 ---
-cssclass: text-justify, wide-page, minimal-float
+cssclasses: text-justify, wide-page, minimal-float
 ---
 
 ## General linear model

diff --git a/docs/showcases/mc-callout-and-list.md b/docs/showcases/mc-callout-and-list.md
@@ -12,7 +12,7 @@ nav_order: 3
 
 ```md
 ---
-cssclass: wide-page
+cssclasses: wide-page
 ---
 
 > [!multi-column]

diff --git a/docs/showcases/mc-callout-list-card.md b/docs/showcases/mc-callout-list-card.md
@@ -11,7 +11,7 @@ parent: Showcases
 
 ```md
 ---
-cssClass: minimal-float, wide-page
+cssclasses: minimal-float, wide-page
 ---
 
 > #### What do you need to achieve this?

diff --git a/docs/wide-views/index.md b/docs/wide-views/index.md
@@ -18,13 +18,13 @@ has_children: true
 ## Understanding the snippet
 - CSS snippet file: [MCL Wide Views.css](https://github.com/efemkay/obsidian-modular-css-layout/blob/main/MCL%20Wide%20Views.css)
 - This snippet will provide the following features
-	- Wide views using YAML `cssClass: wide-<page/blocks>` for applying to a specific individual note
+	- Wide views using YAML `cssclasses: wide-<page/blocks>` for applying to a specific individual note
 	- Wide views using vault-wide toggle for applying to all notes in your vault
 		- will require Style Settings plugin to enable the feature
 
 ---
 
-## Using YAML (specifying `cssClass`)
+## Using YAML (specifying `cssclasses`)
 
 - CSS snippet: `MCL Wide Views.css`
 - Custom CSS class available
@@ -37,7 +37,7 @@ This snippet allow you to use Obsidian CSS class helper to enable any of the wid
 
 ```markdown
 ---
-cssClass: wide-page
+cssclasses: wide-page
 ---
 
 <the rest of your note>

diff --git a/docs/wide-views/wvsettings.md b/docs/wide-views/wvsettings.md
@@ -17,12 +17,12 @@ Set the max width for normal-width page. Enable Adjustable RLL option above must
 ## Wide Page Settings
 
 ### Max Width for Normal Width block
-Set the max width for normal-width blocks for page/note that you specify with `cssClass: wide-<dataview|table|backlinks>`
+Set the max width for normal-width blocks for page/note that you specify with `cssclasses: wide-<dataview|table|backlinks>`
 
 ## Narrow Page Settings
 
 ### Max Width for Narrow View page
-Set the max width for the page/note that you specify with `cssClass: narrow-page`.
+Set the max width for the page/note that you specify with `cssclasses: narrow-page`.
 
 ---
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,7 +12,7 @@ nav_order: 2 @@
     ```md
     ---
-    cssclass: text-justify, wide-page, minimal-float
+    cssclasses: text-justify, wide-page, minimal-float
     ---
     ## General linear model
@@ Expand Down @@