カスタマイズ性と柔軟性を意識したセマンティックで扱いやすいフロントエンドフレームワーク・「Madosel」

Ads

Madosel


Madoselはカスタマイズ性と柔軟性を意識したセマンティックで扱いやすいフロントエンドフレームワークです。

レイアウトや各所サイズ、マージンなどを細かくclassで用意したユーティリティメインのCSSフレームワークといった印象ですがJSも用意されており、簡単なコードで良く使われるUIを実装出来ます。

以下動作サンプルです

Ads

classは例えばbox-sizing: border-box;ならclassは.box-sizing-borderflex-wrap: nowrap;なら.flex-nowrapといったようにセマンティックに命名規則を採用しており、覚えやすく、コードを見ただけでスタイルを把握できるように設計されています。

既存のCSSに組み込む場合はコンフリクトの心配もありますし、そうでなくても少しくどく感じる方もいるかもしれませんが学習コストは低そうですね。ドキュメントも充実しているので使う際はチェックしてみてください。

個人的には既に自作のユーティリティフレームワークを普段使っているので不要ではあるものの、参考にできる部分は参考にしたいなと思います。ライセンスはMIT。

Madosel