Building Static Sites with Gatsby and Bulma

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.

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

<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>

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"

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store