Bulma with node-sass

Last Updated : 16 Mar, 2022

In this article, we’ll see how to use Bulma with node-sass. Bulma elements come with pres-styled components, what if you want to modify or customize them according to your requirement? You can do that just by using sass. One of the ways to achieve this is by using node-sass, which is a sass compiler that creates a CSS file using sass files. Following is the process is given which demonstrates the full modification or styling of a Bulma element.

Using Bulma with node-sass: Below are all the steps are given that are required to style a Bulma element using node-sass along with all its syntax.

Step 1: Creating a package.json file: First, create a new folder where you want to create your sass files. In the terminal, first, navigate to the folder directory and write the following command:

npm init

When prompted to write entry point, write- sass/mystyle.scss. Now, the above command will create a package.json file in the folder that you have created.

Step 2: Installing node dev dependencies: For styling the Bulma elements, we need to install 2 node packages:

npm install node-sass --save-dev
npm install bulma --save-dev

Step 3: Creating a SASS file: Create a SASS folder, and there create a file called: mystyle.scss.

@charset "utf-8";
@import "../node_modules/bulma/bulma.sass";

Note: Make sure that the above path is correct as per your project directory.

Step 4: Creating the HTML file: We create an HTML file that we want to customize and save it as: filename.html. Note that the css/mystyle.css path in your stylesheet is correct as it will be the location of the CSS file that will generate with SASS. Refer to the below example syntax.

filename.html

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href="css/mystyle.css"> 
</head> 
  
<body> 
    <div class="container"> 
        <h1 class="title"> 
            GeeksforGeeks 
        </h1> 
  
        <p class="subtitle"> 
            A Computer Science portal 
        </p> 
  
  
        <h1 class="subtitle">Become a Member</h1> 
  
        <h2>Already a Geek!</h2> 
  
        <div class="control"> 
            <label class="radio"> 
                <input type="radio" name="answer"> 
                Yes 
            </label> 
            <label class="radio"> 
                <input type="radio" name="answer"> 
                No 
            </label> 
        </div> 
        <br> 
  
        <div class="buttons"> 
            <a class="button is-warning">Log In</a> 
            <a class="button is-light">Sign Up</a> 
        </div> 
    </div> 
</body> 
  
</html>

Here you will notice the unstyled page. See next steps.

Step 5: Adding node scripts to build CSS file: We will be generating our CSS file from the SASS file but for that, we need to add node scripts. Add the following code in the package.json file.

"scripts": {
    "css-build": "node-sass --omit-source-map-url sass/mystyle.scss css/mystyle.css",
    "css-watch": "npm run css-build -- --watch",
    "start": "npm run css-watch"
}

Here,

css-build takes sass/mystyle.scss as an input, and outputs css/mystyle.css, while omitting the source map.
css-watch generates the CSS and watches for any modifications.
start is used to run css-watch.

After adding the above code, run the following code in your terminal:

npm run css-build

Output:

Rendering Complete, saving .css file...
Wrote CSS to /path/to/mybulma/css/mystyle.css

Watch your code changes by running the following command:

npm start

Step 6: Adding your own styles: We can add our own styles, or for example, add the below styles to your mystyle.scss file.

mystyle.scss

@charset "utf-8"; 
  
// Import a Google Font 
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700'); 
  
// Set your brand colors 
$purple: #8A4D76; 
$pink: #FA7C91; 
$brown: #757763; 
$beige-light: #D0D1CD; 
$beige-lighter: #EFF0EB; 
  
// Update Bulma's global variables 
$family-sans-serif: "Nunito", sans-serif; 
$grey-dark: $brown; 
$grey-light: $beige-light; 
$primary: $purple; 
$link: $pink; 
$widescreen-enabled: false; 
$fullhd-enabled: false; 
  
// Update some of Bulma's component variables 
$body-background-color: $beige-lighter; 
$control-border-width: 2px; 
$input-border-color: transparent; 
$input-shadow: none;

Example 1: Below example illustrates the Bulma using node-sass.

filename.html

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet"
          href="css/mystyle.css"> 
</head> 
  
<body> 
    <div class="container"> 
        <h1 class="title"> 
            GeeksforGeeks 
        </h1> 
  
        <p class="subtitle"> 
            A Computer Science portal 
        </p> 
  
  
        <div class="field"> 
            <p class="control"> 
                <span class="select"> 
                    <select> 
                        <option>C++</option> 
                        <option>C</option> 
                        <option>Java</option> 
                        <option>Python</option> 
                    </select> 
                </span> 
            </p> 
  
        </div> 
  
        <div class="buttons"> 
            <a class="button is-success">Log In</a> 
            <a class="button is-light">Sign Up</a> 
        </div> 
    </div> 
</body> 
  
</html>

mystyle.scss

@charset "utf-8"; 
  
// Import a Google Font 
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700'); 
  
// Set your brand colors 
$purple: #8A4D76; 
$pink: #FA7C91; 
$brown: #757763; 
$beige-light: #D0D1CD; 
$beige-lighter: #EFF0EB; 
$white: #FFFFFF; 
  
// Update Bulma's global variables 
$family-sans-serif: "Nunito", sans-serif; 
$grey-dark: $brown; 
$grey-light: $beige-light; 
$primary: $purple; 
$link: $pink; 
$widescreen-enabled: false; 
$fullhd-enabled: false; 
  
// Update some of Bulma's component variables 
$body-background-color: $white; 
$control-border-width: 2px; 
$input-border-color: green; 
$input-shadow: none; 
  
// Import only what you need from Bulma 
@import "../node_modules/bulma/sass/utilities/_all.sass"; 
@import "../node_modules/bulma/sass/base/_all.sass"; 
@import "../node_modules/bulma/sass/elements/button.sass"; 
@import "../node_modules/bulma/sass/elements/container.sass"; 
@import "../node_modules/bulma/sass/elements/title.sass"; 
@import "../node_modules/bulma/sass/form/_all.sass"; 
@import "../node_modules/bulma/sass/components/navbar.sass"; 
@import "../node_modules/bulma/sass/layout/hero.sass"; 
@import "../node_modules/bulma/sass/layout/section.sass";

Output:

Example 2: Another example illustrating the Bulma using node-sass with different styles.

filename.html

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" 
          href="css/mystyle.css"> 
</head> 
  
<body> 
    <div class="container"> 
        <h1 class="title"> 
            GeeksforGeeks 
        </h1> 
  
        <p class="subtitle"> 
            A Computer Science portal 
        </p> 
  
  
        <h1 class="subtitle">Become a Member</h1> 
  
        <h2>Already a Geek!</h2> 
  
        <div class="control"> 
            <label class="radio"> 
                <input type="radio" name="answer"> 
                Yes 
            </label> 
            <label class="radio"> 
                <input type="radio" name="answer"> 
                No 
            </label> 
        </div> 
        <br> 
  
        <div class="buttons"> 
            <a class="button is-warning">Log In</a> 
            <a class="button is-light">Sign Up</a> 
        </div> 
    </div> 
</body> 
  
</html>

mystyle.scss

@charset "utf-8"; 
  
// Import a Google Font 
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700'); 
  
// Set your brand colors 
$purple: #8A4D76; 
$pink: #FA7C91; 
$brown: #757763; 
$beige-light: #D0D1CD; 
$success: #45c550; 
$beige-lighter: #EFF0EB; 
$white: #FFFFFF; 
  
// Update Bulma's global variables 
$family-sans-serif: "Nunito", sans-serif; 
$grey-dark: $brown; 
$grey-light: $beige-light; 
$primary: $purple; 
$link: $pink; 
$text: white; 
$widescreen-enabled: false; 
$fullhd-enabled: false; 
  
// Update some of Bulma's component variables 
$body-background-color: $success; 
$control-border-width: 2px; 
$input-border-color: green; 
$input-shadow: none; 
  
// Import only what you need from Bulma 
@import "../node_modules/bulma/sass/utilities/_all.sass"; 
@import "../node_modules/bulma/sass/base/_all.sass"; 
@import "../node_modules/bulma/sass/elements/button.sass"; 
@import "../node_modules/bulma/sass/elements/container.sass"; 
@import "../node_modules/bulma/sass/elements/title.sass"; 
@import "../node_modules/bulma/sass/form/_all.sass"; 
@import "../node_modules/bulma/sass/components/navbar.sass"; 
@import "../node_modules/bulma/sass/layout/hero.sass"; 
@import "../node_modules/bulma/sass/layout/section.sass";