Subscribed unsubscribe Subscribe Subscribe

マテリアルデザインのフレームワーク比較(comparison of material design framework)

Materialize

materializecss.com

CSSとJSだけでマテリアルデザインを可能にしてくれます。
カーネギーメロン大学の学生がフルタイムでやっているようです。

  • 使うには
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>

Material UI

callemall.github.io

  • 事前に理解する必要があるもの facebook.github.io

  • Installation
    Material-UI is available as an npm package. Use browserify and reactify for dependency management and JSX transformation. The CSS framework is written in Less, so you'll need to compile that as well. For Sass users, material-ui-sass contains the .scss version of the Less framework. github.com
    ※こちらのexampleをやればすぐインストールできます。
    ※ちなみに以下が必要です
    material-ui
    react
    react-tap-event-plugin
    ※react-tap-event-pluginはreact1.0リリース後は不要になる

  • react v1.0がリリースされるまで

var injectTapEventPlugin = require("react-tap-event-plugin");

//Needed for onTouchTap
//Can go away when react 1.0 release
//Check this repo:
//https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin();
  • Usage
/** MyAwesomeReactComponent.jsx */

var React = require('react'),
  mui = require('material-ui'),
  RaisedButton = mui.RaisedButton;

var SomeAwesomeComponent = React.createClass({

  render: function() {
    return (
        <RaisedButton label="Default" />
    );
  }

});

module.exports = MyAwesomeReactComponent;

※Material UIは一番きれいなUIをしている印象です。
※UIのグローバル・スタンダードに一番近そうです。

MUI

www.muicss.com

  • 使うには
<link href="//cdn.muicss.com/mui-0.0.8/css/mui.min.css" rel="stylesheet" type="text/css" />
<script src="//cdn.muicss.com/mui-0.0.8/js/mui.min.js"></script>

※Materializeと同様にcssとjsを読み込むだけで使えます。
※クラス名にmui-が付いているため、オリジナルのCSSや他のフレームワーク共存できます
フレームワークによってはクラス名が被るため、ベンダープレフィックスはいいですね
※他のフレームワークもベンダープレフィックスを付けて欲しいです

Polymer

Welcome - Polymer

Googleのプロジェクトです。

  • インストール
$ bower init
$ bower install --save Polymer/polymer#^0.5

※Material UIのようにカスタムタグを使用します

どれにするか

Material UIがグローバルスタンダードになりそうな気はしていますが、
Angular Materialに取り込まれるのかは不明です。

ここで判断を間違えると、負の遺産になってしまい、
移行作業が後ほど発生してしまいます。

AngularもReactのチームと連携するようですし、  
Googleの人はWeb Componentを推していますし、
これは一旦Material UIを使おうかなと60%考えています。

最終的にはブラウザの標準で〈container〉とか〈card〉とかできるような、それがHTML6

あれ?

デザイナーの仕事が少なくなっていくような気も。