Introduction to Bulma a CSS framework.

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"&gt;

Working with Bulma

We can create a nice coloured heading called a hero.

A hero in bulma css framework

Notice how the classes are named. We can change is-primary to is-danger to change the color of the hero.

Hero with is-danger class.

Tiles and Columns

We have cute little things called tiles.

A tile bulma css

Table and Cards

Next we have a table inside of a card.

Table in bulma css framework

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.

Text input bulma css

A select input is shown below.

Select input bulma css framework

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.

Email validation

Navigation Bar

The navigation bar at the top of the page is also easy to create. A nav element is shown below.

A nav bar – bulma css

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.

Dropdown menu – Bulma CSS

The sign-up and login buttons can be placed quite easily. As shown below using the navbar-end class.

Right Menu buttons

Media Object

You can create a media object easily.

Bulma Media Object

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.

Center Form

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s