Bulma.io: Modern Flexbox based CSS Framework to Speed Up Your Development
There are several CSS frameworks you can use as the foundation of your build, cutting development time substantially and giving you a firm base on which you can create sleek and functional pages. One of such framework is Bulma.io
Bulma is a modern CSS framework based on the well-known Flexbox. It is designed to be responsive and very fluid. It is also one of the most efficient and fastest CSS frameworks out there. The immense flexibility offered by Bulma and the use of Flexbox framework make this CSS framework a must-have for web developers.
Installing Bulma and starting the development project on top of it are both very easy to do. There are three ways to install this modern CSS framework:
You can install Bulma directly on your development – or live – server using NPM. To do this, simply run the command:
NPM install bulma
Use CDNJS CDN
Download from Repository or Clone It
You can also choose to download Bulma from a repository. It is possible to clone it directly if you want https://github.com/jgthms/bulma
Installing Bulma is very easy to do. One extra step you can take is to add Font Awesome . To install, simply add:
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css”>
to your project. That’s it! You are ready to start developing your next website using Bulma.
Key Features and Elements
As mentioned earlier, Bulma is a framework designed to be used to develop responsive web design. It uses Flexbox’s basic grid system and add a lot of features for you to utilize. Some of them are definitely essential to every website, especially if you want to have a fluid, responsive layout that works well on every device.
Building a grid is easy with Bulma. You just need to add a column container, and then place column containers inside it. There is no need to go through complicated CSS identifiers just to have a responsive layout. You can alter the size of each column as well.
Bulma is based on a 12-column system. Naturally, you can offset columns, create as many columns as you need and alter the configuration of each column by placing the correct identifier to the <div> tag. It’s one of the simplest grid system to use.
Aside from columns, Bulma also has tiles. While columns allow you to define the layout of a site horizontally, tiles add vertical control to the equation. Defining tiles is just as easy; a simple <div class=”tile”> tag is all you need.
You can then customize each tile to your liking. In fact, creating a mosaic-like set of tiles to host your content is never easier. Each tile can have its own title, subtitle and other web elements you want to add to it.
Speaking of web elements, there are several elements and components that I really like. Bulma has a lot of them ready to be utilized, such as:
If you’re like me and you love flat design theme, you will certainly love Bulma’s Card component. It allows you to create a flat card, with an image at the top and the content at the bottom. It is similar to the Card layout used by Google.
Level is another handy component to use. In order to place elements, you just define them in levels and customize the way each level behaves.
Yes, Bulma has a built-in modal function. It even supports the combination of modal and the Card component we discussed earlier. This component is handy for displaying certain things, such as images and the usual newsletter opt-in form. The content of the modal is just as customizable as well.
Bulma’s Documentation page has all the elements and components listed, complete with working samples and how you can use them to your advantage. Be sure to check them out to learn more.
Go and install BULMA
Visit the framework’s site, play around with it and try to develop a page with Bulma as the foundation. You’ll be pleasantly surprised; I promise.