2017-10-16 12:23:57 +00:00
# [Bulma](https://bulma.io)
2016-01-24 00:03:43 +00:00
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 ).
2018-05-23 20:27:51 +00:00
[][npm-link]
[][npm-link]
2019-10-20 11:59:19 +00:00
[](https://www.jsdelivr.com/package/npm/bulma)
2018-05-23 20:27:51 +00:00
[![Awesome][awesome-badge]][awesome-link]
2016-04-16 20:50:48 +00:00
[](https://gitter.im/jgthms/bulma)
2017-09-18 07:50:20 +00:00
[](https://travis-ci.org/jgthms/bulma)
2016-03-09 22:10:26 +00:00
2019-11-30 17:26:33 +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" > < / a >
2016-01-27 00:33:07 +00:00
## Quick install
2017-09-18 21:36:53 +00:00
Bulma is constantly in development! Try it out now:
2016-01-27 00:33:07 +00:00
2016-03-09 22:10:26 +00:00
### NPM
2016-04-16 20:50:48 +00:00
```sh
2016-02-13 20:13:35 +00:00
npm install bulma
```
2018-04-09 08:39:45 +00:00
2017-07-03 21:30:26 +00:00
**or**
2017-09-18 21:36:53 +00:00
### Yarn
2017-07-03 21:30:26 +00:00
```sh
yarn add bulma
```
2016-01-27 00:33:07 +00:00
2016-04-03 10:14:11 +00:00
### Bower
```sh
bower install bulma
```
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'
```
2016-03-09 22:10:26 +00:00
### CDN
2019-10-19 15:31:58 +00:00
[https://www.jsdelivr.com/package/npm/bulma ](https://www.jsdelivr.com/package/npm/bulma )
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 )
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/ ).
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
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:
2016-03-09 22:10:26 +00:00
2016-04-10 16:25:27 +00:00
* Chrome
* Edge
* Firefox
* Opera
* Safari
2016-01-27 00:33:07 +00:00
2017-04-02 16:46:37 +00:00
Internet Explorer (10+) is only partially supported.
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.
2017-10-16 12:23:57 +00:00
Browse the [online documentation here. ](https://bulma.io/documentation/overview/start/ )
2017-03-14 22:23:57 +00:00
2016-05-30 18:36:17 +00:00
## Related projects
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 |
2019-10-20 17:27:04 +00:00
| [Vue Admin (dead) ](https://github.com/vue-bulma/vue-admin ) | Vue Admin framework powered by Bulma |
2019-01-23 18:05:20 +00:00
| [Bulmaswatch ](https://github.com/jenil/bulmaswatch ) | Free themes for Bulma |
2019-10-20 17:27:04 +00:00
| [Goldfish (read-only) ](https://github.com/Caiyeon/goldfish ) | Vault UI with Bulma, Golang, and Vue Admin |
2019-01-23 18:05:20 +00:00
| [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 |
2019-11-07 12:35:10 +00:00
| [Bulma Stylus ](https://github.com/groenroos/bulma-stylus ) | Up-to-date 1:1 translation to Stylus
| [Bulma.styl (read-only) ](https://github.com/log1x/bulma.styl ) | 1:1 Stylus translation of Bulma 0.6.11 |
2019-01-23 18:05:20 +00:00
| [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 – Create your own **bespoke** Bulma build |
2019-08-29 17:49:36 +00:00
| [Fulma ](https://fulma.github.io/Fulma/ ) | Wrapper around Bulma for [fable-react ](https://github.com/fable-compiler/fable-react ) |
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 |
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’
| [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 |
2019-10-20 17:27:04 +00:00
| [BulmaWP (read-only) ](https://github.com/tomhrtly/BulmaWP ) | Starter WordPress theme for Bulma |
2019-01-23 18:05:20 +00:00
| [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 |
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 |
2019-08-20 19:33:35 +00:00
| [Bulma Variable Export ](https://github.com/service-paradis/bulma-variables-export ) | Access Bulma Variables in Javascript/Typescript in project using Webpack |
2019-10-17 23:15:20 +00:00
| [Bulmil ](https://github.com/gomah/bulmil ) | An agnostic UI components library based on Web Components, made with Bulma & Stencil. |
2019-10-21 08:31:21 +00:00
| [Svelte Bulma Components ](https://github.com/elcobvg/svelte-bulma-components ) | Library of UI components to be used in [Svelte.js ](https://svelte.technology/ ) or standalone. |
2020-01-31 12:06:24 +00:00
| [Bulma Nunjucks Starterkit ](https://github.com/benninkcorien/nunjucks-starter-kit ) | Starterkit for Nunjucks with Bulma. |
2019-01-23 18:10:32 +00:00
2016-01-24 00:03:43 +00:00
## Copyright and license
2020-01-05 12:56:59 +00:00
Code copyright 2020 Jeremy Thomas. Code released under [the MIT license ](https://github.com/jgthms/bulma/blob/master/LICENSE ).
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
2018-09-22 20:35:28 +00:00
[awesome-badge]: https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg
