Screen

Screenは必要最低限だけを揃えた、使いやすいミニマルなCSSフレームワークです。

無駄な装飾もなく、軽量で、classを直感的にスタイルする事ができる命名規則を採用しています。

ただ、reset.css、inter.css、Googleフォントがimportされてるので不要なら削除してください。

使い方など

サンプルをご覧頂ければ把握できる設計です。基本的にはタグのみで期待するスタイルになります。

更に、同様のスタイルをclassでも使えるようにされているのが印象的でした。

例えばh1なら

<h1>見出し</h1>

と同じスタイルを

<span class="h1">見出し</span>

でも出来るようになっています。これは全てではありませんが、多くのタグに設定されているようです。

h1,
.h1 {line-height: 1.1;}

h2,
.h2 {line-height: 1.3;}

h3,
.h3 { line-height: 1.4;}

hr,
.hr {
    display: flex;
    align-items: center;
    text-align: center;
    border: none;
    margin: unset;
    margin: 23px auto 24px auto;
}

ファイルサイズは非圧縮でも5kbほど。勿論RWD対応となっています。なかなかよさげでした。ライセンスはMITです。

Screen