Bulma - Free and open source pure CSS front-end UI framework, focusing on building mobile-first responsive web interfaces

Bulma - Free and open source pure CSS front-end UI framework, focusing on building mobile-first responsive web interfaces

An easy-to-use CSS framework. Although there is only one CSS file, it has powerful functions. It is very popular among developers abroad, and I recommend it to everyone.

About the Bulma CSS Framework

Bulma is a simple and easy-to-customize CSS UI framework. It provides many predefined styles. Developers can directly call the class name to use it. Through the combination of specifications, it can quickly build a web interface.

bulma official website

Bulma officially provides dozens of basic components, which are very beautiful and are also implemented with CSS without any Javascript code.

Bulma CSS Framework Technical Features

  • All functions are collected in one CSS file, which is extremely simple and has no other dependencies
  • Bulma provides a pre-defined class collection, developers only need to call it on the HTML code
  • Bulma is composed of many modular sass files, which has the advantage that we can import them on demand, reducing the packaging footprint of development projects
  • Designed for responsiveness! Like bootstrap, Bulma is a mobile-first framework, even if the CSS syntax is not familiar enough, you can easily build an interface that adapts to different screens

Develop hands-on experience and usage suggestions

We know that Vue.js is a JavaScript framework for developing user interfaces. This is a set of declarative and componentized programming models that allow us to develop interfaces more efficiently without using cumbersome JavaScript or jQuery development methods.

Vue solves the interaction between data and interface, so many Vue UI component libraries have emerged since its birth . I have shared many free and open source Vue UI component libraries .

Bulma is an easy-to-use CSS UI framework. Unlike most of the UI frameworks introduced before, all Bulma components are implemented in CSS, so it can be used with popular JS frameworks such as Vue/ React .

bulma grid system

When I saw Bulma for the first time, I was attracted by the elegant component design and color matching, and I believe you will like it too.

The easiest way to use Bulma is to import the full amount of files directly in the HTML:

It is recommended to import the bulma-rtl.min.css file locally after downloading the project from the official website.

It can also be installed in an engineering way:

bulma button component

bulma form component

The official website currently only supports English. Although it can be read with the help of translation tools, technical documents can easily be difficult to understand when translated by a machine. After searching the Internet, I found a Chinese document translated by a master. The URL is here .

Free Open Source Instructions

The author of Bulma is developer and designer Jeremy Thomas. He is also the author of the book "CSS in 44 minutes". He has 15 years of web development experience and contributed open source projects that have benefited millions of developers.

Bulma is also a free and open source project. The source code is hosted on Github based on the MIT open source agreement. Any individual or company can download and use it for free, and supports free authorization for use in commercial projects.

Original link: https://www.thosefree.com/bulma

Guess you like

Origin blog.csdn.net/weixin_45583710/article/details/128596715