CSSフレームワークを自作しました。
なぜ、自作したかといおうと一般的に時は流行ってるCSSフレームワークと自分が今欲しいCSSフレームワークとは設計が異なるものだったからです。
自分でいうのもアレですが、私自身今まで見たことのないコンセプトで作りました。
フレームワークのコンセプト
CSSフレームワークというとそのプロジェクトの根幹となる設計に紐づく物が多いです。
しかし、実際に開発を行っていると既存のプロジェクトに影響を及ぼさないCSSフレームワーク（UI component）がほしいということが頻繁にありました。
それに近い設計で言えばui kitなのですが、これはclass名にuk-*と接頭語につくので被らないという特徴があります。
ただしnormalize.cssも読まれているので既存のプロジェクトに影響を与えないというのには不安が残ります。
そこで私が考えたCSSフレームワークは、すべてextend,mixinで構成されており、好きなclassだけを自分が使いたいclass名でimportできるというものです。
紹介が遅れました。作ったCSSフレームワークはこちらです。
このCSSフレームワークが活躍するところ
YUI-SERIESは万能ではありません。
ただし、既存のサイトの改修をして自社用のUIコンポーネントを作っていくのには大きく役立つ設計をしています。
あるあるの話しになるのですが、コーディングの担当がバラバラ。
命名規則もない、殆どがコピペ…こんなプロジェクトはよく見かけると思います。
こういったプロジェクとで少しずつUIコンポーネントを作っていく必要がありますが、実際にそういったことをやった経験がある人でないとなかなかうまくいきません。
YUI-SERIESではその設計の下地を作り・拡張もできるようにしているのでそういったサイト改修が取り組みやすいように考えて作っています。
これから対応すること
スタイルガイドでコレほしいシリーズの中の第1位はform周りのデザインです。
これが今は入っていないので、このあたりは追加します。
また、mixin周りももう少し便利なやつを追加できそうな感触があるのでその当たりも追加していきます。
最後に
最近はnuxt.jsを触り始めてから、自分でコードを0から書く機会が少なくなってきた印象が強いです。
とはいえCSSはフレームワークだよりになっているので、もう1階層自分のイメージに合わせたものが作れるようになると、サイトのデザインも差別化しつつ工数の削減もしやすいと思っていますのでこれからどんどんとこのCSSフレームワークを成長させたいと思っています。