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.
Permalink
Failed to load latest commit information.
src
.sparkleshare
.travis.yml
LICENSE
README.md
composer.json

README.md

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.

Installation

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.

Usage

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

\dmgpage\yii2materialize\assets\MaterializePluginAsset::register($this);
// further code

or as a dependency in your app wide AppAsset.php

// @app/assets/AppAsset.php

public $depends = [
    'dmgpage\yii2materialize\assets\MaterializePluginAsset',
    // more dependencies
];

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

Grid

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

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

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']);

Icons

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

Buttons

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.

Raised

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'],
    ]
]);

Floating

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

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'
]);

Disabled

This style can be applied to all button types

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

Waves

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',
    '#',
    Html::addWaves(
        \dmgpage\yii2materialize\helpers\Waves::LIGHT,
        ['class' => 'btn-large']
    )
);

License

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