Flexbox ベースのレスポンシブ CSS フレームワーク Dlex を作りしました。
もともと Flexboxは好きではなく、display:table派だったのですが、長いことFlexboxを放置していたのですが、 Disろうと思って学び直して見たらつい熱が入りフレームワーク化してしてました。
何を言っているかわからないと思います。私も言ってて良くわからないです。
また初めてGithub Pagesを使ってドキュメントも作ってみました。
なぜ作ったか
私嫌い嫌いと言ってるものがいつの間にか好きになっちゃうタイプみたいでFlexbox触ってたら、Flexboxもっと扱いやすくならないかなと恋心を抱いてしまったので作りました。私まじツンデレ。
Flexboxがわかりにくいとか、試したいけどとっつきにくいって思ってる人に触ってもらえたらと思って作りました。
コンセプト
DlexはFlexboxを直感的に扱うためのフレームワークでレイアウトを構成するために作られたものです。
Flexboxを慣れてみたいと思っているコーダー初心者・中級者の方々をメインユーザーに想定しています。
DlexはCSSを読み込んでClassを当てるだけで使えるので比較的簡単に導入できます。
余白などは特に作らず、オーバーライドして余白やフォントサイズを指定していくものになりますので衝突のようなものは少ないです。
classはflx-と言った接頭語をつけているので他のセレクタには影響しにくくどのプロジェクトにでも追加しやすい設計になっています。
詳しくはドキュメントページからご確認ください。
便利な使い方
ルールに沿ってclassを当てることで使用できますが、HTMLが見づらくなって嫌という人もいます。
その場合はsassで作っているのでextendして使うと割りと直感的にCSSが管理できるのでオススメです。
私の場合はプロトタイプ作ってるときはHTML側でclass 当てて使いますが、実装に入った段階で管理し易いようにCSS側でextendeして作るようにしています。
extendを活用することで簡単にflexboxを試すことができこれまでのサイトにも反映が可能になります。
今後の展開で考えてる事
気になってる多言語対応のCMSがあるのでそれでDocumentのページを作ってみたいなと思っています。
ちなみにそのCMSはGravって言います。