docs: update readme (#144)

README.md

@@ -47,23 +47,63 @@ Please note, this package can be used without importing any other Oruga styling
 
 Bulma is a highly customizable CSS framework. From colors to typography, spacing and sizes, forms and layouts, all parts of Bulma can be customized by the user (see [Bulma Customization](https://bulma.io/documentation/customize/concepts/)).
 
-Using the following sample code you don't need `import '@oruga-ui/theme-bulma/dist/bulma.css'` but you have to add a custom sass/scss file to customize Bulma and the theme variables. To overwrite Bulma’s Sass variables with your own values, write `@use` and the `with` keyword, which takes a Sass map:
+Using the following sample code you **don't need** `import '@oruga-ui/theme-bulma/dist/bulma.css'` but you have to add a custom sass/scss file to customize Bulma and the theme variables. 
+To overwrite Bulma’s Sass variables with your own values, you have to use `@use` and the `with` keyword, which takes a Sass map.
+You have two options for including the theme: include all the styling at once (including full bulma), or include the Oruga theme and Bulma separately.
 
 ```scss
+// Option A: Include all styling (including bulma)
+
+// set your color overrides
+$primary: #8c67ef;
+$link: $primary;
+
+// add new colors to the colors map
+$twitter: #4099FF;
+$custom-colors: ('twitter': $twitter);
+
+// Include the Oruga Bulma theme with Bulma included (you can only manipulate any derived variables here)
+@use '@oruga-ui/theme-bulma/dist/scss/bulma-build' with (
+    $family-primary: '"Nunito", sans-serif',
+    $primary: $primary,
+    $link: $link,
+    $custom-colors: $custom-colors,
+);
+
+// Then add additional custom code here
+// ...
+```
+**_NOTE:_** Note that only variables within Bulma's [derived-variables.scss](https://github.com/jgthms/bulma/blob/main/sass/utilities/derived-variables.scss) file can be overridden here.
+
+```scss
+// Option B: Include the Oruga theme and Bulma separately
+
 // set your color overrides
 $primary: #8c67ef;
 $link: $primary;
 
 // add new colors to the colors map
 $twitter: #4099FF;
-$custom-colors: ('twitter', $twitter);
+$custom-colors: ('twitter': $twitter);
 
+// 1. Include the Oruga theme first (you can only manipulate any derived variables here)
 @use '@oruga-ui/theme-bulma/dist/scss/bulma' with (
     $family-primary: '"Nunito", sans-serif',
     $primary: $primary,
     $link: $link,
     $custom-colors: $custom-colors,
 );
+
+// 2. Include any other Bulma module with specific configuration here
+@use "bulma/sass/elements" with (
+    $button-weight: 800
+);
+
+// 3. Include the remaining parts or full Bulma
+@use "bulma/sass";
+
+// Then add additional custom code here
+// ...
 ```
 
 ### Override default config