Bulma - Quick Guide

Bulma - Introduction

What is Bulma?

Bulma is an open source, simple and modern CSS framework, which depend on flexbox module (it is used for developing responsive layout structure).

History

Bulma was published in the year 2016 and distributed under MIT license. The current version of Bulma is 0.7.1, was released on April 18, 2018.

Why to use Bulma?

Bulma is very easy to learn and setup. It is built with SASS and divided by 39 .sass files. Code can be customized easily by dividing into separate files and it allows customizing the part of application to get the expected result.

Features

It is a lightweight, modern CSS framework, which uses Flexbox.
It contains mobile first styles in a single file, instead of in separate files.
It is customizable and modularizable.

Advantages

It provides responsive design for desktops, tablets and mobiles.
It is pure CSS framework, so that you can combine with any JavaScript framework like AngularJS, ReactJS etc.
It uses minimal HTML code, which makes easy to read and write the code.

Disadvantages

It is a new framework, which is not as large of a community.
It has less documentation and need some minor improvement.
This framework is still in development phase.

Bulma - Overview

Description

Bulma is a light weight, modern CSS framework, which depends on flexbox module (it is used for developing responsive layout structure and fancy designs).

The overview of Bulma includes getting started with Bulma, responsiveness (you can view the web pages on different devices such as desktops, tablets, and phones), colors, functions to define colors and values, and mixins (group of CSS properties that allow you to use properties of one class for another class) in the Bulma.

The following table lists down different types of utilities which you can use to utilize the Bulma CSS −

S.No.	Utility & Description
1	Getting started with Bulma You can start with Bulma by using one css file.
2	Responsiveness and Colors It is mobile friendly development, which can be combined with large, small, and medium devices.
3	Functions and Mixins Bulma uses some functions and mixins to define values and elements respectively.

Bulma - Modifiers

Description

The modifiers in Bulma includes alternative styles for the elements by using classes, responsive classes to alter styles, color helpers for changing color of the elements, typography helpers for changing size and color of the text.

The following table lists down different types of modifiers which you can use to utilize the Bulma CSS −

S.No.	Modifiers & Description
1	Modifiers syntax and Responsive Helpers You can create alternative styles for the elements by using modifier classes.
2	Color and Typography Helpers You can use the color helpers for changing color of the text or background.

Bulma - Columns

Description

Bulma provides responsive grid system (creating page layout through a series of rows and columns), that scales up to 12 columns within a container. Columns will re-arrange as device or viewport size increases.

The following table lists down variations of columns which you can use to utilize the Bulma CSS −

S.No.	Column Types & Description
1	Column layout and Sizes Bulma allows building column layout very easily by adding columns class in the container.
2	Columns Responsiveness and Nesting Bulma provides responsive columns in the different types of screens like mobile devices, tablets, and desktop.
3	Columns Gap and Options Columns create equal gap between column content.

Bulma - Layout

Description

The Bulma layout describes structure of the webpage, which is designed by using its CSS classes.

The following table lists down variations of layout which you can use to utilize the Bulma CSS −

S.No.	Layout Types & Description
1	Container and Levels Bulma uses containers to represent the basic layout and wrap the site contents.
2	Media Object Media object is used to specify abstract object styles for building various types of components.
3	Hero banner Bulma provides hero banner to specify the full width banner to the webpage.
4	Tiles Bulma creates 2-dimensional layout by using a single element class.

Bulma - Form

Description

The Bulma form element specifies user input data by using input elements (such as text fields, checkboxes, radio buttons, and more) and send it to a server for processing the data.

The following table lists down variations of forms which you can use to utilize the Bulma CSS −

S.No.	Form Types & Description
1	Form controls Bulma contains different types of form control classes for creating variety of forms.
2	Input Bulma provides input field for entering user data along with different types of variations.
3	Textarea Bulma textarea is used when you need multiple lines of input.
4	Select Bulma select is used when you want to allow the user to pick from multiple options.
5	Checkbox and Radio The checkboxes and radio buttons can be used when you want users to choose from a list of preset options.
6	File It is used to upload the files from user data.

Bulma - Elements

Description

Bulma provides different types of elements such as box element which can be used as container, button element, image container to specify the image, table element etc.

The following table lists down variations of elements which you can use to utilize the Bulma CSS −

S.No.	Form Types & Description
1	Button A button element provide user interaction with custom button styles.
2	Content Bulma provides content class to use HTML tags directly.
3	Box and Icon The .box class defines a container including a border, radius and padding.
4	Image Bulma uses .image class to display the images in the page.
5	Notification and Progress bars Bulma specifies predefined alert messages to display the notification.
6	Table Bulma wraps the elements for displaying data in tabular format.
7	Tag and Title Bulma provides small labels called tags to display the additional information.

Bulma - Components

Description

Bulma comes with pre-styled components, which provides dropdowns, modal, pagination, navbar, tabs etc to make user experience easily in the page.

The following table lists down variations of components which you can use to utilize the Bulma CSS −

S.No.	Component & Description
1	Breadcrumb Bulma uses breadcrumb component as a navigation method to indicate current page's location to the user in the application.
2	Card Card component displays the content in a box for better appearance.
3	Dropdown Bulma provides toggleable dropdown menus for displaying related links in a list format.
4	Message Bulma provides message blocks to enhance look of your page.
5	Modal Modal is a child window that is layered over its parent window.
6	Navbar Navbars serve as navigation headers for your site.
7	Pagination Pagination component provides series of related links across multiple pages.
8	Tabs Bulma provides tabbed navigation menu with different styles to display the content.