https://github.com/service-paradis/bulma-variables-export

Library exporting Bulma sass variables which can be used in Webpack project.
https://github.com/service-paradis/bulma-variables-export

bulma bulma-css bulma-css-framework bulma-framework bulma-variables css javascript sass typescript variables

Last synced: 3 months ago
JSON representation

Library exporting Bulma sass variables which can be used in Webpack project.

• Host: GitHub
• URL: https://github.com/service-paradis/bulma-variables-export
• Owner: service-paradis
• Created: 2019-07-18T17:33:56.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-10-28T14:55:03.000Z (about 4 years ago)
• Last Synced: 2024-10-01T01:41:55.344Z (4 months ago)
• Topics: bulma, bulma-css, bulma-css-framework, bulma-framework, bulma-variables, css, javascript, sass, typescript, variables
• Language: SCSS
• Homepage:
• Size: 10.7 KB
• Stars: 8
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
# bulma-variables-export

Library exporting Bulma sass variables which can be used in Webpack project. Bulma variables can be imported into any Javascript/Typescript project.

![Bulma.io](https://raw.githubusercontent.com/jgthms/bulma/master/docs/images/bulma-banner.png)

- [bulma-variables-export](#bulma-variables-export)

  - [Quick install](#quick-install)

    - [NPM](#npm)

  - [Webpack Setup](#webpack-setup)

  - [import](#import)

  - [Usage](#usage)

## Quick install

### NPM

```sh

npm install bulma-variables-export

```

## Webpack Setup

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.

First make sure webpack is set up to import scss:

```javascript

// webpack.config.js

module.exports = {

  ...

  module: {

    rules: [{

      test: /\.scss$/,

      use: [{

        loader: "style-loader" // creates style nodes from JS strings

      }, {

        loader: "css-loader" // translates CSS into CommonJS

      }, {

        loader: "sass-loader" // compiles Sass to CSS

      }]

    }]

  }

};

```

## import

Now you can import any Bulma variables in your project.

You can import every variables using:

```javascript

import variables from 'bulma-variables-export'

```

You can also import specific set of variables using:

```javascript

import initialVariables from 'bulma-variables-export/sass/initial-variables.scss'

import derivedVariables from 'bulma-variables-export/sass/derived-variables.scss'

import controlsVariables from 'bulma-variables-export/sass/controls-variables.scss'

```

## Usage

Usage in your code is very simple. The variables name are exactly defined as Bulma but in camelCase.

```javascript

import variables from 'bulma-variables-export'

// *OR*

// variables = require('bulma-variables-export');

console.log(variables.black)

console.log(variables.familyMonospace)

console.log(variables.weightMedium)

```