Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/AlgusDark/bloomer

A set of React components for Bulma CSS Framework
https://github.com/AlgusDark/bloomer

bulma components css javascript jsx react

Last synced: about 1 month ago
JSON representation

A set of React components for Bulma CSS Framework

Host: GitHub
URL: https://github.com/AlgusDark/bloomer
Owner: AlgusDark
License: mit
Archived: true
Created: 2017-05-05T01:50:52.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2023-01-03T18:41:47.000Z (over 1 year ago)
Last Synced: 2024-05-20T03:14:16.449Z (4 months ago)
Topics: bulma, components, css, javascript, jsx, react
Language: TypeScript
Homepage: http://bloomer.js.org
Size: 7.99 MB
Stars: 675
Watchers: 17
Forks: 68
Open Issues: 67
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md

Awesome Lists containing this project

awesome-bulma - bloomer - A set of React components for Bulma (UI Libraries & Components / Courses)
awesome-list - bloomer

README

        # Bloomer

==================================

[![LICENSE](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://github.com/AlgusDark/bloomer/blob/master/LICENSE.md)

[![NPM Downloads](https://img.shields.io/npm/dm/bloomer.svg?style=flat-square)](http://npmjs.com/package/bloomer)

[![NPM Version](https://img.shields.io/npm/v/bloomer.svg?style=flat-square)](http://npmjs.com/package/bloomer)

[![Build Status](https://travis-ci.org/AlgusDark/bloomer.svg?branch=master)](https://travis-ci.org/AlgusDark/bloomer)

[![Coverage Status](https://coveralls.io/repos/github/AlgusDark/bloomer/badge.svg?branch=master)](https://coveralls.io/github/AlgusDark/bloomer?branch=master)

![Gluten Status](https://img.shields.io/badge/Gluten-Free-green.svg)

A cool set of React Stateless components for Bulma



    

        

    



## Install

[Bulma](https://www.npmjs.com/package/bulma) should be included in your project.

## Using NPM

```sh

$ npm install bloomer --save

```

## Using Yarn

```sh

$ yarn add bloomer

```

## Using CDN

```

  

    ...

  

  

    Other libraries

    

    Cutom code

  </body>

</html>

```

## Usage

```javascript

import * as React from 'react';

import * as ReactDOM from 'react-dom';

import { Container, Box  } from 'bloomer';

ReactDOM.render(

  <Container>

    <Box>Hello World!</Box>

  </Container>,

  document.getElementById('root')

);

```

## Documentation

The online documentation resides in [bloomer page](https://bloomer.js.org/#/documentation/overview/start), you can find all the different topics related to this library.

### Sections

- [Overview](https://bloomer.js.org/#/documentation/overview/start)

- [Grid](https://bloomer.js.org/#/documentation/grid/)

- [Elements](https://bloomer.js.org/#/documentation/elements/)

- [Components](https://bloomer.js.org/#/documentation/components)

- [Layout](https://bloomer.js.org/#/documentation/layout)

## Buy me a beer

[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/algusdark)

### Contributions

All contributions are welcome send your PR and Issues.

### License

This is a open-source software licensed under the [MIT license](https://github.com/AlgusDark/bloomer/blob/master/LICENSE.md)