Bulma | Introduction
Bulma is an Open source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. It is highly responsive, minimizing the use of media queries for responsive behavior.
Bulma also allows us to add our own CSS styling but it is advised to use an external stylesheet over inline styling.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
Using Bulma: If you are a beginner web developer the simplest way is to use a jsDelivr CDN link within the head section of HTML file using link tag.
Another cool feature with Bulma is that it can simply import the SASS files you need for the particular elements on which you want to apply the Bulma styling. For example, if you want the Bulma styling for the form elements you can import only that sass file. Otherwise, you can install the Bulma package with npm.
Example: The Bulma syntax is extremely simple, there are predefined class names that help us to create elements according to the name.
It creates a stylized button with the word Hello on it.
The button created is not like the generic HTML button.
Each Bulma element has multiple alternative styles available, and these can be applied by using is- or has- class modifiers.
These modifiers form the basis for manipulating objects in Bulma. Some of the color modifiers that Bulma provides are:
The size modifiers ranging from is-size-1 to is-size-6. These helps in changing the font size. Try using h1 to h6 tags in Bulma, but you will notice that there is no change in the visible font size. This is because Bulma only uses the modifiers to change the size of the text and not in the standard HTML way. Try running this code to understand how h1 to h6 tags do not impact the size of the text:
hello world hello world hello world
Add multiple variations within the element class attribute. Try this code and observe that we have used two modifiers one for the color and the second one for the size.
- Responsive design for all devices(desktops, tablets and mobiles).
- Easy to read and write the code.
- In development stage.
- Needs minor improvements.
- New framework