bulma/README.md

# [Bulma](https://bulma.io)

Bulma is a **modern CSS framework** based on [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes).

[![npm](https://img.shields.io/npm/v/bulma.svg)][npm-link]
[![npm](https://img.shields.io/npm/dm/bulma.svg)][npm-link]
[![Awesome][awesome-badge]][awesome-link]
[![Join the chat at https://gitter.im/jgthms/bulma](https://badges.gitter.im/jgthms/bulma.svg)](https://gitter.im/jgthms/bulma)
[![Build Status](https://travis-ci.org/jgthms/bulma.svg?branch=master)](https://travis-ci.org/jgthms/bulma)

<a href="https://bulma.io"><img src="https://raw.githubusercontent.com/jgthms/bulma/master/docs/images/bulma-banner.png" alt="Bulma: a Flexbox CSS framework" style="max-width:100%;" width="600" height="315"></a>

## Quick install

Bulma is constantly in development! Try it out now:

### NPM

```sh
npm install bulma
```

**or**

### Yarn

```sh
yarn add bulma
```

### Bower

```sh
bower install bulma
```

### Import
After installation, you can import the CSS file into your project using this snippet:

```sh
import 'bulma/css/bulma.css'
```

### CDN

[https://cdnjs.com/libraries/bulma](https://cdnjs.com/libraries/bulma)

Feel free to raise an issue or submit a pull request.

## CSS only

Bulma is a **CSS** framework. As such, the sole output is a single CSS file: [bulma.css](https://github.com/jgthms/bulma/blob/master/css/bulma.css)

You can either use that file, "out of the box", or download the Sass source files to customize the [variables](https://bulma.io/documentation/overview/variables/).

There is **no** JavaScript included. People generally want to use their own JS implementation (and usually already have one). Bulma can be considered "environment agnostic": it's just the style layer on top of the logic.

## Browser Support

Bulma uses [autoprefixer](https://github.com/postcss/autoprefixer) to make (most) Flexbox features compatible with earlier browser versions. According to [Can I use](https://caniuse.com/#feat=flexbox), Bulma is compatible with **recent** versions of:

* Chrome
* Edge
* Firefox
* Opera
* Safari

Internet Explorer (10+) is only partially supported.

## Documentation

The documentation resides in the [docs](docs) directory, and is built with the Ruby-based [Jekyll](https://jekyllrb.com/) tool.

Browse the [online documentation here.](https://bulma.io/documentation/overview/start/)

## Related projects

| Project                                                                              | Description                                                                            |
|--------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------|
| [Bulma with Attribute Modules](https://github.com/j5bot/bulma-attribute-selectors)   | Adds support for attribute-based selectors                                             |
| [Bulma with Rails](https://github.com/joshuajansen/bulma-rails)                      | Integrates Bulma with the rails asset pipeline                                         |
| [Vue Admin](https://github.com/vue-bulma/vue-admin)                                  | Vue Admin framework powered by Bulma                                                   |
| [Bulmaswatch](https://github.com/jenil/bulmaswatch)                                  | Free themes for Bulma                                                                  |
| [Goldfish](https://github.com/Caiyeon/goldfish)                                      | Vault UI with Bulma, Golang, and Vue Admin                                             |
| [ember-bulma](https://github.com/open-tux/ember-bulma)                               | Ember addon providing a collection of UI components for Bulma                          |
| [Bloomer](https://bloomer.js.org)                                                    | A set of React components for Bulma                                                    |
| [React-bulma](https://github.com/kulakowka/react-bulma)                              | React.js components for Bulma                                                          |
| [Buefy](https://buefy.github.io)                                                     | Lightweight UI components for Vue.js based on Bulma                                    |
| [vue-bulma-components](https://github.com/vouill/vue-bulma-components)               | Bulma components for Vue.js with straightforward syntax                                |
| [BulmaJS](https://github.com/VizuaaLOG/BulmaJS)                                      | Javascript integration for Bulma. Written in ES6 with a data-* API                     |
| [Bulma-modal-fx](https://github.com/postare/bulma-modal-fx)                          | A set of modal window effects with CSS transitions and animations for Bulma            |
| [Bulma.styl](https://github.com/log1x/bulma.styl)                                    | 1:1 Stylus translation of Bulma                                                        |
| [elm-bulma](https://github.com/surprisetalk/elm-bulma)                               | Bulma + Elm                                                                            |
| [elm-bulma-classes](https://github.com/ahstro/elm-bulma-classes)                     | Bulma classes prepared for usage with Elm                                              |
| [Bulma Customizer](https://bulma-customizer.bstash.io/)                              | Bulma Customizer &#8211; Create your own **bespoke** Bulma build                       |
| [Fulma](https://mangelmaxime.github.io/Fulma/)                                       | Wrapper around Bulma for [fable-react](https://github.com/fable-compiler/fable-react)  |
| [Laravel Enso](https://github.com/laravel-enso/enso)                                 | SPA Admin Panel built with Bulma, VueJS and Laravel                                    |
| [Django Bulma](https://github.com/timonweb/django-bulma)                             | Integrates Bulma with Django                                                           |
| [Bulma Templates](https://github.com/dansup/bulma-templates)                         | Free Templates for Bulma                                                               |
| [React Bulma Components](https://github.com/couds/react-bulma-components)            | Another React wrap on React for Bulma.io                                               |
| [purescript-bulma](https://github.com/sectore/purescript-bulma)                      | PureScript bindings for Bulma                                                          |
| [Vue Datatable](https://github.com/laravel-enso/vuedatatable)                        | Bulma themed datatable based on Vue, Laravel & JSON templates                          |
| [bulma-fluent](https://mubaidr.github.io/bulma-fluent/)                              | Fluent Design Theme for Bulma inspired by Microsoft’s Fluent Design System             |
| [csskrt-csskrt](https://github.com/4d11/csskrt-csskrt)                               | Automatically add Bulma classes to HTML files                                          |
| [bulma-pagination-react](https://github.com/hipstersmoothie/bulma-pagination-react)  | Bulma pagination as a react component                                                  |
| [bulma-helpers](https://github.com/jmaczan/bulma-helpers)                            | Functional / Atomic CSS classes for Bulma                                              |
| [bulma-swatch-hook](https://github.com/hipstersmoothie/bulma-swatch-hook)            | Bulma swatches as a react hook and a component                                         |
| [BulmaWP](https://github.com/tomhrtly/BulmaWP)                                       | Starter WordPress theme for Bulma                                                      |
| [Ralma](https://github.com/aldi/ralma)                                               | Stateless Ractive.js Components for Bulma                                              |
| [Django Simple Bulma](https://github.com/python-discord/django-simple-bulma)         | Lightweight integration of Bulma and Bulma-Extensions for your Django app              |
| [rbx](https://dfee.github.io/rbx)                                                    | Comprehensive React UI Framework written in TypeScript                                 |
| [Awesome Bulma Templates](https://github.com/aldi/awesome-bulma-templates)           | Free real-world Templates built with Bulma                                             |
| [Trunx](http://g14n.info/trunx)                                                      | Super Saiyan React components, son of awesome Bulma, implemented in TypeScript         |
| [@aybolit/bulma](https://github.com/web-padawan/aybolit/tree/master/packages/bulma)  | Web Components library inspired by Bulma and Bulma-extensions                          |
| [Drulma](https://www.drupal.org/project/drulma)                                      | Drupal theme for Bulma.                                                                |
| [Bulrush](https://github.com/textbook/bulrush)                                       | A Bulma-based Python Pelican blog theme                                                |

## Copyright and license

Code copyright 2019 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma/blob/master/LICENSE).

[npm-link]: https://www.npmjs.com/package/bulma
[awesome-link]:  https://github.com/awesome-css-group/awesome-css
[awesome-badge]: https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg
-												Use https for Bulma

											
										
										
											2017-10-16 12:23:57 +00:00
+								# [Bulma](https://bulma.io)
-												Init

											
										
										
											2016-01-24 00:03:43 +00:00
-												Fix #1207

											
										
										
											2017-09-18 21:36:53 +00:00
+								Bulma is a **modern CSS framework** based on [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes).
-												Fix #1812

											
										
										
											2018-05-23 20:27:51 +00:00
+								[![npm](https://img.shields.io/npm/v/bulma.svg)][npm-link]
 								[![npm](https://img.shields.io/npm/dm/bulma.svg)][npm-link]
 								[![Awesome][awesome-badge]][awesome-link]
-												Add gitter, Fix templates

											
										
										
											2016-04-16 20:50:48 +00:00
+								[![Join the chat at https://gitter.im/jgthms/bulma](https://badges.gitter.im/jgthms/bulma.svg)](https://gitter.im/jgthms/bulma)
-												Add travis-ci build badge to README (#1204)


											
										
										
											2017-09-18 07:50:20 +00:00
+								[![Build Status](https://travis-ci.org/jgthms/bulma.svg?branch=master)](https://travis-ci.org/jgthms/bulma)
-												Update readme

											
										
										
											2016-03-09 22:10:26 +00:00
-												Use https for Bulma

											
										
										
											2017-10-16 12:23:57 +00:00
+								<a href="https://bulma.io"><img src="https://raw.githubusercontent.com/jgthms/bulma/master/docs/images/bulma-banner.png" alt="Bulma: a Flexbox CSS framework" style="max-width:100%;" width="600" height="315"></a>
-												Update readme

											
										
										
											2016-01-27 00:33:07 +00:00
 								## Quick install
-												Fix #1207

											
										
										
											2017-09-18 21:36:53 +00:00
+								Bulma is constantly in development! Try it out now:
-												Update readme

											
										
										
											2016-01-27 00:33:07 +00:00
-												Update readme

											
										
										
											2016-03-09 22:10:26 +00:00
+								### NPM
-												Add gitter, Fix templates

											
										
										
											2016-04-16 20:50:48 +00:00
+								```sh
-												Use autoprefixer

											
										
										
											2016-02-13 20:13:35 +00:00
+								npm install bulma
 								```
-												Add - how to import CSS file in project (#1776)

* Add - how to import CSS file in project

Just thought it should be in readme as new learners frequently ask how to import the css after npm installation.

* Update as suggested.

Moved the import snippets block between "Bower" and "CDN".

											
										
										
											2018-04-09 08:39:45 +00:00
-												Add yarn (#830)

* estou mexendo ainda

* Update README.md

											
										
										
											2017-07-03 21:30:26 +00:00
+								**or**
-												Fix #1207

											
										
										
											2017-09-18 21:36:53 +00:00
+								### Yarn
-												Add yarn (#830)

* estou mexendo ainda

* Update README.md

											
										
										
											2017-07-03 21:30:26 +00:00
 								```sh
 								yarn add bulma
 								```
-												Update readme

											
										
										
											2016-01-27 00:33:07 +00:00
-												Add Bower to README install instructions
											
										
										
											2016-04-03 10:14:11 +00:00
+								### Bower
 								```sh
 								bower install bulma
 								```
-												Add - how to import CSS file in project (#1776)

* Add - how to import CSS file in project

Just thought it should be in readme as new learners frequently ask how to import the css after npm installation.

* Update as suggested.

Moved the import snippets block between "Bower" and "CDN".

											
										
										
											2018-04-09 08:39:45 +00:00
+								### Import
 								After installation, you can import the CSS file into your project using this snippet:
 								```sh
 								import 'bulma/css/bulma.css'
 								```
-												Update readme

											
										
										
											2016-03-09 22:10:26 +00:00
+								### CDN
-												Fixed link to cdnjs bulma overview (#201)

The previous link returned a 403 error.
											
										
										
											2016-05-07 11:57:31 +00:00
+								[https://cdnjs.com/libraries/bulma](https://cdnjs.com/libraries/bulma)
-												Update readme

											
										
										
											2016-03-09 22:10:26 +00:00
 								Feel free to raise an issue or submit a pull request.
 								## CSS only
 								Bulma is a **CSS** framework. As such, the sole output is a single CSS file: [bulma.css](https://github.com/jgthms/bulma/blob/master/css/bulma.css)
-												Use https for Bulma

											
										
										
											2017-10-16 12:23:57 +00:00
+								You can either use that file, "out of the box", or download the Sass source files to customize the [variables](https://bulma.io/documentation/overview/variables/).
-												Update readme

											
										
										
											2016-03-09 22:10:26 +00:00
 								There is **no** JavaScript included. People generally want to use their own JS implementation (and usually already have one). Bulma can be considered "environment agnostic": it's just the style layer on top of the logic.
 								## Browser Support
-												Use https for Bulma

											
										
										
											2017-10-16 12:23:57 +00:00
+								Bulma uses [autoprefixer](https://github.com/postcss/autoprefixer) to make (most) Flexbox features compatible with earlier browser versions. According to [Can I use](https://caniuse.com/#feat=flexbox), Bulma is compatible with **recent** versions of:
-												Update readme

											
										
										
											2016-03-09 22:10:26 +00:00
-												Push 0.0.18

											
										
										
											2016-04-10 16:25:27 +00:00
+								* Chrome
 								* Edge
 								* Firefox
 								* Opera
 								* Safari
-												Update readme

											
										
										
											2016-01-27 00:33:07 +00:00
-												Update changelog

											
										
										
											2017-04-02 16:46:37 +00:00
+								Internet Explorer (10+) is only partially supported.
-												Fixes #560: Adds how-to README for docs (#561)

* Added how-to README.md file to docs/ directory; and referenced
the docs directory in the main README.md.

* Made requested changes from jgthms.

* made requested changes

											
										
										
											2017-03-14 22:23:57 +00:00
+								## Documentation
 								The documentation resides in the [docs](docs) directory, and is built with the Ruby-based [Jekyll](https://jekyllrb.com/) tool.
-												Use https for Bulma

											
										
										
											2017-10-16 12:23:57 +00:00
+								Browse the [online documentation here.](https://bulma.io/documentation/overview/start/)
-												Fixes #560: Adds how-to README for docs (#561)

* Added how-to README.md file to docs/ directory; and referenced
the docs directory in the main README.md.

* Made requested changes from jgthms.

* made requested changes

											
										
										
											2017-03-14 22:23:57 +00:00
-												Fix #122, Fix #210

											
										
										
											2016-05-30 18:36:17 +00:00
+								## Related projects
-												Add Django Simple Bulma to Related Projects. (#2314)

* Adding django-simple-bulma to related projects

* This commit is just a bit of kaizen; Cleaning up markdown so everything lines up and looks like a table. Also making punctuation style consistent in all descriptions.

											
										
										
											2019-01-23 18:05:20 +00:00
+								| Project                                                                              | Description                                                                            |
 								|--------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------|
 								| [Bulma with Attribute Modules](https://github.com/j5bot/bulma-attribute-selectors)   | Adds support for attribute-based selectors                                             |
 								| [Bulma with Rails](https://github.com/joshuajansen/bulma-rails)                      | Integrates Bulma with the rails asset pipeline                                         |
 								| [Vue Admin](https://github.com/vue-bulma/vue-admin)                                  | Vue Admin framework powered by Bulma                                                   |
 								| [Bulmaswatch](https://github.com/jenil/bulmaswatch)                                  | Free themes for Bulma                                                                  |
 								| [Goldfish](https://github.com/Caiyeon/goldfish)                                      | Vault UI with Bulma, Golang, and Vue Admin                                             |
 								| [ember-bulma](https://github.com/open-tux/ember-bulma)                               | Ember addon providing a collection of UI components for Bulma                          |
 								| [Bloomer](https://bloomer.js.org)                                                    | A set of React components for Bulma                                                    |
 								| [React-bulma](https://github.com/kulakowka/react-bulma)                              | React.js components for Bulma                                                          |
 								| [Buefy](https://buefy.github.io)                                                     | Lightweight UI components for Vue.js based on Bulma                                    |
 								| [vue-bulma-components](https://github.com/vouill/vue-bulma-components)               | Bulma components for Vue.js with straightforward syntax                                |
 								| [BulmaJS](https://github.com/VizuaaLOG/BulmaJS)                                      | Javascript integration for Bulma. Written in ES6 with a data-* API                     |
 								| [Bulma-modal-fx](https://github.com/postare/bulma-modal-fx)                          | A set of modal window effects with CSS transitions and animations for Bulma            |
 								| [Bulma.styl](https://github.com/log1x/bulma.styl)                                    | 1:1 Stylus translation of Bulma                                                        |
 								| [elm-bulma](https://github.com/surprisetalk/elm-bulma)                               | Bulma + Elm                                                                            |
 								| [elm-bulma-classes](https://github.com/ahstro/elm-bulma-classes)                     | Bulma classes prepared for usage with Elm                                              |
 								| [Bulma Customizer](https://bulma-customizer.bstash.io/)                              | Bulma Customizer &#8211; Create your own **bespoke** Bulma build                       |
 								| [Fulma](https://mangelmaxime.github.io/Fulma/)                                       | Wrapper around Bulma for [fable-react](https://github.com/fable-compiler/fable-react)  |
-												added rbx (#2327)


											
										
										
											2019-01-23 18:10:32 +00:00
+								| [Laravel Enso](https://github.com/laravel-enso/enso)                                 | SPA Admin Panel built with Bulma, VueJS and Laravel                                    |
 								| [Django Bulma](https://github.com/timonweb/django-bulma)                             | Integrates Bulma with Django                                                           |
-												Add Django Simple Bulma to Related Projects. (#2314)

* Adding django-simple-bulma to related projects

* This commit is just a bit of kaizen; Cleaning up markdown so everything lines up and looks like a table. Also making punctuation style consistent in all descriptions.

											
										
										
											2019-01-23 18:05:20 +00:00
+								| [Bulma Templates](https://github.com/dansup/bulma-templates)                         | Free Templates for Bulma                                                               |
 								| [React Bulma Components](https://github.com/couds/react-bulma-components)            | Another React wrap on React for Bulma.io                                               |
 								| [purescript-bulma](https://github.com/sectore/purescript-bulma)                      | PureScript bindings for Bulma                                                          |
 								| [Vue Datatable](https://github.com/laravel-enso/vuedatatable)                        | Bulma themed datatable based on Vue, Laravel & JSON templates                          |
 								| [bulma-fluent](https://mubaidr.github.io/bulma-fluent/)                              | Fluent Design Theme for Bulma inspired by Microsoft’s Fluent Design System             |
 								| [csskrt-csskrt](https://github.com/4d11/csskrt-csskrt)                               | Automatically add Bulma classes to HTML files                                          |
 								| [bulma-pagination-react](https://github.com/hipstersmoothie/bulma-pagination-react)  | Bulma pagination as a react component                                                  |
 								| [bulma-helpers](https://github.com/jmaczan/bulma-helpers)                            | Functional / Atomic CSS classes for Bulma                                              |
 								| [bulma-swatch-hook](https://github.com/hipstersmoothie/bulma-swatch-hook)            | Bulma swatches as a react hook and a component                                         |
 								| [BulmaWP](https://github.com/tomhrtly/BulmaWP)                                       | Starter WordPress theme for Bulma                                                      |
 								| [Ralma](https://github.com/aldi/ralma)                                               | Stateless Ractive.js Components for Bulma                                              |
 								| [Django Simple Bulma](https://github.com/python-discord/django-simple-bulma)         | Lightweight integration of Bulma and Bulma-Extensions for your Django app              |
-												Update README.md (#2394)

Removed periods for consistency.
											
										
										
											2019-05-17 09:25:23 +00:00
+								| [rbx](https://dfee.github.io/rbx)                                                    | Comprehensive React UI Framework written in TypeScript                                 |
 								| [Awesome Bulma Templates](https://github.com/aldi/awesome-bulma-templates)           | Free real-world Templates built with Bulma                                             |
 								| [Trunx](http://g14n.info/trunx)                                                      | Super Saiyan React components, son of awesome Bulma, implemented in TypeScript         |
 								| [@aybolit/bulma](https://github.com/web-padawan/aybolit/tree/master/packages/bulma)  | Web Components library inspired by Bulma and Bulma-extensions                          |
 								| [Drulma](https://www.drupal.org/project/drulma)                                      | Drupal theme for Bulma.                                                                |
 								| [Bulrush](https://github.com/textbook/bulrush)                                       | A Bulma-based Python Pelican blog theme                                                |
-												added rbx (#2327)


											
										
										
											2019-01-23 18:10:32 +00:00
-												Init

											
										
										
											2016-01-24 00:03:43 +00:00
+								## Copyright and license
-🎉

											
										
										
											2019-01-09 22:02:39 +00:00
+								Code copyright 2019 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma/blob/master/LICENSE).
-												Fix #1812

											
										
										
											2018-05-23 20:27:51 +00:00
 								[npm-link]: https://www.npmjs.com/package/bulma
 								[awesome-link]:  https://github.com/awesome-css-group/awesome-css
-												Added csskrt-csskrt to related projects
											
										
										
											2018-09-22 20:35:28 +00:00
+								[awesome-badge]: https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg