読者です 読者をやめる 読者になる 読者になる

彼女からは、おいちゃんと呼ばれています

ウェブ技術や日々考えたことなどを綴っていきます

マテリアルデザインのカラーパレットを使いたいなら material-colors が便利

週末の自由工作でマテリアルデザインのカラーパレットを使いたいんだけど、さすがにこれを自分で CSS ファイルに書くのはダルイなぁと。

Color - Style - Google design guidelines

f:id:inouetakuya:20151123141726p:plain

material-colors

だけど、同じことは他にも考えている人がいるはずで、誰かがつくってくれてるんじゃない?と思ったら、あった。(ありがとうございます)

使い方

CSS, Sass, SCSS, Less, Stylus, JSON, JavaScript 等いろんな言語から使えるようになっている。例えば SCSS からは $md-red-100 とか定義された変数を使う感じ。

中身は dist 配下を見れば分かる。

僕の場合は SCSS だけで事足りたので、それだけ使うようにしている。

bower install material-colors --save
// bower.json
{
  ...
  "dependencies": {
    "material-colors": "~1.0.0"
  },
  "overrides": {
    "material-colors": {
      "main": [
        "dist/colors.scss"
      ]
    }
  }
}

その他

同じ用途で下記も見つけた。どちらか好きな方を選べば良いと思う。