Bulma frontend framework installation and tutorial

Requirements

node must be installed on your machine.

Bulma is a css framework, it has a grid system. Bulma is good for responsive design.

in this tutorial we are going to show how to install bulma through npm and use it in our project.

Assuming you are using laravel, get your laravel installation ready. After the installation run the code below on the command line in the application directory.

$ npm install bulma

This command initialize the own into the node module folder.

How do i acess bulma on my pages?

You can find the final css build at AppName/node_modules/bulma/css/bulma.css.

it is possible you would find loader with webpack and similar. If, for example in a Vue project, you have that, then you can use import syntax:

import 'bulma/css/bulma.css'

within your js. This works because having import [xyz from] 'xyz' will look at AppName/node_modules/xyz, and in the case of a css file, it's as simple as that!
you can also find a way to send it over to the client. Just copy AppName/node_modules/bulma/css/bulma.css into a file, maybe bulma.css, in either an assets or public or whatever you use, then fetch it like you'd fetch any css file within the html:

Lets talk about bulma a little

Bulma is built with flex-box, using the grid system is easy as put a class of column in a div with a class of colomns.To understand bulma properly read the documentation on bulma

<div class="columns">
  <div class="column">
    First column
  </div>
  <div class="column">
    Second column
  </div>
  <div class="column">
    Third column
  </div>
  <div class="column">
    Fourth column
  </div>
</div>

bulma is a very nice frame work, and its community is getting bigger.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---