Yii Framework Bulma Integration

This Yii Framework package encapsulates Bulma components and plugins in terms of Yii widgets, and thus makes using Bulma components/plugins in Yii applications convenient.

Installation

composer require yiisoft/yii-bulma --prefer-dist

Install assets

There are several ways to install the assets, they are:

1.- Using the AssetPackagist package manager.

Add to composer.json the following:

{
    "require": {
        "npm-asset/bulma": "^0.9.3",
        "npm-asset/bulma-helpers": "^0.4.2",
        "npm-asset/vizuaalog--bulmajs": "^0.12.1",
        "oomphinc/composer-installers-extender": "^2.0.0",
    },
    "extra": {
        "installer-types": [
            "npm-asset"
        ],
        "installer-paths": {
            "./node_modules/{$name}": [
                "type:npm-asset"
            ]
        }
    },
    "repositories": [
        {
            "type": "composer",
            "url": "https://asset-packagist.org"
        }
    ]
}

Once the changes are made, you can install the assets using the following command:

composer update --prefer-dist

2.- Using the npm-asset package manager.

Run the following command at the root directory of your application.

npm i bulma
npm i @vizuaalog/bulmajs
npm i bulma-helpers

Using assets

Bulma is a CSS framework that provides all the CSS and SASS files to customize your application, the widgets by default do not register any Asset so you must register them in your application to be used, since you can simply use the default CSS file layout, or build your own custom CCS.

Three Assets are provided:

• BulmaAsset: CSS, SASS file bulma css framework without JS code.
• BulmaHelperAsset: CSS, SASS, MIXINS it is an auxiliary library provide file helpers for Bulma CSS framework.
• BulmaJsAsset: Vizuaalog/BulmaJs it is an auxiliary library that has all the JS used by the Bulma CSS framework, you can decide to use this library, or alternatively write your own JS code.

To use widgets only, register BulmaAsset::class, which we can do in several ways explained below.

Register asset in view layout or individual view

By registering the Asset in the resources/layout/main.php it will be available for all views. If you need it registered for individual view (such as resources/views/site/contact.php) only, register it in that view.

use  Yiisoft\Yii\Bulma\Asset\BulmaAsset;

/**
 * @var Yiisoft\Assets\AssetManager $assetManager
 * @var Yiisoft\View\WebView $this
 */

$assetManager->register(BulmaAsset::class);

$this->setCssFiles($assetManager->getCssFiles());
$this->setJsFiles($assetManager->getJsFiles());

Register asset in application params

You can register asset in the assets parameters, (by default, this is config/packages/yiisoft/assets/params.php). Asset will be available for all views of this application.

use Yiisoft\Yii\Bulma\Asset\BulmaAsset;

'yiisoft/asset' => [
    'assetManager' => [
        'register' => [
            BulmaAsset::class,
        ],
    ],
],

Then in resources/layout/main.php:

/* @var Yiisoft\View\WebView $this */

$this->setCssFiles($assetManager->getCssFiles());
$this->setJsFiles($assetManager->getJsFiles());

Widgets usage

We will quickly and easily describe how to use widgets, and be able to use all the power of the Bulma CSS framework with PHP:

• Breadcrumbs
• Dropdown
• Menu
• Message
• Modal
• ModalCard
• NavBar
• Panel
• ProgressBar
• Tabs

Testing

Unit testing

The package is tested with PHPUnit. To run tests:

./vendor/bin/phpunit

Mutation testing

The package tests are checked with Infection mutation framework with Infection Static Analysis Plugin. To run it:

./vendor/bin/roave-infection-static-analysis-plugin

Static analysis

The code is statically analyzed with Psalm. To run static analysis:

./vendor/bin/psalm

License

The Yii Framework Bulma Integration is free software. It is released under the terms of the BSD License. Please see LICENSE for more information.

Maintained by Yii Software.

Support the project

Follow updates