Sign in

If you’re anything like me, extremely lazy and always procrastinating, then you love a good shortcut. It can be for anything, from taking the shorter route home to prepping your sandwich on a paper towel to avoid cleaning another dish. Being a web developer in training is no different for me-there are a lot of languages to learn and so much syntax to memorize. So when I learned about the concept of a CSS framework and how much easier it will make your life be, I got excited. For a recent project, I was tasked with handling the HTML and CSS and as such, I was allowed to select any CSS Framework. I ended up going with Bulma at the recommendation of my tutor, Philip. I was happy to learn that it was very straightforward and easy to adapt to. I took to it like fish to water and I thought I’d share my recently acquired skills with whomever is interested in learning Bulma.

Bulma is a CSS Framework that aids you in styling your HTML code. For my project, I barely had any input to my CSS file. As with any other instance, you start by linking Bulma to html. Once done, you can pick from an array of templates that Bulma provides to create anything from columns to dropdown menus. You can also add styling within the html with color, sizes etc. using customized elements. For instance, If I wanted to style my search button with the color blue, I would put “is-info” beside its assigned class. Bulma also has built-in mobile responsiveness for tablets and gadgets bigger than that. If you wish to make it responsive on a cellphone as well, you simply have to add “is-mobile” beside the class of “columns” or “level.”

“is-info” placed after the button class
A blue search button as a result of the “is-info” element
Bulma’s built-in mobile responsiveness

Bulma has many features that make it very user friendly but one new concept that I learned which happens to be my personal favorite, is the “Tiles” function. When I was first working on my project, I was struggling to get my boxes into two columns. I ended up discovering the Tiles function after much research and adapted my code into it. Much to my relief, I got the column to work with ease. The Tiles function simply uses the concept of “nesting” which puts one section or box into another box to create columns. It uses the element, “is-ancestor” for the biggest box and has the element, “is-parent” within it and the element, “is-child” within that. That allows for you to create as many columns as you want and input as many sections/boxes within that column as well. The result is a very neat and organized website.

Bulma’s Tiles template featuring “is-ancestor”, “is-parent” and “is-child” elements
Very neat columns and organized boxes as a result of Bulma’s Tiles function

Aside from Bulma, I wanted to talk about Agile Team Practices that helped my team’s workflow tremendously. One aspect that we practiced regularly is the “stand-up” or “scrum.” A scrum, taking inspiration from football and rugby, is a team huddle before the day starts. It is used to talk about “What you did yesterday?”, “What are you working on today?” and “What issues are blocking you?”. It is a good way to motivate the team as it talks about your successes and helps you work through your failures while getting the support of your team. Another very handy practice is using the kanban method, specifically kanban boards. A kanban board is a tool that helps with the team’s workflow by tracing the work assigned to a team member and tracking its progress. The boards can be digital or physical but regardless of its nature, the board’s purpose is to visualize the team’s work, standardize the workflow as well as resolve and identify all blockers that any team member is having. A basic kanban board usually has three sections: To Do, In Progress, and Done. The task card is moved to each section based on its current status. The kanban method is great for motivation purposes as well as accountability.

Kanban board using GitHub Projects

There you go. Those are some takeaways from my working on this week’s projects. I learned a lot. Took some shortcuts. But the job got done. How? By being Agile, of course!