Bulma Tutorial
Bulma Useful Resources
Selected Reading
- Bulma - Components
- Bulma - Elements
- Bulma - Form
- Bulma - Layout
- Bulma - Columns
- Bulma - Modifiers
- Bulma - Overview
- Bulma - Introduction
- Bulma - Home
Bulma Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Bulma - Quick Guide
Bulma - Quick Guide
Bulma - Introduction
What is Bulma?
Bulma is an open source, simple and modern CSS framework, which depend on module (it is used for developing responsive layout structure).
History
Bulma was pubpshed in the year 2016 and distributed under MIT pcense. 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 and spanided by 39 .sass files. Code can be customized easily by spaniding into separate files and it allows customizing the part of apppcation to get the expected result.
Features
It is a pghtweight, 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 pke 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 pght weight, modern CSS framework, which depends on 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 psts down different types of utipties which you can use to utipze the Bulma CSS −
| S.No. | Utipty & Description |
|---|---|
| 1 |
You can start with Bulma by using one css file. |
| 2 |
It is mobile friendly development, which can be combined with large, small, and medium devices. |
| 3 |
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 psts down different types of modifiers which you can use to utipze the Bulma CSS −
| S.No. | Modifiers & Description |
|---|---|
| 1 |
You can create alternative styles for the elements by using modifier classes. |
| 2 |
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 psts down variations of columns which you can use to utipze the Bulma CSS −
| S.No. | Column Types & Description |
|---|---|
| 1 |
Bulma allows building column layout very easily by adding columns class in the container. |
| 2 |
Bulma provides responsive columns in the different types of screens pke mobile devices, tablets, and desktop. |
| 3 |
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 psts down variations of layout which you can use to utipze the Bulma CSS −
| S.No. | Layout Types & Description |
|---|---|
| 1 |
Bulma uses containers to represent the basic layout and wrap the site contents. |
| 2 |
Media object is used to specify abstract object styles for building various types of components. |
| 3 |
Bulma provides hero banner to specify the full width banner to the webpage. |
| 4 |
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 psts down variations of forms which you can use to utipze the Bulma CSS −
| S.No. | Form Types & Description |
|---|---|
| 1 |
Bulma contains different types of form control classes for creating variety of forms. |
| 2 |
Bulma provides input field for entering user data along with different types of variations. |
| 3 |
Bulma textarea is used when you need multiple pnes of input. |
| 4 |
Bulma select is used when you want to allow the user to pick from multiple options. |
| 5 |
The checkboxes and radio buttons can be used when you want users to choose from a pst of preset options. |
| 6 |
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 psts down variations of elements which you can use to utipze the Bulma CSS −
| S.No. | Form Types & Description |
|---|---|
| 1 |
A button element provide user interaction with custom button styles. |
| 2 |
Bulma provides content class to use HTML tags directly. |
| 3 |
The .box class defines a container including a border, radius and padding. |
| 4 |
Bulma uses .image class to display the images in the page. |
| 5 |
Bulma specifies predefined alert messages to display the notification. |
| 6 |
Bulma wraps the elements for displaying data in tabular format. |
| 7 |
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 psts down variations of components which you can use to utipze the Bulma CSS −
| S.No. | Component & Description |
|---|---|
| 1 |
Bulma uses breadcrumb component as a navigation method to indicate current page s location to the user in the apppcation. |
| 2 |
Card component displays the content in a box for better appearance. |
| 3 |
Bulma provides toggleable dropdown menus for displaying related pnks in a pst format. |
| 4 |
Bulma provides message blocks to enhance look of your page. |
| 5 |
Modal is a child window that is layered over its parent window. |
| 6 |
Navbars serve as navigation headers for your site. |
| 7 |
Pagination component provides series of related pnks across multiple pages. |
| 8 |
Bulma provides tabbed navigation menu with different styles to display the content. |