ユーティリティに焦点を当てた、インタラクティブなUI開発をサポートするCSSフレームワーク・「Shorthand」

Ads

Shorthand


Shorthandはユーティリティに焦点を当てたモダンなCSSフレームワークです。インタラクティブなUI開発をサポートしてくれそう

いわゆるプロパティの一括指定(ショートハンド)に関するものではなく、単純に開発速度アップに貢献するって意味だと思います。ちょっとググラビリティがアレですね

ちょっといい配慮だなと思った点は、2つの形が用意されていて、1つは簡易版でカラーをグレーのみ用意したもの、もう一つはフルバージョンで16色用意されていてそれぞれに7バージョンさらに用意されているので、不要な色の設定でサイズが圧迫されるのを微妙に感じている方には嬉しい配慮じゃないかなと思います

Ads

使ってみる

テキストやボタンを中心にいくつか設定してみました。前述通り、基本的にはユーティリティです。要素の色やサイズ、位置、背景、マージンなどをclassだけで調整できるようになっています

色は特に様々なケースに対応できるようかなり用意されていますが、不要だったり希望の色が無い場合は前述通り簡易版を使う事でサイズも軽量化出来ます

CDNも用意されていますのでお試ししやすくなっています

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shorthandcss@1.1.1/dist/shorthand.min.css">

上記を貼ったら指定されたclassを任意の要素に含めるだけで、手軽に既存コンテンツを管理できるようになります。

よいフレームワークだと思います。ライセンスはMIT

Shorthand

タイトルとURLをコピーしました