DEV Community

loading...

Advantages of using Bulma CSS framework

chrislemus profile image Chris ・2 min read

Reusable styling is extremely helpful for developers that want to focus on their program logic while providing a pleasing interface to the end-user. While Material UI is a popular styling framework that offers a great array of styled-components. Here is why I often lean towards using Bulma CSS Framework.

Smaller package size

Since Bulma is a pure CSS/SCSS styling framework, the total file size is much smaller compared to other styling frameworks that included Javascript for functionality.

Here is a comparison of the total package size for different styling frameworks.
Bulma 1.3 MB entire project file
bulma.css.min 204 KB the minified filed used in production

material-ui-next 48 MB

Customization

When it comes to customizing styles, less work is needed when using Bulma.

customizing a primary style color on Bulma

$purple: #3f51b5;
$primary: $purple;
Enter fullscreen mode Exit fullscreen mode

customizing a primary style color on Maerial UI

import { createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';
import green from '@material-ui/core/colors/green';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: purple[500],
    }
  }
})


function App() {
  return (
    <React.StrictMode>
      <ThemeProvider theme={theme}>
        <LandingPage />
      </ThemeProvider>
    </React.StrictMode>,
  );
}
Enter fullscreen mode Exit fullscreen mode

Awesome helper classes

With styling frameworks that are not purely SCSS/CSS like Material UI, you will need to import the component from wherever they are stored in your project.

But with pure CSS/SCSS styling frameworks you can style your HTML elements by simply adding a class attribute.

<button class="button">Button</button>
Enter fullscreen mode Exit fullscreen mode

What if I want to add margin to the top and bottom of my HTML element? I simply add a my-3 to my class attribute!

<button class="button my-3">Button</button>
Enter fullscreen mode Exit fullscreen mode

The best thing about Bulma is that it will work on any front-end project environment because its pure CSS. Personally, it doesn't feel natural to use a programming language to customize CSS styling quite often, especially when doing so requires 20 times more typing compare to if I just edit the CSS directly. Even if you are not confident with CSS I recommend giving Bulma a try, the styles are great, and the documentation is awesome!

Discussion (0)

Forem Open with the Forem app