Cntlog > 開発 > フレームワーク > Flexbox童貞を卒業させるためのフレームワーク(Dlex)作りました。

Flexbox童貞を卒業させるためのフレームワーク(Dlex)作りました。

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って言います。

関連記事

bootstrap並にイケてたCSSフレームワーク※サンプル有り... 新年もあけましたので新しいCSSフレームワークを探していたら素敵なものと出会いました。 Gumby Gumbyで作られたサイト 作成したサンプル CSSフレームワークって? CSSフレームワークとは、htmlソースにフレームワークに沿った記述をするだけで、簡単に...
Google謹製Material Design Liteを触ってみた所感... Googleがマテリアルデザインの考えを取り入れた公式フレームワーク「Material Design Lite」(以下、MDL)を公開しました。 少し触ってみましたので、基礎的な使い方と自分の備忘録も兼ねてまとめてみます。 Material Design Liteとは ...
CSSフレームワークの使いドコロ CSSフレームワークは以前からありましたが、レスポンシブデザインが流行するのに比例して、こちらの注目度も高まってきています。 レスポンシブ対応を0から自作しようと思うと時間と労力もかかりますし、メンテナンスにも欠けてしまうあたりが流行出した理由でしょうか。 CSSフレームワークと...
学習コストが低くて使いやすいCSSフレームワーク(Skeleton)... 最近色々なサイトを作る機会に恵まれました。 普段はUikitといった大型のCSSフレームワークを使うのですが、ふとした機会にミニマムなCSSフレームワークに出会い、一目惚れしましたのでご紹介します。 Skeletonとは Skeletonはとても...