css框架和js框架_Inuitcss简介：另一种CSS框架-CSDN博客

css框架和js框架

In the last few years there has been a rise in the use of front-end frameworks. These tools, such as Bootstrap and Foundation, allow developers create web sites and apps quickly. Instead of needing to style up your own buttons and nav bars these frameworks do all of the heavy lifting for you.

在过去的几年中，前端框架的使用有所增加。这些工具(例如Bootstrap和Foundation)使开发人员可以快速创建网站和应用程序。这些框架无需设计自己的按钮和导航栏，而是为您完成了所有繁重的工作。

The problem with these frameworks is that it’s pretty common for developers to download their huge stylesheets, even though the majority of the features of the framework aren’t going to be used. But wouldn’t it be great if we used a framework that assumes very little about our design and encouraged a more modular architecture?

这些框架的问题在于，即使不使用框架的大多数功能，对于开发人员来说，下载巨大的样式表也是很常见的。但是，如果我们使用的框架对设计的假设很少，并鼓励采用更多的模块化体系结构，那不是很好吗？

介绍inuitcss (Introducing inuitcss)

inuitcss is a Sass-based framework created by Harry Roberts . The beauty of inuitcss is that it’s what you make of it. Instead of a central code base inuitcss consists of a set of independent modules. Instead of including a bunch of modules that we will never use, inuitCSS lets us piece together our own architecture.

inuitcss是由Harry Roberts创建的基于Sass的框架。 inuitcss的优点在于它就是您所创造的。 Inuitcss由一组独立的模块组成，而不是中央代码库。 inuitCSS不需要包含一堆我们永远不会使用的模块，而是让我们拼凑出自己的体系结构。

Unlike other frameworks, inuitcss does not provide you with many UI elements. Often when using a framework we are taking existing components and tweaking them to our liking. Inuitcss rejects this approach in favor of allowing you to make your own design choices.

与其他框架不同，inuitcss不会为您提供许多UI元素。通常，在使用框架时，我们会采用现有组件，并根据自己的喜好对其进行调整。 Inuitcss拒绝这种方法，而是允许您做出自己的设计选择。

安装inuitcss (Installing inuitcss)

We can download and import the modules that make up inuitcss manually, but the simpler option is to use Bower or NPM. Bower and npm are package managers that manage dependencies and scaffold projects for you. Since both are based on Node.js you’ll need to install Node.js first.

我们可以手动下载和导入组成inuitcss的模块，但是更简单的选择是使用Bower或NPM 。 Bower和npm是程序包管理器，可以为您管理依赖项和脚手架项目。由于两者均基于Node.js，因此您需要先安装Node.js。

We can use Bower to create a new project with all intuitcss dependencies installed. We can also use it to initialize an existing project.

我们可以使用Bower创建一个安装了所有intuitcss依赖项的新项目。我们还可以使用它来初始化现有项目。

安装和使用Bower (Installing and Using Bower)

After you install Node.js, open up a command prompt and type:

安装Node.js之后，打开命令提示符并键入：

npm install -g bower

That simple and you have installed Bower. If you have an existing project you can now use Bower to add inuitcss. Navigate to your project folder and run:

就这么简单，您已经安装了Bower。如果您有现有项目，现在可以使用Bower添加inuitcss。导航到您的项目文件夹并运行：

bower init

This creates a bower_components directory. To manually import individual modules, use the following command:

这将创建一个bower_components目录。要手动导入各个模块，请使用以下命令：

bower install --save inuit-(module-name)

For example, to import the inuitcss layout module we would use:

例如，要导入inuitcss布局模块，我们将使用：

bower install --save inuit-layout

This installs the module in the bower_components directory. As an alternative, we can use the inuitcss starter kit to scaffold a new project or add to our existing project.

这会将模块安装在bower_components目录中。作为替代，我们可以使用inuitcss入门套件来搭建新项目或添加到我们现有的项目中。

bower install --save inuit-starter-kit

This will install the basic dependencies for an inuitcss project instead of manually having to install them one by one.

这将为inuitcss项目安装基本依赖关系，而不必手动一个接一个地安装它们。

设置和导入顺序 (Setup and Import order)

After setting up the starter kit, we will need to import the components. The import order is crucial and needs to be followed. As you know, if we import components that require variables that have not yet been imported, our Sass will give us errors. Import the following files from the starter kit in this order (or install the following modules manually).

设置入门套件后，我们将需要导入组件。导入顺序至关重要，需要遵循。如您所知，如果我们导入需要尚未导入的变量的组件，那么Sass会给我们带来错误。按此顺序从入门工具包导入以下文件(或手动安装以下模块)。

@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";

Due to the modular nature of inuitcss it is important you piece things together in the right order.

由于inuitcss的模块化性质，因此必须以正确的顺序将事物拼凑在一起，这一点很重要。

Settings: Global variables, site-wide settings, config

设置：全局变量，站点范围的设置，配置

Tools: Site-wide mixins and functions

工具：站点范围内的mixin和功能

Generic: Far reaching rulesets

通用：影响深远的规则集

Base: Unclassed HTML elements

基础：未分类HTML元素

Objects: Objects, abstractions, and design patterns

对象：对象，抽象和设计模式

Components: UI

组件： UI

Trumps: Helper classes and overrides

特朗普：助手类和替代

核心功能 (Core Functionality)

Even though inuitcss is modular in design, there are still some required modules.

即使inuitcss在设计上是模块化的，仍然需要一些模块。

The first module that is required is the settings.defaults. This includes settings for such things as font-size and line-height that will be used across the rest of the modules.

所需的第一个模块是settings.defaults 。这包括将在其余模块中使用的font-size和line-height高等设置。

The tools.functions module contains math helper functions. These functions are used to create size variants of objects.

tools.functions模块包含数学助手功能。这些功能用于创建对象的尺寸变体。

The last required module is tools.mixins. This has a font-sizing mixin that is used in certain type-based modules.

最后一个必需的模块是tools.mixins 。它具有在某些基于类型的模块中使用的字体大小混合。

Beyond that, inuitcss doesn’t have many other dependencies. If any modules do have dependencies they will be managed by Bower (which is why we used Bower).

除此之外，inuitcss没有很多其他依赖项。如果任何模块确实具有依赖项，它们将由Bower管理(这就是我们使用Bower的原因)。

修改inuitcss (Modifying inuitcss)

Even though inuitcss is fully customizable, we should never directly edit the underlying code of the framework. Normally we would create an override file of our own and manipulate the settings and variables of the framework. Although this is acceptable, Harry suggests the alternate approach of passing in variables right before the file is imported.

即使inuitcss是完全可定制的，我们也不应直接编辑框架的基础代码。通常，我们将创建自己的替代文件并操纵框架的设置和变量。尽管这是可以接受的，但是Harry建议在导入文件之前立即传入变量的另一种方法。

Remember I mentioned the settings-defaults file with its font-size and line-height variables. If we wanted to change them from the default we would pass these variables in before the import.

记得我提到过带有font-size和line-height变量的settings-defaults文件。如果要更改默认值，我们将在导入之前将这些变量传递进来。

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

We are able to pass in variables for all modules like this. We can also create an override file, but if you do this, make sure to import it first.

我们可以为所有这样的模块传递变量。我们也可以创建替代文件，但是如果您执行此操作，请确保先导入它。

模块和组件 (Modules and Components)

Any variants of inuitcss modules are turned off by default. For example the inuitcss button object has different variants based on size. These are turned off by default. Enabling them is as simple as turning them on before the import statement for the module.

默认情况下，inuitcss模块的所有变体都是关闭的。例如， inuitcss按钮对象根据大小具有不同的变体。这些默认情况下是关闭的。启用它们就像在模块的import语句之前打开它们一样简单。

$inuit-enable-btn--large:   true;
@import "bower_components/inuit-buttons/objects.buttons";

One of the main things to understand about inuitcss is that it provides nothing beyond some buttons in the way of UI components. Harry has left the individual components up to you. If you are looking for a framework with ready-made UI components, then inuitcss is not for you.

关于inuitcss的主要理解之一是，它除了提供UI组件的某些按钮外，什么也没有提供。哈利将各个部分留给了您。如果您正在寻找具有现成UI组件的框架，那么inuitcss不适合您。

结论 (Conclusion)

inuitcss is a different kind of framework that leaves the design choices up to you. As opposed to a large framework with many rules that you will never use, inuitcss truly lets you pick and choose what you want to use. The framework is useful in that it gets out of your way and lets you get to work.

inuitcss是另一种框架，可让您自行选择设计。与具有许多您永远不会使用的规则的大型框架相反，inuitcss确实可以让您选择想要使用的内容。该框架之所以有用，是因为它摆脱了阻碍，让您可以开始工作。

inuitcss is not for everyone. As a library, it’s still a work in progress, but the overall concept is quite promising and is perfect when you need a module or two but don’t need the bloated rulesets that other frameworks offer.

inuitcss并不适合所有人。作为一个库，它仍在进行中，但是总体概念是很有希望的，当您需要一个或两个模块但不需要其他框架提供的庞大规则集时，它是完美的。