Bulma CSS framework
Posted on 02 April, 2024
I'm working on a project at the moment for a charity. Whilst I absolutely don't want to do a half-arsed job, I also don't want to have to invest a lot of time designing and styling the UI. An ideal opportunity to look at using a UI library!
I knew I would be using React — although initially I wasn't sure whether I'd be using Gatsby or Next for my build tooling.
A quick Google suggested the possibles were:
Of these, I've previously used Material UI — happy enough experience, but found it quite intensive for what hopefully will be a lightweight project. Whilst I've not used React Bootstrap, I have used Bootstrap a while ago and didn't particularly enjoy it. That left Chakra UI or Bulma, and after a little reading through the documents I decided to give Bulma a go.
It's not a React library, but "just" a CSS library — and is based on Sass, which fits in
with my preferences. Adding custom styling is a doddle — the Bulma docs give a slightly
confusing message about creating a Node script to generate a bespoke stylesheet, but since my
projects almost always compile Sass already I could just npm install bulma in my project, and
then make some changes in my 'master' Sass file as follows:
// do this in your "main" scss file ...
// bulma recommends a @charset declaration
@charset "utf-8";
// set any variables that you need for your customised Bulma; I want to set primary color to blue
$gb-blue: #012169;
// wrap any custom variables in a @use ... with ( ... )
@use "bulma/sass" with (
$family-sans-serif: '"Manrope", sans-serif',
$primary: $gb-blue
);
// if you want to use mixins, include this line
@use "bulma/sass/utilities/mixins";
// if using a custom font, import here (note, *after* the @use declarations)
@import url('https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap');
// add any other scss, or @imports, after these basics
@import "_about_cards.scss";
@import "_notification.scss";
// to use any mixins, the format is @include mixins.<mixin-name>; for instance
.example {
@include mixins.tablet-only {
color: red;
}
}(I was also attracted to Bulma because, as a CSS library, if I get on with it then it'll also be appropriate for using in 11ty projects — learn one thing that can be used in multiple projects)
Will post again with more thoughts once I've got some more time with it under my belt.
