DEV Community

Ninan Kara
Ninan Kara

Posted on • Edited on

React #2: Custom CSS

#react #bulma

Objectives

  • create custom bulma's css
  • create home banner with header

Steps

Honestly, the guideline in the official documentation is confusing me. Probably because I am not familiar with the package manager. So I tried it based on what I am understanding.

Create folder for the custom style file

  • create new folder under src folder, named styles or anything
  • create new folder under styles folder, named sass
  • create new file named index.scss
  • add following script in the file 
@charset "utf-8";
@import "../../../node_modules/bulma/bulma.sass";
Enter fullscreen mode Exit fullscreen mode

make sure to locate the bulma.sass correctly. since I created the index.scss under the src folder, then I defined it as script above.

Add scripts to package.json

  • add following script to existing package.json 
"scripts": {
  "css-build": "node-sass --omit-source-map-url src/styles/sass/index.scss src/styles/css/index.css",
....
}
Enter fullscreen mode Exit fullscreen mode

define the url to your own preferences. this is to create css file based on scss file that I created previously.

Build the css

  • in the terminal, run following script 
npm run css-build -- --watch
Enter fullscreen mode Exit fullscreen mode

This is to build the css file. After you run this script, there will be new css file created under the defined folder.
The --watch attribute is for real-time preview whenever we modified the scss file.

Import the css to the project

  • import the css into index.js delete the original import bulma from the file, because it will be overlapped.

Start the react project

  • open new terminal and run npm start

Modify the scss file

  • custom the bulma attribute 
@charset "utf-8";

// Import a Google Font
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');

// Set your brand colors
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;
$azalea: #FBC2C2;

// Update Bulma's global variables
$family-sans-serif: "Nunito",
sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $azalea;
$link: $purple;

// $widescreen-enabled: false;
// $fullhd-enabled: false;

// Update some of Bulma's component variables
$body-background-color: $beige-lighter;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;
$footer-color: true;
$footer-padding: 1rem;

// Import only what you need from Bulma
@import "../../../node_modules/bulma/sass/utilities/_all.sass";
@import "../../../node_modules/bulma/sass/base/_all.sass";
@import "../../../node_modules/bulma/sass/elements/button.sass";
@import "../../../node_modules/bulma/sass/elements/container.sass";
@import "../../../node_modules/bulma/sass/elements/title.sass";
@import "../../../node_modules/bulma/sass/form/_all.sass";
@import "../../../node_modules/bulma/sass/components/navbar.sass";
@import "../../../node_modules/bulma/sass/layout/hero.sass";
@import "../../../node_modules/bulma/sass/layout/section.sass";
@import "../../../node_modules/bulma/sass/layout/footer.sass";
Enter fullscreen mode Exit fullscreen mode

when you save the file, the new custom style will be applied directly.

Add Header and Footer File

  • create Header.jsx and Footer.jsx under the component folder. 
import React from 'react';
// import 'bulma';

class Header extends React.Component{
    render(){
        return(
            <nav class="navbar is-primary is-fixed-top">
                <div class="navbar-menu">
                    <div class="navbar-end">
                        <div class="navbar-item">
                            <div class="buttons">
                                <a class="button is-light">
                                <span class="icon">
                                    <i class="fab fa-twitter"></i>
                                </span>
                                <span><strong>Tweet</strong></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        );
    }
}
export default Header;
Enter fullscreen mode Exit fullscreen mode 
import React from "react";

class Footer extends React.Component{
    render(){
        return(
            <footer class="footer is-primary">
                  <div class="content">
                      <p>Created by Me</p></div>  
            </footer>
        );
    }
}
export default Footer;
Enter fullscreen mode Exit fullscreen mode

Modify the Banner.jsx file

  • add the Header and Footer component 
<div>
        <Header/>
        <section class="hero is-white is-fullheight">

        <div class="hero-body is-primary">
          <div class="container has-text-centered">
            <h1 class="title">Hello, Bulma!</h1>
            <h2 class="subtitle">This is react app feat. Bulma</h2>
          </div>
        </div>

      </section>
      <Footer />
      </div>
Enter fullscreen mode Exit fullscreen mode

custom css

Notes

import only required library is nice if you know what you want from the library, otherwise import the complete library would be more convenient. It happened to me a lot. I keep losing some class from Bulma, and keep adding it one by one which is troublesome.
Please note that to apply the customisation, put the import script after you declare all the customisation variables.

Link

Custom Bulma

Top comments (0)

Read next

remejuan profile image

React: Debouncing input with useEffect

Reme Le Hane -

nik-bogachenkov profile image

Dive into Next.js Parallel & Intercepting Routing: Enhancing UX

Nik Bogachenkov -

andrewkangg profile image

With your .env, project, and a single Dockerfile, simply run 'bash run.sh'.

Andrew Kang-G -

sonaykara profile image

Libraries You Should Know When Building with React

Sonay Kara -