humangas's blog

自分用のメモなので雑です。

Material Design Lite(MDL)はさくっとWeb画面つくるのに最適(かも)

何?

サクッとWebツールを作りたい時がある。 画面は、生HTMLでもいい。 そんぐらいの要件。
とはいえ、それだとあまりにダサいので、ちょちょっと気軽に、シンプルなCSSフレームワークは無いかと見ていたところ、これがあった。

Google製である。

https://getmdl.io/

Setup

CDNでやるが楽。ローカルに何もいらない。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

gulpでオートリロードと組み合わせると、開発楽なので、npmで入れるのもいいだろう。

npm install material-design-lite --save

See also: https://getmdl.io/started/index.html

マニュアルがシンプル

あとは、COMPONENTS を見て、HTMLを記載するのみ。

見れば、わかる。

まとめ

Liteというだけあって、軽いし、その分、やれる種類も少ない。
でも、重厚なもんはいらない。サッと装飾したいだけ、みたいな感じの要件のときには、かなり最適なのではと思った。

で、gulpと組み合わせると、より楽できるのである。 その辺はココに書いてある。

最近、なんでもGoで組むことが多いが、ちょいとしたWebアプリつくる際に、先に紙芝居をさっとこれでつくっておいて、あとで、go側実装して、html/templateを画面に組み合わせてアプリ化する。というフローがそれなりにスピーディーにやれるようになってきた。

参考になるサイト

もうちょい細かくは、他でググったほうが、コンポーネントの説明など書いてくれてる以下のようなサイトをざっと眺めるのが早い。お世話になりました。

広告を非表示にする