首页 >web前端 >css教程 >Inuitcss简介:另一种CSS框架

Inuitcss简介:另一种CSS框架

Christopher Nolan
Christopher Nolan原创
2025-02-25 22:21:18393浏览

Introduction to inuitcss: A Different Kind of CSS Framework

> 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. (例如,
  3. bower init> bower_components或者,使用起动器套件:
  4. >
  5. bower install --save inuit-(module-name)bower install --save inuit-layout>设置和导入顺序(clucial!)
  6. > 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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn