add snippet customization example

Author: mProjectsCode

.gitignore

@@ -29,6 +29,7 @@ meta.txt
 
 exampleVault/.obsidian/*
 !exampleVault/.obsidian/plugins
+!exampleVault/.obsidian/snippets
 
 exampleVault/.obsidian/plugins/*
 exampleVault/.obsidian/plugins/obsidian-meta-bind-plugin/*

exampleVault/.obsidian/snippets/meta-bind-customization.css

@@ -0,0 +1,9 @@
+/* A snippet that turns a progress bar input field red */
+.mb-input-type-progressBar.red-progress-bar .mb-progress-bar-progress {
+    background: var(--color-red);
+}
+
+/* A snippet that turns a button green */
+.mb-button.green-button > button {
+    background: var(--color-green);
+}

exampleVault/Buttons/Button Example.md

@@ -14,11 +14,12 @@ text `BUTTON[docs-button, docs, open-button]` text
 BUTTON[docs-button]
 ```
 
-asase
+With a custom class and a CSS snippet we can change the button to be green.
 
 ```meta-bind-button
 style: primary
 label: Open Meta Bind FAQ
+class: green-button
 action:
   type: command
   command: obsidian-meta-bind-plugin:open-faq

exampleVault/Input Fields/Progress Bar.md

@@ -21,6 +21,8 @@ INPUT[progressBar(showcase, minValue(0), maxValue(10), stepSize(-1)):progress3]
 INPUT[progressBar(showcase, minValue(0), maxValue(10), stepSize(0.1)):progress4]
 ```
 
+With some snippets we can change the color of the progress bar.
+
 ```meta-bind
-INPUT[progressBar(defaultValue(53), class(red))]
+INPUT[progressBar(defaultValue(53), class(red-progress-bar))]
 ```