FrontEnd web
Published in

FrontEnd web

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.

Install Bulma into React.js
Install Bulma into React.js

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.

  1. Contact delivery network CDN
  2. Npm or Yarn
  3. 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 bulma

Requirements

Bulma works correctly in your reactJS. Firstly, add two lines of code in our react app.

Follow two steps

  1. HTML5 doctype
  2. Add meta tag
  3. 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

  1. CDN ways
  2. 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+).

--

--

--

FrontendWeb is a platform for writers and readers to read and write a new post about frontend developers, full-stack developers, Web developers, and Computer science. It is an open-source community that join and gathers frontend developers to build and share knowledge with others

Recommended from Medium

Recipe site in Gatsby and Firebase-4

This.JavaScript: State of Frameworks- Preact Update

GameTunes DUNE Video Game Soundtrack

Coding Interview Question: Find Width of a Tree

Why is the Virtual DOM So Fast?

Setting Up Single Page JavaScript in Phoenix with Brunch

Literal types to the test

Datepicker

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

Rajdeep singh

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Writer || https://officialrajdeepsingh.dev/

More from Medium

What is React, Why react, Why React is declarative

Getting Started with React