inuitcssの紹介：別の種類のCSSフレームワーク

inuitcssの重要な利点

• モジュラーアーキテクチャ：SASSベースのフレームワークであるinuitcssは、モジュール設計を促進し、開発者が大規模でしばしば十分に十分なスタイルシートをダウンロードする代わりに、必要なモジュールのみを選択できるようにします。
• 設計の自由：カスタマイズ：
inuitcssのコードは直接変更してはなりません。 代わりに、モジュールをインポートする前に、オーバーライドファイルまたは可変インジェクションを使用します。 まだ開発中ですが、そのモジュール性は、より大きなフレームワークの膨満感なしに特定のコンポーネントを必要とするプロジェクトに最適です。
• フロントエンドフレームワークとInuitCSSソリューションの台頭

近年、BootstrapやFoundationなどのフロントエンドフレームワークが急増し、Web開発が加速されています。 ただし、これらはしばしば、未使用の機能を含む巨大なスタイルシートをダウンロードすることにつながります。 inuitcssは、よりモジュール式で設計に依存しないアプローチを提供することにより、これに対処します。 inuitcssの導入：モジュール式アプローチ

Harry Robertsによって作成された

inuitcssは、モノリシックコードベースではなく、独立したモジュールのコレクションを提供します。これにより、開発者は必要なコンポーネントのみを含む独自のアーキテクチャを構築できます。 変更のために事前に構築されたコンポーネントを提供する他のフレームワークとは異なり、InuitCSSは開発者が独自のデザインを作成することを可能にします。

bowerまたはnpmを備えたinuitcssのインストール

手動モジュールのインポートが可能ですが、BowerまたはNPMを使用するとプロセスが簡素化されます。 これらのパッケージマネージャーは、依存関係を管理し、プロジェクトの足場を合理化します。 node.jsは両方の前提条件です

bowerの使用：

bower：

のインストール プロジェクトのBOWERを初期化：（作成

ディレクトリを作成）

1. モジュールを個別にインストールします：npm install -g bower（例えば、
）
2. bower initまたは、スターターキットを使用してください：bower_components
3. bower install --save inuit-(module-name)bower install --save inuit-layout順序のセットアップとインポート（重要です！）
4. bower install --save inuit-starter-kitスターターキットのコンポーネントは、依存関係のためにSASSエラーを回避するために正確な順序でインポートする必要があります。

コア機能と必須モジュール

モジュラーがある間、inuitcssには必須モジュールがあります：

• settings.defaults：グローバル設定（font-size、line-height）。
• tools.functions：数学ヘルパーはサイズのバリエーションを機能させます。
• tools.mixins：タイプベースのモジュール用のフォントサイジングミックス

追加のモジュールは、Bowerによって管理されます。

inuitcssの変更：ファイルをオーバーライドまたは可変噴射

inuitcssのコアコードを直接編集しないでください。 代わりに、インポートする前にオーバーライドファイルまたは注入変数を作成します。

このアプローチは、すべてのモジュールに適用されます。 オーバーライドファイルは最初にインポートする必要があります。

<code>@import "bower_components/inuit-defaults/settings.defaults";
@import "bower_components/inuit-functions/tools.functions";
@import "bower_components/inuit-mixins/tools.mixins";
@import "bower_components/inuit-normalize/generic.normalize";
@import "bower_components/inuit-box-sizing/generic.box-sizing";
@import "bower_components/inuit-page/base.page";</code>

モジュール、コンポーネント、およびカスタマイズ

モジュールバリアントはデフォルトで無効になります（たとえば、ボタンサイズのバリアント）。 インポートする前にそれらを有効にします：

inuitcssは、基盤の提供に焦点を当てています。 UIコンポーネントは、主に開発者に任されています。

<code>$inuit-base-font-size:   12px;
$inuit-base-line-height: 18px;
@import "bower_components/inuit-defaults/settings.defaults";</code>

結論：別の種類のフレームワーク

inuitcssは、開発者の設計の選択とモジュール性に優先順位を付ける独自のアプローチを提供します。 機能が豊富な大きなフレームワークのオーバーヘッドなしで、特定のコンポーネントを必要とするプロジェクトに最適です。 まだ開発中ですが、その概念は有望です。

よくある質問（FAQ）

提供されているFAQセクションは、すでによく書かれており、包括的です。 変更は必要ありません。

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