Inuitcss簡介：另一種CSS框架

> inuuitcss

的關鍵優點

基於SASS的框架，
• 模塊化體系結構：
設計自由：
• 與提供預構建的UI元素的框架不同，Inuitcss優先考慮開發人員的設計選擇，為自定義UI創建提供了靈活的基礎。 通過Bower或NPM輕鬆安裝是一個關鍵好處。 模塊化性質需要特定的進口順序。 >
>自定義不直接編輯： 前端框架的崛起和Inuitcss解決方案

> 最近幾年，諸如Bootstrap和Foundation之類的前端框架激增，加速了Web開發。 但是，這些通常會導致下載包含未使用功能的大量樣式表。 Inuitcss通過提供更模塊化和設計的方法來解決這一問題。 >

介紹Inuitcss：模塊化方法

> 由哈里·羅伯茨（Harry Roberts）創建的，Inuitcss提供了獨立模塊的集合，而不是單片代碼庫。這使開發人員能夠構建自己的體系結構，包括所需的組件。 與其他提供用於修改的預製組件的框架不同，Inuitcss使開發人員創建了自己的設計。

>使用鮑爾或NPM

>安裝Inuitcss

雖然手動模塊是可能導入的，但使用Bower或NPM簡化了該過程。 這些軟件包經理管理依賴關係並簡化項目腳手架。 node.js都是兩者的先決條件。

> 使用Bower：

>安裝鮑爾：

在您的項目中初始化bower：

（創建

目錄）
1. > npm install -g bower單獨安裝模塊：
（例如，
2. ）bower init> bower_components或者，使用起動器套件：
>
3. bower install --save inuit-(module-name)bower install --save inuit-layout>設置和導入順序（clucial！）
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

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

專注於提供基礎； UI組件在很大程度上留給開發人員。

>

結論：另一種框架> >

常見問題（FAQ）

> >提供的常見問題解答部分已經寫得很好且全面。 不需要更改。

以上是Inuitcss簡介：另一種CSS框架的詳細內容。更多資訊請關注PHP中文網其他相關文章！