Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

Panda noirのデザインを変更しました

今流行のフラットデザインにしました。

変更点

全部ですね。既存部分は文字くらいしかないです。

使ったのはMetro UI CSSです。とても使いやすく、デザインセンスがかけらもなくてもフラットでおしゃれなデザインになります。

ただ、本体CSSが400KBもあるので、必要な物だけlessでコンパイルするといいです。私はそれで削ってSnowballで圧縮してGZIPしたら28KBまで落ちました。GZIPかけないと131KBです。約4分の1です。

必要な物だけ使う方法を説明します。やり方はまずMetro UI CSS GitHub lessに行きます。そして下の方にDownload ZIPとあるのでクリックしてダウンロードします。解凍してでてきたフォルダ内にlessというフォルダがあります。その中にあるmodern.lessファイルが本体です。この中に @import "xxx.less"のようなものがたくさん書いてあると思います。これらは1つ1つが独立したパーツです(一部は依存関係にあります)。これらのうち必要ないものをコメントアウトします。lessでは//でコメントになります。

私はicons、tables、hero、cards、pagecontrol、accordion、carousel、slider、dialog、calendar、contextmenu、pagelistを消しました。cardsは特にいらないとおもいます。どれがどれだかわかならくて消せないと思ったら metro ui css xxxで検索するとデモがでるので参考にすることをおすすめします(でないものは実際にためしてみるといいです)。

終わりに

まだ完成してないようなので一部おかしいところもあります。しかし、とても使いやすいので開発頑張って欲しいですね。