Bulma is a class-based CSS framework. It is built on a flexbox layout and comes with built-in responsiveness (elements in your application automatically adjust to the device's width). It is used in frontend development.
Bulma is an open-source framework and is freely available on Github.
Why Bulma CSS?
Bulma comes packed with many great features and benefits. The great thing is, it's not an all-or-nothing framework, meaning its modularity lets you use as much or as little as you want. Here are some of the top reasons to choose Bulma:
Bulma's built-in components are responsive by design.
You can customize it and add your own code.
Bulma resets browser styles and exclusively styles based on CSS classes, meaning the HTML you compose has no effect on the styling of your page.
Bulma has built-in support for both FontAwesome 4 and 5, giving you a lot of flexibility in icons for your site or app.
Why use Bulma with React?
Bulma's focus on components and modularity means it pairs nicely with React's component-driven architecture. Bulma can help simplify the coding process so that you can focus more on the architecture of your app rather than the hassles of writing CSS.
The mainstream implementation of Bulma in React is the react-bulma-components package. This package gives you a load of pre-built components that are ready to use. It's compatible with most React frameworks, such as Gatsby, Next.js, and Create React App.
Bulma vs Bootstrap
Bulma and Bootstrap are CSS frameworks that focus on mobile responsiveness and allow developers to build user interfaces fast and easy. As much as they have many similarities, they also have quite a few differences.
Bootstrap has a larger community and has been around longer than Bulma. As a result, more tools (like theming and plugins) are available, and more questions are answered around the internet.
While 90% of Bulma works in IE11, Bootstrap has better compatibility with this browser.Although IE11 will soon be out of support.
Bootstrap has some elements like list group, wells, or page header that Bulma doesn’t have.
Bulma has introduced some accessibility support, but Bootstrap has strong and pervasive compatibility with WCAG 2.0 guidelines.
Bulma, on the other hand, allows developers to create custom-looking applications much easier than Bootstrap. Because of its structure, Bulma allows developers to create custom styles with relative ease. With Bootstrap, you need to go the extra mile to create a custom design, leading to many Bootstrap sites looking very similar.
In this guide, you will be using the Create Blog with Gatsby starter as the starting point. Once you've connected the application to GitHub, you should be able to clone the project on your machine.
In the project's root folder, you will need to install all the necessary dependencies needed for the application to run properly.
Now that you have your project setup you will need to add Bulma CSS to your project.
You can install all the packages we need to use Bulma with this NPM command
npm install bulma sass gatsby-plugin-sass
or this Yarn command:
yarnadd bulma sass gatsby-plugin-sass
Once it is installed, it will be added to your list of dependencies in the project.
Then, add the gatsby-plugin-sass to gatsby-config.js.
In your gatsby-config.js file add the following:
You can also use Bulma by importing the file directly from jsDelivr:
It's not compulsory you use the same colours above. You can edit to fit your preferences.
Grid in Bulma
Bulma's grid system is one of the simplest grid systems. It is mostly used when it comes to simplifying layouts. This particular grid system is rich in features. Columns are used in Bulma to create responsive layouts. Bulma uses a 12 column layout by default, but it can also work with percentage-based and fixed-width columns.
For percentage-based columns, the class can be half, one-third, one-quarter, one-fifth, two-third, three-quarters. These values determine the size of the column based on the size of the container.
Here's an example:
25% width of the container
75% width of the container
For fixed-width columns, the class takes numerical values ranging from 1 to 12 where the values determine the size of the column based on the size of the container.
half width of the container
half width of the container
There's so much more to Bulma than the few you've tried in this tutorial. You can also try implementing the various components that come out of the box. For the default styles, you can also try overriding them to fit your brand specifications. Do check out Bulma documentation for further reading.
Sanity.io is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Give your team exactly what they need to edit and publish their content with the customizable Sanity Studio. Get real-time collaboration out of the box. Sanity.io comes with a hosted datastore for JSON documents, query languages like GROQ and GraphQL, CDNs, on-demand asset transformations, presentation agnostic rich text, plugins, and much more.
Don't compromise on developer experience. Join thousands of developers and trusted companies and power your content with Sanity.io. Free to get started, pay-as-you-go on all plans.
In this guide, you'll be learning how to test your React application with Jest and Puppeteer. It walks through installing, writing, and debugging test scripts on the home page of a website. Testing is very important when it comes to developing web applications. It helps to ensure that your application is free from bugs and your application is behaving as expected.