Skip to content

Commit f12ce98

Browse files
Support Bulma 0.9.x
1 parent e6a1ce5 commit f12ce98

File tree

2 files changed

+15
-5
lines changed

2 files changed

+15
-5
lines changed

README.md

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,30 @@
11
# bulma-variables-export
2+
23
Library exporting Bulma sass variables which can be used in Webpack project. Bulma variables can be imported into any Javascript/Typescript project.
34

4-
<img src="https://raw.githubusercontent.com/jgthms/bulma/master/docs/images/bulma-banner.png" width="600" height="315" class="center">
5+
![Bulma.io](https://raw.githubusercontent.com/jgthms/bulma/master/docs/images/bulma-banner.png)
56

67
- [bulma-variables-export](#bulma-variables-export)
7-
- [Quick install](#Quick-install)
8-
- [NPM](#NPM)
9-
- [Webpack Setup](#Webpack-Setup)
8+
- [Quick install](#quick-install)
9+
- [NPM](#npm)
10+
- [Webpack Setup](#webpack-setup)
1011
- [import](#import)
11-
- [Usage](#Usage)
12+
- [Usage](#usage)
1213

1314
## Quick install
1415

1516
### NPM
17+
1618
```sh
1719
npm install bulma-variables-export
1820
```
1921

2022
## Webpack Setup
23+
2124
When working with Javascript/Typescript and Sass, sometimes you want to be able to share variables defined in stylesheets with your code. This is actually pretty simple with Webpack.
2225

2326
First make sure webpack is set up to import scss:
27+
2428
```javascript
2529
// webpack.config.js
2630
module.exports = {
@@ -41,22 +45,27 @@ module.exports = {
4145
```
4246

4347
## import
48+
4449
Now you can import any Bulma variables in your project.
4550

4651
You can import every variables using:
52+
4753
```javascript
4854
import variables from 'bulma-variables-export'
4955
```
5056

5157
You can also import specific set of variables using:
58+
5259
```javascript
5360
import initialVariables from 'bulma-variables-export/sass/initial-variables'
5461
import derivedVariables from 'bulma-variables-export/sass/derived-variables'
5562
import controlsVariables from 'bulma-variables-export/sass/controls-variables'
5663
```
5764

5865
## Usage
66+
5967
Usage in your code is very simple. The variables name are exactly defined as Bulma but in camelCase.
68+
6069
```javascript
6170
import variables from 'bulma-variables-export'
6271
// *OR*

sass/initial-variables.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,4 +71,5 @@
7171
// Flags
7272

7373
variableColumns: $variable-columns;
74+
rtl: $rtl;
7475
}

0 commit comments

Comments
 (0)