Tuesday, 30 January, 2018 UTC
Summary
In the world dominated by Bootstrap, surrounded by Semantic UI and Foundation, it’s hard for alternatives to break through.
However the mentioned trio is well known, mature and exist on the market for quite long now, they’re all relatively heavy and they all require deep understanding of the core, while doing customisations (have you ever done custom dropdowns in Semantic??!).
The fresh breeze
However the mentioned trio is well known, mature and exist on the market for quite long now, they’re all relatively heavy and they all require deep understanding of the core, while doing customisations (have you ever done custom dropdowns in Semantic??!).
There comes Bulma. Beautiful, lightweight and stylish CSS framework made by Jeremy Thomas. If you haven’t done it already – I encourage you to visit his website – the site just lives in the browser! It’s super-interactive, beautiful and it’s pure CSS!
The main advantage of using Bulma is that its box model is fully based on Flexbox. (Yes! no more CSS floats and percentages!)
Bulma claims it’s main features are:
- 100% responsive
- Modular
- Modern
- Free
I’ve created a very small side project during the last weekend using Next.js and Bulma. Here’s a small piece of the notes I’ve done during working with this framework.
Beauty of Flexbox
As I mentioned earlier, Bulma’s grid is fully built with Flexbox. Achieving flexible layout with same-size columns is as simple as adding .column class to your HTML element.
You can adjust columns to get different sizes by adding appropriate modifier to it eg. is-four-fifths, is-two-fifths, is-half etc.
Bulma is built with mobile-first approach, which makes every element optimised for vertical reading.
Modularity
The framework itself weights 21kB minified and gzipped. It’s still not bad but to make it better you can import only the modules you want.
Bundle is made with SASS and is divided by 39 partial .sass files. All of them you can import separately, reuse in your SASS styles and have access to those components which you only need.
In Bulma, customisation ability is simply fantastic. Code divided into separate files across components boundaries, along with separate variables files allows us to customise almost every part of the app and achieve the result we want.
Clean form controls
When choosing a CSS framework the first thing I look at (after customisation and maintainability) is approach to the form controls style.
When it comes to the form controls I’m a traditionalist – I prefer native, browser inputs than fancy JavaScript-created solutions. The reason is simple – touch opportunity on mobile devices.
In Bulma we’ve got access to styles for all the native form elements, including their error state, help texts, variety of beautiful buttons and easy to use inputs with icons inside.
All you need to do is just adding a few classes to your markup. The beauty of Bulma does not require you to create additional DOM elements to achieve nice styling.
Magical tiles
Bulma comes with lots of extra components, making our lifes easier and the websites we create even more beautiful. Worth mentioning are tiles, that you can compose, nest and fill with content and they will fantastically align to each other forming sort of layout.
I also really liked the Level component, which makes horizontal alignment super-easy and Hero which allows hassle-free creation of showcases and hero banners.
To summarise, Bulma is a great multi-purpose CSS framework, with a lot of built-in features and components we can easily reuse and customise. While it’s still in development, it’s really stable nad mature, so I would not stress too much about using it in commercial project.
Getting started
To get started in the easiest way we just need to include CSS file from CDN:
https://cdnjs.com/libraries/bulma
Or install it via NPM:
npm install bulma
If you wish to get access to FontAwesome icons, don’t forget including it in your app:
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
I hope you liked this little introduction. In the next part of it I’m planning to publish a tutorial of using Bulma with Next.js, so stay tunned
The post Bulma: CSS framework you should consider in 2018 appeared first on matwrites.com.