Recently I stumbled upon a clean and lightweight frontend framework Bulma.
Bulma is a free opensource fontend framework based on flexbox and is a good alternate to Bootstrap.
Laravel by default is shipped with Bootstrap as the default frontend framework. In this short tutorial let’s cover on how you can include Bulma in Laravel Framework.
We are going to install Bulma via npm dependency package manager. Make sure you have node installed in your system by going to terminal / command-prompt and run
Install Bulma Package
Go to your terminal / command-prompt and run command
npm install bulma --save-dev
This will install the bulma package in your project –save-dev denotes that we want to dependency to be included as part of devDependencies.
Use coupon 5balloons on this Cloudways Affiliate URL to get special discount.
Include Bulma in Laravel Assets
Since bulma is now available to be included in our project. We can import the bulma files in our framework.
Open file resources / app.scss
And include the following
//Bulma @import '~bulma/bulma';
We need to remove the bootstrap dependency since these both packages clash and will result into errors like (Module build failed (from ./node_modules/sass-loader/lib/loader.js):
// Variables //@import 'variables'; // Bootstrap //@import '~bootstrap/scss/bootstrap';
Run Npm Script
Once you have imported the css file, we can now go ahead and run the npm dev script to compile the sass changes into css.
Go to your terminal and run
npm run watch
This will compile and build the app.scss file into app.css and also will watch for the changes you make to your scss file on run-time.
Include the app.css file in your layout of view file and put any example code to test if Bulma is successfully imported.
<a class="button is-primary">Primary</a>
This could should give you the following output on the view page.
There you go ! Have fun building things with Laravel and Bulma.