最近、CSSフレームワークというものに興味が出始め、色々と有名なフレームワークのソースを覗いているうちに自分でも作ってみたくてたまらなくなってしまったので勢いで「UNITS」というCSSフレームワークを作った。

UNITS

わざわざ独自ドメインまで取得してしまうという気合の入りっぷり。

UNITSの特徴

  • CSSを読み込ませ、用意されたHTMLを書くだけでデザインを適用可能
  • 日本語表示に最適化
  • 旧ブラウザは切り捨て、モダンブラウザのみサポート
  • flexboxを用いた柔軟なグリッドシステムを搭載
  • コンポーネントの組み合わせ次第で拡張は自由自在
  • テーマクラスを使えば用意にデザインを変えることも可能

特に「日本語に最適化」というところに力を入れている。
Bootstrapなどは日本語でそのまま使用してしまうと、主にタイポグラフィ周りが残念な見栄えになってしまう。
UNITSでは、英語と日本語のフォントサイズがほぼ同一に見えるように調整を施している。

なぜつくったか？

  • 個人開発でCSSを書くのがダルく、楽に使いまわせるものが欲しかった
  • どうせならGitHubで公開、npmにも登録してみたかった
  • PostCSS(cssnext)を試してみたかった
  • 継続的な開発をしてみたかった
  • ドキュメントを英語で書いてみたかった

色々と理由はあるが、上記の中でも特に「楽に使いまわせるものが欲しかった」と「PostCSS(cssnext)を試してみたかった」というのが大きな理由。

自分好みのデザインで、学習コストも低くてすむようなもの（それこそcss読み込んでhtmlペタッと貼るだけでOK）みたいなものが欲しかった。GitHubやnpmでは公開したものの、現行バージョン（ベータ版）ではとりあえず自分が使えれば良くて、v1の正式版から他ユーザーでも使いやすいように最適化していくつもり。

あとPostCSS。今まではずーっとSASS（SCSS）だったが、次期CSS4が先取りして使える（正確にはエミュレートしてくれる）cssnextってを本格的に使ってみたかったってのも大きい。

公開後の反応

  • 公開後1週間で1000DLを突破、一日平均200DL

意外とnpmってDLされるもんなんだなって印象。素直に嬉しい

今後の予定

  • まだまだ宣伝不足なので宣伝する
  • 正式公開に向けてデザインの見直しやらコードの見直しやら

もっとUNITSを世に広める！というのと、広まったときのためにもっとコードを整理する！の2つ。どこまでを合格ラインとしv1としてリリースするかがまだ決めきれていないけど、ベータ版から正式版にするうえで最低限考えているのは以下。

  • デザインの見直し
  • 不要なコンポーネントを減らし、一つひとつのクオリティを高める
  • テーマの分離、種類を増やす
  • PostCSS+cssnextからPostCSS+SASSに変える
  • Gulpからnpm scriptsに変える
  • SASSの@mixin,@extendを活用する
  • 便利JS（モーダルとか）を用意する
  • React.jsやVue.jsでも簡単に使えるようにする

主に開発環境を一新する感じ。
あとはデザインの細かい部分（マージンとか）を見直す程度を予定している。

技術的な話

時間を見つけて更新する。
内容は下記のような感じを予定しています。

  • GitHub+git-flowを用いた開発について
  • PostCSS(cssnext)を使ってみた感想
  • flexboxを使ったグリッドが良い感じ
  • npmへのデプロイはnpがオススメ
  • unpkgで簡易CDN化
  • HTMLの言語別でスタイルを変える小技
  • ドキュメントを書くのが想像以上につらい

最近は週一ペースでなにかを作ってはGitHubにあげる…ということが出来ている。たのしい。