Skeleton CSS – A Starting Point for Every HTML Document

退屈でプレーンな HTML と永遠に長い CSS にはうんざりしていませんか? スケルトンは、あらゆるプロジェクトの出発点としてすでに含まれている定型的なコードの残りに、完璧で軽量な CSS を追加します。

定型的なコードとは、もっとシンプルであるべきだと思われる結果を得るために何度も現れる、反復的なコードのことです。 そして、シンプルで、HTML の基本的なスタイリングはもっとシンプルであるべきです。

人間の体には 200 ~ 270 の骨がありますが、Skeleton CSS にはわずか 400 行のコードしかありません。 Skeleton は、スタイリングの大部分を HTML タグに直接適用することによって動作します。 テーブル、フォーム、リスト、ボタンなど、あらゆるものにスタイルを適用します。

Getting Started

Skeleton なしでは HTML はこのようになります

Skeleton では、彼らのウェブサイトで、便利で記法も最小限ですぐに使える CSS ファイルをダウンロードし、自分で見てみることをお勧めしています。 Skeletonは合計で400行以下のコードしかありません。 また、カスタマイズが重要でないプロジェクトでは、CDNへのリンクも用意されているので、より迅速にセットアップを行うことができます。 どのように組み込むかを問わず、ドキュメントの先頭にスタイルシートをリンクすれば、準備は完了です!

The 12-Column Grid

Skeleton の成功は、他の CSS フレームワークが提供する属性を取り入れ、それを極めてシンプルにしたことにあります。 グリッド システムを使用することにより、ブラウザのレイアウトは流動的なまま、ウィンドウ サイズに自動的に調整されます。 列を利用するには、「column」または「columns」の番号とクラス、あるいは「3分の1」「2分の1」などの省略法を使用します。

Skeleton は最大幅を 960px にして、大、小、中画面に自動的にフィットさせるように設定します。 必要であれば、1 行の CSS で最大幅を変更でき、すべての列はそれに応じてサイズ変更されます!

Typography

Type in Skeleton は単一の <html> font-size property に基づいて応答性の高いサイズを設定するために rems に設定されています。 フォントのベースは Raleway で、1.6 line-height (それぞれ 15px と 24px) で 15rem に設定されています。

見出しには特定の文字間隔、ラインハイト、マージンを持つ個別のサイジングが適用されます。

ボタンには、2 つのオプションがあります。 標準のボタン スタイルは <button> タグ (およびその他の適切なフォーム要素) に固有に存在し、2 番目の、より鮮やかなボタン オプションは ‘.button-primary’ クラスで適用できます。

Skeleton はいつ使うべきですか

Skeleton は軽量、応答性、カスタマイズ性の優れた、モバイルを考慮して構築された CSS ライブラリです。 コンパイルやインストールは不要で、追加の CSS スタイルシートやフロントエンド フレームワークとうまく機能します。 スケルトンは、デモやMVPに最適な、素早く実行可能なCSSのために使用します。 また、minifiedバージョンで12kb以下なので、スピードが最も重要な場合にも最適です。 覚えておいてほしいのは、Skeletonの核心は、純粋なコンポーネントとスタイリングの骨組みだということです。 たった 1 つのリンクで、退屈な HTML を、速度を犠牲にしたり、クラス名のライブラリを記憶したりすることなく、完全にスタイルが決まったページに変えることができます。

コメントを残す

メールアドレスが公開されることはありません。