https://github.com/wasabi-io/bambu
Seamless integration with Bulma
https://github.com/wasabi-io/bambu
bulma-css-framework component-based css css-framework design flexbox html react theme typescript
Last synced: 8 months ago
JSON representation
Seamless integration with Bulma
- Host: GitHub
- URL: https://github.com/wasabi-io/bambu
- Owner: wasabi-io
- License: mit
- Created: 2017-12-02T16:49:10.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2019-07-01T05:08:47.000Z (over 6 years ago)
- Last Synced: 2025-04-05T05:51:13.298Z (10 months ago)
- Topics: bulma-css-framework, component-based, css, css-framework, design, flexbox, html, react, theme, typescript
- Language: TypeScript
- Homepage: https://wasabi-io.github.io/bambu/
- Size: 10.4 MB
- Stars: 11
- Watchers: 3
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: Contributing.md
- License: LICENSE
Awesome Lists containing this project
README
# bambu
Seamless integration with [**Bulma**](https://bulma.io/)
[](https://badge.fury.io/js/bambu)
[](https://travis-ci.org/wasabi-io/bambu)
## Motivation
React Web components built with `typescript` on top of `bulma` css framework.
#### Key Points
| Key | Goal |
| ------------- |:-------------:|
| Extended from `typescript` definition types of html elements for each react component so able to use native html attributes for each element which is supported. | *Easy development with Typescript* |
| Used *pure functional* and stateless `react` component | *Performance*, *Minimum source code* |
| Defined each component similar | *Standardization* |
| Used attribute names for each component similar to related css class names which are defined in **bulma**.| *Standardization*, *Simplicity* |
| Used **bulma** sass files from node modules.| *Easy upgradable* |
### Configuration
#### installation
* install dependencies *bulma*, *react*,*prop-types*
```bash
yarn add bulma react prop-types
```
* install
```bash
yarn add bambu
```
#### **bulma** css file.
* import `bulma.css` css in html file.
```html
```
* if you are using bulma as css module then you have add bulma css module
```javascript
import {bulma} from "bambu";
bulma.$putAll(require('bulma/css/bulma.css'));
```
* For more information https://bulma.io/documentation/overview/start/
#### fontawesome.
* add css link to index.html file
```html
```
* For more information https://fontawesome.com/get-started
#### materialdesignicons.
* add css link to index.html file
```html
```
* For more information https://materialdesignicons.com/
## Documentation ( Showcase )
#### Development
* Start showcase in development mode.
```bash
yarn start
```
#### Production
* build showcase
```bash
yarn showcase:build
```
* serve showcase (port: 8282)
```bash
yarn showcase:serve
```
## Contributions
Yes please! See the [contributing guidelines](./Contributing.md) for details.
## License
bambu is [wtfpl](http://www.wtfpl.net/) licensed.