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中文网其他相关文章！