preact-bulma
v2.0.0-next.3
Published
Preact components for the Bulma framework
Downloads
10
Readme
Preact Bulma ⚛️
A collection of components to build interfaces with Bulma.
npm install preact-bulma
For the version targeting Preact X, use
npm install preact-bulma@next
v1 but still in alpha! Here's why.
Getting started
1. Install
preact-bulma
has a peer dependency on Preact, which means you need to install it separately, but allows you to choose
the version. The project supports 8.2.x and up.
2. Add styling
The project doesn't import any styling by default - this is to let you have full control over the style. You can import the full Bulma framework, or, using SASS/SCSS, only pull the parts that you want.
Full Bulma bundle (default theme, no customization, easiest)
// Import Bulma CSS
import "bulma/css/bulma.min.css";
Custom styling (allows customization, recommended)
// Import SCSS file
import "styles/app.scss";
@charset "utf-8";
// Import *all* of Bulma - refer to the customization guide for more info on customizing Bulma:
// https://bulma.io/documentation/customize/
@import "~bulma/bulma";
3. Use preact-bulma
You can now use the provided components into your project as you would with any component.
import { Card } from "preact-bulma";
function MyCard() {
<Card.Card>
<Card.Header
title="Physics breakthrough"
icon="fas fa-exclamation-circle"
/>
<Card.Content>
No, really, literally. Black holes have been proven to break through
spacetime. (get it?)
</Card.Content>
<Card.Footer>
<Card.FooterItem>Share</Card.FooterItem>
</Card.Footer>
</Card.Card>;
}
Links
- Storybook with all components: https://solarliner.github.io/preact-bulma
- Wiki with usage notes: https://github.com/solarliner/preact-bulma/wiki