bambu
Seamless integration with Bulma
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
yarn add bulma react prop-types- install
yarn add bambubulma css file.
- import
bulma.csscss in html file.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css">- if you are using bulma as css module then you have add bulma css module
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
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">- For more information https://fontawesome.com/get-started
materialdesignicons.
- add css link to index.html file
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/2.4.85/css/materialdesignicons.min.css" crossorigin="anonymous" />- For more information https://materialdesignicons.com/
Documentation ( Showcase )
Development
- Start showcase in development mode.
yarn startProduction
- build showcase
yarn showcase:build- serve showcase (port: 8282)
yarn showcase:serveContributions
Yes please! See the contributing guidelines for details.
License
bambu is wtfpl licensed.