You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+64-28Lines changed: 64 additions & 28 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -48,65 +48,101 @@ Please note, this package can be used without importing any other Oruga styling
48
48
49
49
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/)).
50
50
51
-
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.
52
-
To overwrite Bulma’s Sass variables with your own values, you have to use `@use` and the `with` keyword, which takes a Sass map.
53
-
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.
51
+
Using the following sample code below you **don't need**`import '@oruga-ui/theme-bulma/dist/bulma.css'` but you have to add a custom sass/scss file (like `main.scss`) to customize Bulma and the theme variables.
Inside your own sass/scss file you need to include Bulma styles and theme styles. To overwrite sass variables with your own values, you have to use `@use` and the `with` keyword, which takes a Sass map.
68
+
69
+
There are two ways of importing the theme style:
70
+
-**combined** - The theme features a combined entrypoint which includes Bulma styles and theme styles. This is best for most customization use cases.
71
+
-**separated**- The separated entrypoint only contains theme styles without Bulma. This gives you full control over how and how much of Bulma you import, but you'll have to deal with the sass variable scoping yourself. Unless it's critical that you only include part of Bulma, the separate method is best avoided.
72
+
73
+
#### The Combined Method
74
+
75
+
The combined method is fairly straitforward. Define custom variables and then pass them in using `with()` syntax. You can override any variable in Bulma or the theme which has a `!default` by passing it in this way.
76
+
77
+
If you need to add custom color variants with this method you must use the `$theme-bulma-custom-colors` variable.
54
78
55
79
```scss
56
80
// Option A: Include all styling (including bulma)
57
81
58
-
//set your color overrides
82
+
//Set your color overrides
59
83
$primary: #8c67ef;
84
+
$red: #f00;
60
85
$link: $primary;
61
86
62
-
// add new colors to the colors map
63
-
$twitter: #4099FF;
64
-
$custom-colors: ('twitter': $twitter);
87
+
// Add new colors to the colors map
88
+
$theme-bulma-custom-colors: ('tertiary': $red);
65
89
66
-
// Include the Oruga Bulma theme with Bulma included (you can only manipulate any derived variables here)
90
+
// Include the Oruga Bulma theme with Bulma included
**_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.
101
+
102
+
#### The Separated Method
103
+
When using this method, you will lose the theme customisation for the Bulma variables.
104
+
In the combined method the theme will add Oruga's standard `secondary` color variant for you and you can add additional variants using `$theme-bulma-custom-colors`. Using the separate method, you have to do this in your code instead using Bulma's `$custom-colors` var, which will be implicitly passed to the theme behind the scenes.
105
+
You have to be aware of importing Bulma, `@use "bulma/sass" with (...)` before any other Bulma usage. If you reference Bulma beforehand, for example to use a Bulma mixin to create a colour to pass to Bulma, you will get sass scope problems.
78
106
79
107
```scss
80
108
// Option B: Include the Oruga theme and Bulma separately
81
109
82
-
// set your color overrides
83
-
$primary: #8c67ef;
84
-
$link: $primary;
85
-
86
-
// add new colors to the colors map
87
-
$twitter: #4099FF;
88
-
$custom-colors: ('twitter': $twitter);
110
+
// Assemble color variables
111
+
$red: #f00;
112
+
$green: #0f0;
113
+
$blue: #00f;
114
+
$black: #000;
115
+
$dark-grey: #6c757d;
116
+
$speed-slower: 1000ms;
117
+
118
+
// Custom colors is required if you want the secondary variant. Nothing will break if you omit it though.
119
+
$custom-colors: (
120
+
// Add the standard Oruga secondary variant
121
+
'secondary': $dark-grey,
122
+
// If you want to add additional custom colors to the colors map add them here
123
+
'tertiary': $red
124
+
);
89
125
90
-
// 1. Include the Oruga theme first (you can only manipulate any derived variables here)
91
-
@use'@oruga-ui/theme-bulma/dist/scss/bulma'with (
92
-
$family-primary: '"Nunito", sans-serif',
93
-
$primary: $primary,
94
-
$link: $link,
126
+
// Pass any Bulma variables you'd like to override here
127
+
@use"bulma/sass"with (
128
+
$red: $red,
129
+
$blue: $blue,
130
+
$green: $green,
131
+
$black: $black,
132
+
$primary: $green,
95
133
$custom-colors: $custom-colors,
96
134
);
97
135
98
-
//2. Include any other Bulma module with specific configuration here
99
-
@use"bulma/sass/elements"with (
100
-
$button-weight: 800
136
+
//Pass any theme variables you'd like to override here
In case you want to replace the default style of a component you can override or add new classes changing ``bulmaConfig``; more details about components customization on https://oruga-ui.com/documentation/customisation.html
// This file is home to defaulted variables which need to be passed to Bulma, or to general defaulted variables which are not part of a particular component
2
+
3
+
@use"sass:map";
4
+
5
+
$speed-slow: 150ms!default;
6
+
$speed-slower: 250ms!default;
7
+
8
+
// oruga defines an extra secondary color
9
+
$secondary: #6c757d!default;
10
+
11
+
// alternative to focus-shadow-size
12
+
$active-shadow-size: 000.5em!default;
13
+
14
+
// renamed with theme-bulma prefix to avoid namespace collision with the @forward below
15
+
$theme-bulma-custom-colors: () !default;
16
+
17
+
// Merge any user-defined custom colors with the custom colors defined by the theme. This will be passes to Bulma as $custom-colors
18
+
// This is the one variable in this file which is not defaulted, but it collects defaulted values so it counts. It's going to be passed into bulma so it has to be here so it comes first
0 commit comments