Building Static Sites with Gatsby and Bulma

Developing Web Sites with Gatsby gives you many privileges over the traditional method of creating static pages with HTML pages.

Why Gatsby

Gatsby is a static site generator like Hugo, Jekyll, and many others. It is used to build static sites that are Progressive Web Apps, follow the latest web standards, and are optimized to be highly performant. It makes use of many popular technologies like ReactJS, GraphQL, Webpack, modern ES6+ JavaScript, and CSS.
It gives the simplicity of working in a popular framework like ReactJS with powerful performance optimization and design tooling.
Gatsby builds the fastest possible website. Gatsby pre-builds the pages and gets them ready to be used. So we need not worry about generating pages when requested and gives a very good client experience.
Gatsby offers many features as plugins which you can use very quickly to make your gatsby website better. With a large userbase comes lots of templates that you can iterate and use for making your own website.

Why Use CSS Frameworks

CSS is a great thing when you think of customization. But working with CSS isn’t easy enough when implementing. Just think of building your website without CSS Frameworks like BootStrap. It won’t be easier now but still, you can do it by writing a good volume of code that you get directly from bootstrap. So rather than writing the same bunch of code everywhere you can get that directly done, thus saving lots of time and you can give more importance to your real stuff than taking care of CSS.
For beginners, these frameworks can help them out by making them understand how the CSS and various components actually work.

GATSBY + BULMA

I have worked on ReactJS before moving to a professional static website. ReactJS is one of the best frameworks due to its brilliant rendering performance. It allows a developer to work on individual components of a web app rather than the whole web app at a time.
So I chose gatsby that actually uses ReactJS thus I can ensure that I don’t take much time in understanding the new framework.
But here comes the other question which css framework to use and there at first I was undoubtedly sure of using antd, a React UI library containing brilliant components which also gives one the privileges as with bootstrap. Also, I have worked with antd on my previous projects so that gave me the boost.

While exploring gatsby through some templates to get to know how gatsby actually works and what should be my approach to write a clean code I came across Bulma, yet another css framework. Enthusiastically I reached the documentation of Bulma and that won my heart. Such an easy approach to css, just never seen before. The best part is the responsive behavior you can give to your site through Bulma.

Bulma is based on Flexbox. The core idea of the flexbox is to give the container the ability to alter its items’ width/height/order to fill the available space in the best way across different display devices and screen sizes. Bulma comes with a very simple grid system. Bulma has very beautiful detailed documentation.
With Bulma, one just needs to think about how the web app should behave in different devices and screen sizes and Bulma gets the thing done for you.

The most important component is the ‘column’ (child of a ‘columns’) which at the base of your web app associated with your end components can give you the desired behavior. Say you just want to make your columns count in a row from 4 to 5. Just add the column and without doing any additional changes to the styling or responsiveness you would get the thing ready.
Rather if you want to occupy certain columns of a 12 columns system use is-7 class. It also gives you other functionalities like offset, nesting, and gaping.

Responsiveness

It is the responsiveness that might make your so beautiful web app on a desktop look dull in a smartphone. Today, you can’t rely on just building out a website for the desktop you have to see for its versions in different devices and across different screen sizes. Bulma makes the thing easy here

Suppose you want to make columns to appear in a row for desktop but the columns to appear as different rows in mobile or lesser columns per row in a middle-sized device like Ipad. Bulma gives you the power to define the size and behavior of columns with changing screen sizes.

<div class="columns is-mobile">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>

The above code defines a row with class-name columns which is the container for the individual columns. Here, 4 columns of equal sizes are contained in a row which would appear as a single row in all devices. The columns work at default on devices other than mobiles. You can change this behavior by adding class is-mobile which would make the columns appear in a row in mobile devices too. Or If you want to make the columns only on devices add class is-desktop, this would make the columns to appear in a row only in screen sizes greater than or equal to devices than a desktop.

If your content comes in multiple rows use is-multiline

Customize Bulma

Bulma is customizable due to a great bunch of Sass variables. You can make changes to existing variables to customize color and other properties.
To check values of initial variables go here
For customizing Bulma in a sass file
1. Import bulma sass variables
@import "~bulma/sass/utilities/initial-variables"

2. Change initial variables
$body-background-color: #000

3. Import bulma
@import "~bulma

Bulma is something that can make your life much easier and web apps behave amazingly across different screen sizes.