AN INTRODUCTION TO RESPONSIVE DESIGN WITH BULMA
Bulma is a free, open source framework which is used for creating responsive designs. it is based on the css3 flexbox model and relatively easy to learn.
There are many other css frameworks like Bootstrap, Foundation and Material design. Some frameworks are free while others are payed. Choosing and learning the right one might be a quite frustruating. Bulma is outstanding for the various reasons:
We would build this page from begining to end in this post.
There are many ways to include Bulma framework into your new or old project. I will work you through some of the most used methods.
1. To get started create a new folder with the name of you project like "bulma_post"
2. Open your folder in your prefered text edditor and create and index.html file. I will be using Visual Studio code throughout this post. To link bulma to your project we would be downloading bulma through their official website bulma.io.
3. Click the download button You will see on the website.When the file has finished downloading open the zip and extract the css folder to your project location
4. Go to your index.html file and setup the link to the bulma.min.css
1. Bulma Navbar: Bulma has some quite easy to remember navbar classes like. navbar, navbar-brand, navbar-item, navbar-menu, navbar-start and navbar-end
The navbar class is the general container(body) of the whole navbar. so in practice
The navbar-brand is the part of the navbar that contains the logo which is shown no matter the screen size
The navbar-item is used for elements such as a, imb, span or p. that could be used as items in the navbar.
The navbar-menu shows the collapsable part of the navbar. usualy the navbar-start and navbar-end are always children of the navbar-menu