Integration of Materialize CSS into Yii2
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Materialize Extension for Yii 2

Build Status Scrutinizer Code Quality Yii2 license

This is the Materialize CSS framework extensions for Yii framework 2.0. Materialize is a modern responsive CSS framework based on Material Design by Google.


The preferred way to install this extension is through composer.

Either run

php composer.phar require --prefer-dist dmgpage/yii2-materialize:dev-master

or add

"dmgpage/yii2-materialize": "dev-master"

to the require section of your composer.json file.


To use Materialize CSS extensions in your app, integrate MaterializePluginAsset. There is two ways how to achieve this. Register the asset in the main layout:

// @app/views/layouts/main.php

// further code

or as a dependency in your app wide AppAsset.php

// @app/assets/AppAsset.php

public $depends = [
    // more dependencies

Using Materialize through Yii asset manager allows you to minimize its resources and combine with your own resources when needed.


The grid helps you layout your page in an ordered, easy fashion.

use dmgpage\yii2materialize\helpers\Html;

echo Html::beginGridRow();
    echo  Html::gridCol('This div is 12-columns wide on all screen sizes', ['class' => 's12']);
    echo Html::beginGridCol(['class' => 's6']);
        echo '6-columns (one-half)';
    echo Html::endGridCol();
    echo Html::beginGridCol(['class' => 's6']);
        echo '6-columns (one-half)';
    echo Html::endGridCol();
echo Html::endGridRow();


Blockquotes are mainly used to give emphasis to a quote or citation. You can also use these for some extra text hierarchy and emphasis.

echo Html::blockquote('This is an example quotation that uses the blockquote tag.');

// OR

echo Html::beginBlockquote();
    echo 'This is an example quotation that uses the blockquote tag.';
echo Html::endBlockquote();


Badges can notify you that there are new or unread messages or notifications.

echo Html::badge(1);
echo Html::newBadge(2);
echo Html::badge(3, ['class' => 'red']);


Html::icon('forum', ['class' => \dmgpage\yii2materialize\helpers\Size::TINY])


There are 3 main button types described in material design. The raised button is a standard button that signify actions and seek to give depth to a mostly flat page. The floating circular action button is meant for very important functions. Flat buttons are usually used within elements that already have depth like cards or modals.


use dmgpage\yii2materialize\widgets\Button;

echo Button::widget([
    'waves' => \dmgpage\yii2materialize\helpers\Waves::LIGHT,
    'icon' => [
        'name' => 'alarm',
        'position' => \dmgpage\yii2materialize\helpers\Position::LEFT,
        'options' =>  ['class' => 'red'],


echo Button::widget([
    'type' => \dmgpage\yii2materialize\helpers\Type::FLOATING,
    'size' => \dmgpage\yii2materialize\helpers\Size::LARGE,
    'waves' => \dmgpage\yii2materialize\helpers\Waves::LIGHT,
    'icon' => ['name' => 'add'],
    'label' => false,
    'options' => ['class' => 'red']


Flat buttons are used to reduce excessive layering. For example, flat buttons are usually used for actions within a card or modal so there aren't too many overlapping shadows.

echo Button::widget([
    'type' => \dmgpage\yii2materialize\helpers\Type::FLAT,
    'waves' => \dmgpage\yii2materialize\helpers\Waves::TEAL,
    'label' => 'Flat button'


This style can be applied to all button types

echo Button::widget([
    'size' => \dmgpage\yii2materialize\helpers\Size::LARGE,
    'disabled' => true,
    'label' => 'Disabled button'


Waves is an external library that included in Materialize to allow you to create the ink effect outlined in Material Design.

echo Html::a(
    'Url with waves',
        ['class' => 'btn-large']


yii2-materialize is released under the BSD-3-Clause License. See the bundled for details.