Bulma describes itself has a free, open source CSS framework based on Flexbox and used by more than 150,000 developers. I have always been interested in this framework. To be honest I didn’t know others existed besides bootstrap. Since then I have researched a variety of other open source CSS frameworks. This will however be my first time trying another one out. Lets get started. Note – usually I add code snippets in the post but some of them are having formatting issues so i linked to them instead.
Getting Started
Lets get started using Bulma css framework. Navigate to the website at https://bulma.io/.
Press the download button. This will give you the CSS files you need to start working with Bulma. You can also check out the documentation when you get time here.
Once you do that you can add the CSS file to you webpage as shown below.
<link rel="stylesheet" href="css/bulma.min.css">
Working with Bulma
We can create a nice coloured heading called a hero.
Notice how the classes are named. We can change is-primary to is-danger to change the color of the hero.
Tiles and Columns
We have cute little things called tiles.
Table and Cards
Next we have a table inside of a card.
Nothing special here except the is-fullwidth CSS selector.
We also have some buttons in the actions column. Note the is-small, is-primary, is-danger CSS selectors.
Form Elements
Working with form elements is easy in Bulma. A text input is shown below.
A select input is shown below.
We can add is-primary and is-danger classes to inputs as well. We can use this when performing validation. Below we add the is-danger class to the input and the help text below. We also have cute icons by adding the has-icons-left and has-icons-right selectors.
Navigation Bar
The navigation bar at the top of the page is also easy to create. A nav element is shown below.
We add the home and documentation menu items above. We can add a dropdown menu as well as shown below. This needs to be within the navbar-menu and navbar-start div’s.
The sign-up and login buttons can be placed quite easily. As shown below using the navbar-end class.
Media Object
You can create a media object easily.
A simple media object is shown above. The parent element is a article with CSS class media. Other important classes are media-left to display the image on the left. Media-content is where the bulk of the content goes.
Login Page
If we wanted to create a login page. We can use a center class to center our form. Using the is-centered CSS class we can make our form centered in the page.
