In your terminal, create a new folder called mybulma
, navigate to it, then install the Sass gem:
With sass-cli
Use the Sass command line
1. Install Sass #
To try it out, run sass -v
and you should see the following:
2. Download Bulma #
Get the latest version of Bulma:
Unzip it and put the bulma-0.9.3
folder inside your mybulma
folder.
3. Create a Sass file #
Create a sass
folder in which you add a file called mystyles.scss
:
Make sure to write the correct path to the bulma.sass
file.
4. Create an HTML page #
Create an HTML template which uses several Bulma components.
Save this file as mypage.html
.
Notice the css/mystyles.css
path for your stylesheet. This will be the location of the CSS file we will generate with Sass.
Open the page in your browser:
5. Build the CSS file #
In your terminal, type the following command:
Reload the page and it should be styled like this:
To watch for changes, just launch the following command:
6. Add your own Bulma styles #
Replace the content of the mystyles.scss
file with the following:
Since you are watching for changes, simply save the file to see the result:
And voilà! You've managed to install and customize Bulma.
This page is open source.
Noticed a typo? Or something unclear?
Improve this page on GitHub