zoralabCORE科技规范 - ZORALab赫斯提亚

当用着这份代码包时所需的科技规范。随和、支持离线（通过PWA安装）和非常注重细节的。

创史来历

创设目的

这个软件包的出生主要是供应需要的基本控制数据值好在统一情况里操着其他有支持的界面元件。

历史遗录

这个软件包在ZORALab赫斯提亚v1.2.0版本之前曾经被名为 core_hestiaUI。改名的目的是有人要横行强盗设计的版权和为了编程文件编写能力而整理过。

软件包的设计

设计师

这个元件的设计是由以下的创造者所建设的：

(Holloway) 周健豪

依赖其他元件

这个元件是没有依赖其他元件。

HTML

至于HTML，为了简单化和最大的兼容性整个用法，ZORALab赫斯提亚运用W3C的语法。我们推荐您用以下的HTML代码来运用这个界面元件。

兼容的网页面结构HTML

兼容的网页面结构的HTML代码如下：

<!DOCTYPE html>
<html lang="...">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>...</title>
	...
	<style>...</style>
	<script defer>...</script>
	...
</head>
<body>
	<main>
		<section ...>
			...
		</section>

		<section ...>
			...
		</section>

		...
	</main>

	<footer>
		<section ...>
			...
		</section>

		<section ...>
			...
		</section>

		...
	</footer>

	<nav class='top-drawer'>
		...
	</nav>

	<nav class='left-drawer'>
		...
	</nav>

	<nav class='right-drawer'>
		...  <!-- 最后一个柜是最大权利 -->
	</nav>
</body>
</html>

网格空间控制系统HTML

网格空间控制系统的HTML代码如下：

<!-- 切记：请运用<div>来适当和一致的遏制内容代码 -->
<div class='row'>
	<div class='column'>
		...
	</div>


	<div class='column'>
		...
	</div>


	<div class='column'>
		...
	</div>


	...
</div>

CSS界面自选性

ZORALab赫斯提亚非常重用CSS变化值来装置这个界面元件并且还推出界面自选性功能。以下是所有界面自选性CSS变化值任您发挥。

颜色系统

这元件有供应自己的颜色系统如下（例子：第 1 行第 2 列是 --color-typography-100）：

类型	`50`	`100`	`200`	`300`	`400`	`500`	`600`	`700`	`800`	`900`	`950`
`--color-typography-`
`--color-dark-typography-`
`--color-contrast-`
`--color-dark-contrast-`
`--color-primary-`
`--color-dark-primary-`

标准工程颜色系统

这元件有供应标准工程颜色系统如下（例子：第 1 行第 2 列是 --body-color-indicator-yellow）：

类型	`red`	`yellow`	`green`
`--body-color-indicator-`
`--body-background-indicator-`

统一字形颜色系统

这元件有供应统一字形颜色系统如下（例子：第 1 行第 2 列是 --body-color-inverted）：

类型	`color`	`color-inverted`	`color-print`	`background`	`background-inverted`	`background-print`
`--body-`

动画定时系统

这元件有供应动画定时系统如下（例子：第 1 行第 2 列是 --timing-fast）：

类型	`rapid`	`fast`	`normal`	`slow`	`slowest`
`--timing-`	`.2s`	`.3s`	`.4s`	`.5s`	`.8s`

基本字体系统

这元件有供应基本字体系统如下（例子：第 1 行第 2 列是 --body-font-size）：

类型	`font-family`	`font-size`	`font-size-print`	`font-weight`	`letter-spacing`	`line-height`	`text-align`
`--body-`	`\"Roboto\", \"Helvetica Neue\", \"sans-serif\"`	`1.8rem`	`12pt`	`normal`	`.01rem`	`1.6`	`center`

字形系统

这元件有供应字形系统如下（例子：第 1 行第 2 列是 --h1-font-style）：

类型	`font-size`	`font-style`	`line-height`	`letter-spacing`	`margin`	`padding`	`text-decoration`	`text-align`	`word-wrap`	`decoration-color`	`border-bottom`	`border-bottom-inverted`
`--h1-`	`4rem`	`normal`	`1.2`	`-.1rem`	`2rem 0 0`	`0`	`underline`	`left`	`break-word`	`var(--color-primary-300)`	`none`	`none`
`--h2-`	`3.5rem`	`normal`	`1.25`	`-.1rem`	`12rem 0 2rem`	`0`	`none`	`left`	`break-word`	`initial`	`none`	`none`
`--h3-`	`2.5rem`	`normal`	`1.3`	`-.1rem`	`7rem 0 0`	`0`	`none`	`left`	`break-word`	`initial`	`1px solid var(--color-primary-500)`	`1px solid var(--color-primary-300)`
`--h4-`	`2.2rem`	`normal`	`1.35`	`-.08rem`	`4.5rem 0 0`	`0`	`underline`	`left`	`normal`	`initial`	`none`	`none`
`--h5-`	`1.8rem`	`normal`	`1.5`	`-.05rem`	`4.5rem 0 0`	`0`	`none`	`left`	`normal`	`initial`	`none`	`none`
`--h6-`	`1.8rem`	`italic`	`1.5`	`0`	`4.5rem 0 0`	`0`	`none`	`left`	`normal`	`initial`	`none`	`none`
`--p-`					`0`	`1rem`		`left`

动画定时系统

这元件有供应动画定时系统如下（例子：第 1 行第 2 列是 --timing-fast）：

类型	`rapid`	`fast`	`normal`	`slow`	`slowest`
`--timing-`	`.2s`	`.3s`	`.4s`	`.5s`	`.8s`

布局系统

这元件有供可自定的布局系统如下（例子：第 1 行第 2 列是 --main-min-width）：

类型	`grid-area`	`min-width`	`width`	`max-width`	`padding-top`	`padding-left`	`padding-bottom`	`padding-right`
`--main`	`content`	`100%`	`100%`	`100%`	`10rem`	`10%`	`10rem`	`10%`
`--footer`	`footer`	`100%`	`100%`	`100%`	`3.5rem`	`10%`	`3.5rem`	`10%`
`--leftnav`	`leftnav`
`--rightnav`	`rightnav`
`--topnav`	`topnav`

滚动行为

影响网页的移动反应。

变化值     : --html-scroll-behavior
CSS属性    : scroll-behavior
默认数码   : smooth (>= v1.2.0)

网页Grid

影响网页的移动反应。

变化值     : --body-grid
CSS属性    : grid
默认数码   :
(>= v1.2.0)
	"content" auto
	"footer" minmax(0, max-content)
	"topnav" minmax(0, auto)
	"leftnav" minmax(0, auto)
	"rightnav" minmax(0, auto)
	/ 100%

JavaScript

庆幸的是这个元件没有运用到任何JavaScript。放心吧！

固定值

这个代码包没有提供任何固定值。

变化值

这个代码包没有提供任何变化值。

提供的功能

ToCSS

渲染呈现CSS的输出数据。

Hugo

用法：

{{- $ret := partial "hestiaGUI/zoralabCORE/ToCSS" . -}}
<pre>{{- printf "%#v\n" $ret -}}</pre>

数码构架

这个代码包没有提供任何数码构架。

终结

我们已经抵达终结段落了。如有询问，您是可以通过以下管道来联系我们吧：

GitHub论坛