スペクター：軽量CSSフレームワーク

Specter CSSフレームワーク：軽量、レスポンシブ、モダンなCSSソリューション

プロジェクト開発では、このフレームワークは開発時間を大幅に短縮できます。 Bootstrapのような人気のあるフレームワークは機能が豊富ですが、すべての機能がすべてのプロジェクトに適しているわけではありません。この記事では、新しい軽量でモダンで、レスポンシブでモバイルに優しいフレームワークであるSpectreを紹介します。圧縮後のサイズとGZIPは約6.8kbです。基本的なグリッドシステムに加えて、タブ、モーダルボックス、カードなど、他の多くの実用的なコンポーネントも提供します。

このチュートリアルでは、フレームワークの簡単な概要を説明し、すぐに開始するためのガイダンスを提供します。

キーポイント

• Specterは、開発時間を大幅に短縮する軽量でモダンで、レスポンシブでモバイルに優しいCSSフレームワークです。基本的なグリッドシステムと、タブ、モーダルボックス、カードなどのさまざまなコンポーネントを提供します。
このフレームワークには、アジアのフォント向けに最適化されたタイポグラフィ要素のデフォルトスタイルが含まれており、テーブル、ボタン、および一般的に使用されるフォーム要素のクラスを提供します。また、ナビゲーションバー、垂直メニュー、パン粉の3つのナビゲーションコンポーネントも提供しています。
Specterの2つの重要なコンポーネントは、Bootstrapの対応するコンポーネントと同様のモーダルボックスとカードです。また、「トースト」通知、バッジ、タグ、ページネーション、ツールチップなどの他のコンポーネントも含まれています。ユーティリティクラスは、微妙なレイアウト調整に使用できます。
Spectreは要素に最小スタイルを提供し、そのサイズは提供するコンポーネントの数を考慮して非常に妥当ですが、コンポーネントとの相互作用のためのJavaScriptを提供しません。ユーザーは、モーダルボックスの表示や隠しなどの機能を実装するために、独自のコードを作成する必要があります。

インストール

圧縮Spectre.cssファイルを直接ダウンロードするか、NPMとBowerを使用してインストールできます。インストールが完了したら、通常のスタイルシートのようにプロジェクトにファイルを含めることができます。

<code class="language-html"><link rel="stylesheet" href="link/spectre.min.css"></code>

ディレクトリの低いファイルを編集するか、Spectre.lessファイルから不要なコンポーネントを削除することにより、独自のカスタムフレームワークバージョンを作成することもできます。その後、Gulpを使用して、コマンドラインからCSSファイルを構築できます。 /src

グリッドシステム

Specterには、12列のFlexBoxベースのレスポンシブラスターシステムがあります。各列の幅は、クラス名によって決定されます。各クラスは

で始まり、その後、要素が占めるべき列の数を示す数字が続きます。たとえば、100％の幅で12列を占有します。デフォルトでは、異なる列間にいくつかのギャップがあります。コンテナにクラスを追加することで、このギャップを排除できます。 Bootstrapと同様に、ビューポートサイズが変更されたときに要素の幅を制御するのに役立つように、col-、col-12、col-3などのクラスも提供します。 col-gapless また、特定のビューポートサイズの下に要素を非表示にするには、col-md-[1-12]、col-sm-[1-12]、col-xs-[1-12]などのクラスも提供します。

ビューポート幅が480ピクセル未満の場合、すべての列が単一の行として表示されます。 col-xs-*クラスは、幅が480ピクセルを超えるすべての要素に適用されます。同様に、col-sm-*は、600ピクセルを超えるビューポート幅のある要素に適用され、col-md-*は800ピクセルを超えるビューポート幅の要素に適用されます。

次のコードスニペットは、幅が33.333％（col-4）の列、幅が25％（col-3）の2つの列、および幅が16.66％（col-2）の1つの列を作成します。

<code class="language-html"><link rel="stylesheet" href="link/spectre.min.css"></code>

...（後続のコンテンツは元のテキストに似ています。元の意図を変更しておくために、必要に応じて文言と段落構造を調整できます）....

以上がスペクター：軽量CSSフレームワークの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。