diff --git a/README.md b/README.md index 87a57a8..c10eab3 100644 --- a/README.md +++ b/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