Time for an update, using Bulma framework

Published: Sep 8, 2017 by C.S. Rhymes

It has been a long time since I last updated the design of my site and as a Frontend Developer it didn’t seem right to wait any longer. I have used a variety of different frontend frameworks in the past, from Foundation, to Bootstrap, but this time I wanted something different, so with a cup of coffee in hand I started looking for something new.

Coffee

When I started learning Vue.js I found a great series of videos on Laracasts and within the videos it mentions a CSS only framework called Bulma.

This was a bit of a change to me. Normally I would use a framework that offered both CSS and JavaScript to make it easier and quicker to implement, but then if you are going to use Vue.js you only need the CSS aspect of a Framework so this is perfect for this use case.

I started using Bulma with Vus.js projects, such as the times table maths quiz, and really started to enjoy the syntax and the simplicity of the classes and styles. The biggest advantage was that it used flexbox by default, meaning you can do things like vertically align content with ease. It also means you can make use of auto adjusting with of columns when you add more, or make one narrow and the other expanded.

Previously I had made my own CSS for my site, but after using Bulma for a couple of months I decided it was time to use it on my own website. I really like the fact that it results in a minimal and clean looking design that works great on all screen sizes.

Bulma is now at version 0.5, with new features and updates added regularly and from the github page it seems to have a big following, with over 19 thousand stars already.

Anyway, I hope you like the results of the update. I’m now thinking of what to work on next to keep improving the site!

Share

Latest Posts

Building a VS Code Extension for Gutenberg blocks
Building a VS Code Extension for Gutenberg blocks

I have been tasked with building a new website using WordPress. The last time I used WordPress was a few years ago and involved using Advanced Custom Fields to build custom pages and layouts. Things have changed a lot over the years and now there is the built in Gutenberg editor, which uses blocks to create a custom layout and add content. The trouble was, there didn’t seem to be great support in Visual Studio Code for the blocks, as they use HTML comments.

Using Pest to test Laravel Livewire validation rules
Using Pest to test Laravel Livewire validation rules

Last year I wrote a post about testing Laravel Livewire validation rules with PHP Unit. This post uses the same techniques as that post, but shows how to transfer it to Pest instead of PHP Unit.

Mocking window.location in Jest
Mocking window.location in Jest

Recently I had to write some tests for a piece of JavaScript code that used window.location. This left me trying to figure out how to mock the window.location so that I could pass in dummy data and ensure that the data I got back was what was expected. Here was how I managed to solve the issue.

How NOT to make a website

How NOT to make a Website

By C.S. Rhymes

From £8.99

Nigel's Intranet Adventure

Nigel's Intranet Adventure

By C.S. Rhymes

From £2.69