Trying to find a new framework to build your webpage? Look no further than Bulma.io
One of the most popular frameworks that web developers have been using to design web page layouts has been the infamous Bootstrap CSS framework. One of the downsides that comes with using Bootstrap is it’s implementation of Javascript text that can easily throw someone off that only has prior knowledge of HTML5 and CSS styling. This is where Bulma really makes a name for itself with a mobile-responsive layout and a simple structure design for users to really customize the look and feel of their webpages.
The basics of using Bulma to build a webpage starts with its layout elements. Normal webpage headers are featured as “Hero” elements which create banners that span the width of the webpage. The content area or body of a webpage is where you begin to notice the real differences between Bootstrap and Bulma.
Bulma simliar to Bootstrap utilizes the columns for the width of the page but using an element called “Tiles”, it creates an easier way to customize a layout of a page. The start of a large group of tiles is created by calling the element, “Ancestor”. Within that element you then can start to layout “Parent” elements that append to the web page horizontally with any “Children” elements that will be contained inside those. Using the Column system similar you can fully utilize customized sizes as well as verticality using Children elements nested inside of their Parents that prepend them.
One area that sets Bulma apart from other CSS frameworks is it’s propensity to emphasize customizable elements that are incorporated onto a page. With elements like dropdown lists, input fields, and buttons, Bulma has a preset list of colors that users can easily choose from to change aspects. These elements use the syntax “is-__” with certain colors being assigned to specific words. The documentation provided on Bulma’s website is very good about letting users know which elements are customizable either with different colors or sizes based on the syntaxes that they provide. Elements that normally might require Javascript are a big sell for Bulma first time users as they also include ways to include “Notifications” similar to Modals.
Knowing how Bulma sets itself apart from other frameworks, the question you might asking yourself is, “should I use it?” If you’re looking for a very easy to learn CSS framework and are emphasizing a mobile-friendly webpage, looking at the documentation on Bulma’s webpage might be where that train of thought leads. After hours of just playing with page layouts to better understand how the framework works, it has become one of my favorite tools in the shed.
