Bulma CSS Framework
Install Bulma into React.js
Bulma is a modern CSS framework.
I have always been a big fan of Bootstrap. Recently I try to some other frameworks. But I Recently find the Bulma framework.
Bulma is a modern CSS framework. Bulma is open source like bootstrap. Bulma also provides you ready to use frontend components that component help make the website fast and easy. You also easily combine with other components.
I don't use Bulma soo much on my project daily basis. I’m just exploring the Bulma framework and try to understand how to use it.
Note:
In This Article, I'm told how to add the Bulma framework in react app. if you create an intarweb with Bulma. I personally recommend you use the react-bulma-components library to create your own web app.
react-bulma-components is a great way to add bulma to your app. react-bulma-components also provide in-build react components for your app.
Installation
Most common two ways to add Bulma in your project. In Project, I always recommended you to add Bulma help of Npm or yarn.
- Contact delivery network CDN
- Npm or Yarn
- Requirements
Contact delivery network CDN
Bulma also provide a Contact delivery network
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">or@import "https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css"
Npm or Yarn
My Recommended way to add Bulma into reacting app.
npm install bulma
or
yarn add bulmaRequirements
Bulma works correctly in your reactJS. Firstly, add two lines of code in our react app.
Follow two steps
- HTML5 doctype
- Add meta tag
- How to use
HTML5 doctype
Firstly define html5 doctype in your HTML. Document Type Declaration gives instructions to the web browser about the version of the markup language.
<!DOCTYPE html>Add meta tag
Firstly setup doctype after adding a response meta tag in your app. response meta helps responsive your app to different web browsers.
<meta name="viewport" content="width=device-width, initial-scale=1">Note
If you create react, use npx create-react-app my-appthe npx command. By default, npx adds HTML 5 doctype and also adds a responsive meta tag in-app.
How to use it
two ways you add Bulma into react.js
Let's start code
- CDN ways
- NPM ways
CDN ways
You copy the CDN file and paste it into the react.js public/index HTML file in CDN ways. After saving it.
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /><link rel="manifest" href="%PUBLIC_URL%/manifest.json" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css"><title>React App</title></head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body>
</html>
NPM ways
Firstly go to react index.js app and import Bulma CSS files into node_modules.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';import 'bulma/css/bulma.min.css';ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root'));
After start write coding in react app.js.
import './App.css';function App() {return (<section className="section"> <div className="container">
<h1 className="title"> Hello World </h1>
<p className="subtitle"> My React app with <strong>Bulma</strong> </p>
</div></section>
);
}export default App;
Reference
Conclusion
In my opinion, Bulma is a great CSS framework. You build a responsive website very easily and in fast ways. You defiantly use it and build its own site.
Bulma also provides scss support for developers. You easily customize the sass variable according to your own thought.
Bulma provides all browser support. Like Chrome, Edge, Firefox, Opera, and Safari.
Bulma also partially support Internet Explorer (10+).
