inuit.css:基于Sass的面向对象CSS框架

inuitcss

inuitcss基于Sass开发,采用的BEM命名,是一款强力的面向对象CSS框架,有着很好的可扩展性和高性能。它只占很小的空间(入门包gzip只有1KB),可以根据你的需求扩展或缩减。

inuitcss底层架构稳固可靠,你可以在上面搭建任何大小、任意风格的网站或者APP。inuitcss已被用于单页销售站点中型大小博客、乃至类似NHS的全产品站点。inuitcss是这样的工具——它帮你学步,然后放你自由成长。

inuitcss这个框架真正发挥了它的作用。它并非有自身设计想法的UI工具包,也不是包含上百行无用CSS的庞大文件包,更不是有着上千UI组件和冗多规矩的旗舰级别工具。它仅仅只是一个可组合、可配置的迷你依赖模块集合,你可以随时随地把它们按你的需求进行拼凑组合。inuitcss的重心更多放在如何让CSS架构稳固可变上,而非其中具体的代码。

你可以考虑抛弃那些臃肿老旧的工具包和固执庞大的库了。

来,认识下inuitcss吧。

极速,没有不可能

接触inuitcss的最快速、最简单的方式当然是用入门包,只需要输入:

或者使用npm:

……确保关联正确后,按下列顺序把它们导入到空的Sass项目中:

导入源的顺序非常重要,这将影响到整个inuitcss框架的运作。如果你用的是npm,只需要把bower_components替换成node_modules即可。

你是Bower / npm新手?

如果你是Bowernpm新手,但想用它们来安装inuitcss,那么可以照着以下步骤,进行快速安装:

跟着网站向导在系统中安装好node.js,它会自动帮你安装npm的。

如果你还想把Bower也一起用上,那就跟着下面的步骤来。不然的话,你得再安装inuitcss的独立模块。

全局安装Bower (-g).

在你的CSS目录中初始化Bower(跟着命令行向导往下操作):

一旦你完成了向导步骤,你将在当前目录(比如CSS)下看到一个新的bower.json文件。

输入:

……在bower_components同一目录下将安装上述模块, 并保存在你的bower.json中。

以上这些只是粗略的概述,还请麻烦使用者认真阅读Bower深度了解

项目设置

有了inuitcss,全世界几乎都在你的掌控之中,你的Sass主文件当然也是。

你得创建自己的Sass主文件,例如main.scss,然后用@import导入你的文件以及inuitcss的模块。相比于其他CSS框架或者UI工具包只准你在导入前后使用它们,inuitcss这种架构能让你修改成你所需要的代码。以下例子在inuitcss中里能完美运行:

注意到我们是如何在你自己的代码中穿插inuitcss代码了吗?inuitcss就是这样工作的。它不会加入自己的偏见,也不会鸠占鹊巢:你需要就用,不需要就可以不管它。

导入顺序

由于inuitcss由一大堆可组合的小模块组成,所以对于开发者来说,如何把它们按正确顺序拼凑起来就很重要。该顺序便是:

  • 设置类: 全局变量、全站设置、配置开关等。
  • 工具类: 全站掺混模式及函数。
  • 普通类: 低特异性的远程规则(例如:重置)。
  • 基础类: 无class的HTML元素(例如:a {}blockquote {}address {})。
  • 对象类: 对象、抽象类、及设计模式。(例如:.media {})。
  • 组件类: 分离的UI完整模块(例如: .carousel {})。inuitcss无法编辑该层。
  • 关键类: 高特异性、非常明确的选择器,以及重写及助手类(例如:.hidden {})。

每一层的内部顺序不做限制,重要的是每大类之间需要按正确顺序书写。

注意: 所有的代码——包括你自己的——需要遵循<section>.<file>命名规则,例如_objects.box.scss_components.carousel.scss

最后,该架构将被公布在itcss.io上,保持关注Twitter账号即可获得更新消息。

核心功能

inuitcss模块中没有哪个是必需的,如果有也只是因为它们跟配置和工具有关。

在工作前,inuitcss需要知道你的原设font-sizeline-height。这些设置将被存储在settings.defaults 中(作为 $inuit-base-font-size 和 $inuit-base-line-height),你也可以用同样的方式来重写inuitcss的任何配置参数.

它做的最固执的事莫过于把$inuit-base-line-height变量重指派为$inuit-base-spacing-unit。该值是UI的基础参数,扮演默认外边距margin的角色(记住,在inuitcss中你可以重写任何数据),而任何组件的内边距值都得依靠它才能确定。

虽然看上去这样设置过于武断了,但:

  1. 你仍可以保持垂直方向上的协调,因为几乎所有代码都在你的基准上运作。
  2. 由于我们可以让CSS中大多数值更合理,在代码库中,我们减少了神奇数的数量

很多inuitcss模块都需要tools.functions的参与,它只是一个很简单的小文件,内含一个方便好用的助手类数学函数。 这些模块能快速生成大小带变量的对象,例如:padding: double($inuit-base-spacing-unit);

另一个则是tools.mixins模块,它包含简单的字体大小混写功能,某些字体方面的模块用得上它。

除此之外,大多数inuitcss部件极少相互依赖,而有依赖性部件都能被很好地管理(如果你用Bower的话)。

安装新模块

用Bower安装inuitcss新模块很简单,只需要按照该模块Github库里的README文档中具体命令操作便可。

几乎所有的inuitcss模块都依赖于inuitcss的默认设置函数。如果你用的是Bower,则可以自动安装;如果不是,请确保你已经把它们手动下载好了。

如果不使用Bower / npm呢?

没问题,你可以选择作为Git次模块安装inuitcss依赖包,或者直接把每个文件都下到磁盘里。重要的是,你需要确认你下载每个文件都是正确的版本(Bower能自动帮你解决这个问题),并用要求的顺序导入它们。

修改inuitcss

inuitcss很大程度上可配置,但不能直接修改。正确方法是在你@import导入具体文件之前通过传递变量来修改inuitcss。让我们看看settings.defaults这个案例——在这个文件里,我们能看到$inuit-base-font-size以及$inuit-base-line-height变量。如果我们想保持这些不变,只需要@import导入文件即可;如果你想把这些数值分别变成12px18px(不用担心,inuitcss能帮你转换成rem),那么只需在@import之前传递数值就可以了。像这样:

其他inuitcss模块同理:你可以在@import前预先定义任何变量来配置它们:

你也可以把inuitcss重写成各自的大块文件,例如:settings.inuitcss。还是一样,这些文件必须要在@importing导入语句之前重写。

使用这种修改框架的方法,意味着你不需要直接修改任何文件(这样更新框架也容易点),但也代表着——如果你要配置整个库,还是无法摆脱那些大型臃肿的变量文件。

默认关闭

为了帮你减少项目中的代码数量,所有inuitcss模块默认关闭。这样做能两方面减少inuitcss膨胀的情况:

  1. 最初使用时代码库为缩减版,你只需要导入你需要的那些具体文件
  2. 所有变量都默认关闭,因此,如果你想要按钮,就不会出现各种不同大小排列的按钮,除非你明确表达你确实想要这样的效果。

如果要把功能打开,只需要把开关设置为true(当然,还是需要在@importing导入语句之前):

扩展inuitcss

有两个因素让inuitcss可扩展。 首先,这个框架真正发挥了它的作用。它把大部分工作的主控制权交给你;其次,可缩放性是inuitcss的核心原则之一,那么“放大”也就可以实现了。

由于其解耦的本质,让扩展inuitcss非常简单。跟像黑箱的那些大型框架相反,你甚至可以在inuitcss代码周围添加自己的功能。这就意味着你能在任何地方插入自己的代码库。inuitcss自带有默认的工具,但没有任何理由你不能创建你自己的工具,和inuitcss所没有的对象。

如果要扩展inuitcss,只要在需要的地方用<section>.<file>格式创建即可。

你可以在我的网站上看到inuitcss实现部分,@imported导入了默认的inuitcss的base.page模块,还添加了其中一个自定义模块来扩展默认模块的功能

inuitcss不是为了取代你的工作而来,它是为了让你的工作更加快捷

别名

为了避免与你自己的代码产生冲突,所有inuitcss的混写和变量名都使用了inuit-的命名,例如:$inuit-base-spacing-unit。一遍遍输入这样的变量和混写会非常单调和费时,因此,我们建议你为它们设置短一点的别名。你可以通过创建一个tools.aliases文件(_tools.aliases.scss),例如以下这样:

你当然也可以在inuitcss默认设置中使用自己的别名,穿插在整个项目中。

组件

inuitcss框架面向对象,无设计——它尽可能提供一个“素颜”的风格。这代表着你可以把inuitcss用在任何类型的项目中(已经实现了),无需告诉(或建议)它长什么样。如果你需要开包自带UI的框架,那inuitcss可能并不适合你。我建议你可以查查其他UI工具包,如Bootstrap

由于inuitcss“素颜”, 那是否需要组件层就取决于你了。组件类包含一大堆独立的UI块,你可以用它来组建UI界面,例如:旋转跑马灯、下拉导航菜单、或者图像展示等等。

命名空间

inuitcss为大型项目所设计,而那些项目中命名空间非常有用。inuitcss提供两种方式来让你命名模块:全局的,或者单个基础组件的。

全局命名

如果你想要整个框架都使用一个命名空间,你只需在settings.defaults预定义$inuit-namespace变量,像这样:

这样的话,inuitcss导入的每个模块的每个class都会被预先加上inuitcss-的前缀,如:.flag就会变成.inuitcss-flag。这样能让你在视觉上区分你自己的class和inuitcss的,或许可以帮你降低相互冲突的几率。

命名空间模块

如果你不想设置一个全局命名,那你可以用一个@imports设一个单独命名空间,例如:

而标志对象的类是.foo-flag,但其他部分的inuitcss应该都还没有命名。

两者结合

你可以在一个项目中把全局和组件内命名结合使用:

现在,除了标志对象(命名为foo-),你其他所有的inuitcss模块应该都已加上了inuitcss-的前缀了。

案例学习

我的网站就是用inuitcss制作的:CSS Wizardry。你可以查看源代码,看看我是如何把代码拼凑到一起吧。

官方网站:http://inuitcss.com/
开源地址:https://github.com/inuitcss

打赏支持我整理更多优质资源,谢谢!

打赏编辑

打赏支持我整理更多优质资源,谢谢!

任选一种支付方式

1 收藏

资源整理者简介:凝枫

非典型性程序员,爱做一些和写程序毫不相干的事 个人主页 · 贡献了46个资源 · 1


直接登录

推荐关注

按分类快速查找

关于资源导航
  • 伯乐在线资源导航收录优秀的工具资源。内容覆盖开发、设计、产品和管理等IT互联网行业相关的领域。目前已经收录 1439 项工具资源。
    推送伯乐头条热点内容微信号:jobbole 分享干货的技术类微信号:iProgrammer