https://github.com/solarliner/preact-bulma

Preact components for the Bulma CSS project.
https://github.com/solarliner/preact-bulma

bulma css js preact

Last synced: 11 days ago
JSON representation

Preact components for the Bulma CSS project.

• Host: GitHub
• URL: https://github.com/solarliner/preact-bulma
• Owner: SolarLiner
• License: mit
• Created: 2018-09-17T12:13:32.000Z (about 6 years ago)
• Default Branch: develop
• Last Pushed: 2022-12-10T16:53:16.000Z (almost 2 years ago)
• Last Synced: 2024-10-10T20:15:24.800Z (28 days ago)
• Topics: bulma, css, js, preact
• Language: TypeScript
• Homepage: https://solarliner.github.io/preact-bulma
• Size: 7.82 MB
• Stars: 27
• Watchers: 2
• Forks: 1
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Preact Bulma ⚛️

A collection of components to build interfaces with Bulma.

![](https://img.shields.io/github/license/solarliner/preact-bulma.svg)

![](https://img.shields.io/david/solarliner/preact-bulma.svg)

![](https://img.shields.io/david/dev/solarliner/preact-bulma.svg)

![](https://img.shields.io/david/peer/solarliner/preact-bulma.svg)

![](https://img.shields.io/bundlephobia/minzip/preact-bulma.svg)

![](https://img.shields.io/npm/v/preact-bulma.svg)

```bash

npm install preact-bulma

```

For the version targeting Preact X, use

```bash

npm install preact-bulma@next

```

v1 but still in alpha! [Here's why](#but-why-100-when-its-still-alpha).

## 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**)

```javascript

// Import Bulma CSS

import "bulma/css/bulma.min.css";

```

#### Custom styling (allows customization, **recommended**)

```javascript

// Import SCSS file

import "styles/app.scss";

```

```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.

```jsx

import { Card } from "preact-bulma";

function MyCard() {

  

    

    

      No, really, literally. Black holes have been proven to break through

      spacetime. (get it?)

    

    

      Share

    

  ;

}

```

## Links

- **Storybook with all components**: https://solarliner.github.io/preact-bulma

- **Wiki with usage notes**: https://github.com/solarliner/preact-bulma/wiki