Rio

Rio 提供一个简洁的文字排版样式库。

主页：http://biossun.github.io/rio

Install

Yarn:

$ yarn add rio-typesetting

NPM:

$ npm install rio-typesetting --save

Bower:

$ bower install rio --save

Note：因为 rio 这个名称已被注册，因此在使用 npm 或 yarn 安装时请注意包名为 rio-typesetting，但只有这里有所不同，在其它地方，项目名称仍为 rio。

如果使用 CSS 文件，请按照如下方式在您的页面中引入并使用：

<link href="rio.css" rel="stylesheet">
<!-- or <link href="rio.min.css" rel="stylesheet"> -->
<div class="rio">
    Your article content.
</div>

如果使用 SASS 预编译语言，则请按照如下方式在您的 SCSS 文件中引入并使用：

// custom options
$rio-class: rio;
$rio-font-size-base: 12px;
$rio-line-height: 1.75;

// other options ...

@import "rio";

<div class="rio">
    Your article content.
</div>

配置变量

$rio-class

为 Rio 指定一个 class 名称；
默认值：rio

$rio-font-size-base

文字大小；
默认值：$font-size-base or 14px

$rio-line-height

文字行高；
默认值：1.75

$rio-text-color

文本颜色；
默认值：$text-color or #333

$rio-text-color-quiet

次要文本颜色；
默认值：$text-color-quiet or #999

$rio-text-color-loud

强调文本颜色；
默认值：$text-color-loud or #222

$rio-link-color

链接颜色；
默认值：$link-color or #428bca

$rio-link-hover-color

链接在鼠标悬停时的颜色；
默认值：$link-hover-color or #2a6496

$rio-link-focus-color

链接在获取到焦点时的颜色；
默认值：$link-hover-color or $rio-link-hover-color

$rio-link-active-color

链接在触发时的颜色；
默认值：$link-active-color or $rio-link-hover-color

$rio-link-visited-color

已访问的链接的颜色；
默认值：$link-visited-color or $rio-link-color

$rio-block-el-border-color

具有边框样式的块级元素的边框颜色；
默认值：#f0f0f0

$rio-block-el-bg-color

具有背景样式的块级元素的背景颜色；
默认值：#fafafa

$rio-block-el-margin-top

块级元素的上外边距；
默认值：1.27em

$rio-block-el-margin-bottom

块级元素的下外边距；
默认值：1.27em

$rio-title-weight

标题文本的加粗组别；
默认值：600

$rio-title-line-height

标题文本行高；
默认值：1.5em

$rio-title-margin-top

标题元素的上外边距；
默认值：1.2em

$rio-title-margin-bottom

标题元素的下外边距；
默认值：0.8em

$rio-h1-size

一级标题文字大小；
默认值：2.2em

$rio-h2-size

二级标题文字大小；
默认值：1.8em

$rio-h3-size

三级标题文字大小；
默认值：1.4em

$rio-h4-size

四级标题文字大小；
默认值：1.2em

$rio-h5-size

五级标题文字大小；
默认值：1.0em

$rio-h6-size

六级标题文字大小；
默认值：0.9em

$rio-list-margin-left

列表元素的左外边距；
默认值：2em

$rio-mark-bg

标记文本的背景色；
默认值：#fffda0

$rio-mark-padding

标记文本的内边距；
默认值：1px 0

$rio-code-size

代码文字大小；
默认值：0.9em

$rio-code-family

代码文字字体；
默认值：Menlo, Monaco, Consolas, "Courier New", monospace

$rio-code-bg

代码元素的背景色；
默认值：$f7f7f7

$rio-code-block-line-height

代码块元素的文本行高；
默认值：1.48

$rio-hr-width

分割线宽度；
默认值：1px

$rio-hr-style

分割线样式；
默认值：solid

$rio-hr-color

分割线颜色；
默认值：$rio-block-el-border-color