shevy, 可以配置的垂直节奏&字体

分享于 

11分钟阅读

GitHub

  繁體 雙語
Typography made easy. A vertical rhythm library.
  • 源代码名称:shevy
  • 源代码网址:http://www.github.com/kyleshevlin/shevy
  • shevy源代码文档
  • shevy源代码下载
  • Git URL:
    git://www.github.com/kyleshevlin/shevy.git
    Git Clone代码到本地:
    git clone http://www.github.com/kyleshevlin/shevy
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/kyleshevlin/shevy
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    Shevy

    一个简单的,可以配置的Sass库,具有。

    演示

    查看演示文件。

    安装

    Shevy是一个Sass库,因此需要在你的机器上安装 Sass,以及一些将Sass编译成CSS的方法。 我把这个设置的细节留给你。

    从源代码复制

    向项目中添加Shevy的一种方法是从源代码中复制。 如果要将这里文件添加到项目中,请将 core/ 目录复制到应用程序中的适当位置。

    
    $ cp -R core/path/to/your/project
    
    
    
    

    然后将 _shevy.scss 文件 @import 到你的项目中。

    @import 'core/shevy';

    在对 Shevy mixin和函数进行任何调用之前,一定要将这个错误放在这里,以便Sass编译时不会出错。

    NPM

    你可以将Shevy安装为具有以下功能的NPM MODULE:

    
    npm install --save shevy
    
    
    
    

    安装之后,你可以在项目中继续包含 core/_shevy.scss 文件。 它可能会嵌套一个目录或者比直接从源复制更深,所以确保你得到了正确的路径。 像这样:

    @import '../../node_modules/shevy/core/shevy';

    此时,我没有尝试在任何配置中使用 Shevy,比如在 web service MODULE 中需要它。 因此,我没有关于如何使用它的建议。 但是。

    Bower

    你可以将Shevy安装为 Bower 组件:

    
    bower install --save shevy
    
    
    
    

    类似于NPM安装,这将在另一个目录中安装项目,因此在尝试导入它时,请确保路径正确。

    @import '../../bower_components/shevy/core/shevy';

    Rails 上的 ruby

    如果你使用 Ruby on Rails 并希望将Shevy添加到项目中,则很幸运。 Shevy也是一个 ruby gem 组件。 在你的Gemfile 中添加:

    gem 'shevy'

    然后运行:

     
    $ bundle install
    
    
    
     

    安装 gem 后,通过添加以下命令将Shevy添加到项目中:

    @import 'shevy';

    再次确保在对 Shevy mixin或者函数调用任何调用之前,请确保将该函数放在这里,这样Sass编译就不会出错。

    用法

    Shevy附带了缺省设置。 所以Shevy最简单的用法是调用几个 mixin。

    @includeheadings;@includebody;@includecontent;

    这将为所有标题( h1h6 )。几个内容标记( polulpre ) 以及为 body 标记设置 font-size 和 line-height 输出样式。 但是,你可能会发现默认设置不适合你的项目。 Shevy允许你在全局和/或者组件级别配置设置。 以下是操作方法:

    全局

    Shevy mixin将Sass映射作为参数之一。 默认映射是 $shevy 映射( 如果你不定义自己的$shevy,则始终定义)。 因此,要对配置进行全局更改,只需定义你自己的$shevy 映射来覆盖缺省设置。 就像这样:

    $shevy: (
     base-font-size: 14px,
     base-line-height: 1.5,
     base-font-scale: (2.5, 2.1, 1.8, 1.5, 1.25, 1),
     margin-bottom: true,
     proximity: false,
     proximity-factor:. 85);

    然后,将代码中的。bodycontent mixin设置为

    @includeheadings;@includebody;@includecontent;

    现在惊叹你美丽的版式。 假设你在网页上放了东西。 你在网页上写了些东西,不是?

    组件级别

    你还可以将定制映射传递到 headingsparagraph mixin。 这使你能够使每个 MODULE 或者每个断点的响应式排版生成自定义排版。

    定义新的Shevy映射:

    $shevy-small: (
     base-font-size: 12px,
     base-line-height: 1.3,
     base-font-scale: (2, 1.8, 1.6, 1.4, 1.2, 1)
    );

    然后调用任何 mixin,将你的新设置映射作为参数传递:

    .my_component {
     @includeheadings($shevy-small);
     @includecontent($shevy-small);
    }

    默认值

    $shevy: (
     base-font-size: 1em,
     base-line-height: 1.5,
     base-font-scale: (3, 2.5, 2, 1.5, 1.25, 1),
     margin-bottom: true,
     proximity: false,
     proximity-factor:. 85);

    base-font-size

    base-font-size 键旨在作为项目的标准 font-size。 font-scale 将它的值与 base-font-size 相乘。

    base-line-height

    base-line-height 是标准 line-height。 如果以像素为单位设置,这将是Shevy的基本间距值。 如果它作为一个因素提供,比如 1.5,它将乘以 base-font-size 来生成基本间距值。

    base-font-scale

    这是要由 base-font-size 乘以的因素列表,用于生成标题和段落( 如果未提供 paragraph-scale )的字体大小。

    页边距底部

    默认情况下,margin 底部会添加到所有版式中以保持垂直的节奏。 但是,你可能希望删除这些。 这样,在地图中设置 margin-bottom: false 会将每个元素的margin-bottom 属性设置为 0

    接近

    在设计中,存在着一种现象,即在空间关系中,人们将事物组合在一起的近似效应。 启用接近将使你能够将距离系数应用到边距底部和基本间距输出,实际上绘制内容。 你可能会发现这比严格遵循基线更美观。

    邻近因子

    邻近因子是调整版式的基础间距而不影响 line-height 间距的一个因素。 此值将与计算基准间距值相乘,如果在设置图中设置为 proximity,则为 is。

    用户定义函数

    开发人员可以使用几个 public 函数,以供他们使用。 下面是他们的列表:

    • base-font-size(),别名为 bsf()
    • base-font-unit(),别名为 bfu()
    • base-line-height(),别名为 blh()
    • line-height-spacing(),别名为 lhs()
    • base-spacing(),别名为 bs()
    • settings()

    base-font-size

    base-font-size() 将返回 $shevy 映射中的base-font-size 设置,或者将传递给函数的映射作为参数返回。

    base-font-unit

    base-font-unit() 将确定度量值是否在 pxem 或者 rem 中定义,并返回正确的单元类型。 映射可以作为参数传递给函数。

    base-line-height

    base-line-height() 将返回 $shevy 映射中的base-line-height 设置,或者将传递给函数的映射作为参数返回。

    line-height-spacing

    line-height-spacing() 通过将基本字体大小乘以基本 line-height 计算垂直节奏的line-height 间距。 因子可以传递给参数以返回 line-height 间隔的倍数或者股息。

    基准间距

    通过将基本字体大小乘以基本的来计算垂直节奏的基本间距,使用附加数学来处理邻近的,从而将它与 line-height-spacing() 函数区分。 因子可以传递给参数,以返回基间距的倍数或者股息。

    例如:

    .button {
     padding: bs(.5) bs(2);
    }

    可以作为第二个参数传递设置映射,以调整输出。

    设置

    settings() 是Shevy用于将地图与 $shevy-defaults 贴图合并的函数。 这样可以确保当前地图具有它的应设置的所有设置。 用户可以用这种方法来创建新的地图,如果他们愿意的话,它们就不会有太多的目的。

    支持

    目前,Shevy支持 pxemrem 使用。 将来可能增加其他度量单位的附加支持。

    许可证

    麻省理工学院许可证( MIT )

    版权所有( c ) 2016 Kyle Shevlin

    若要在取得该软件副本时免费授予任何人,如有下列条件的软件,请免费授予该软件的副本,并与相关的文档文件("软件") 进行许可,包括不受限制的权利,包括以下条件:

    上述版权声明和本许可声明须包括在所有的副本或实质性部分的软件。

    软件是"是",没有任何保证,表示或者隐含,包括但不限于销售,适合特定用途和 NONINFRINGEMENT。 作者或者版权持有人在合同。侵权或者它的他与软件或者它的他用户交易的行为。


    相关文章