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 −
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 −
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 −
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.
|
