skellyCSS

巧妙的CSS

一个轻量级 CSS 框架，可将框架快速实现到您的项目中。

目录

• 巧妙的CSS
  • 安装
    • 新项目管理
    • CSS
    • JavaScript
  • 快速使用
  • 用法
    • 标头
    • 段落
    • 线宽
    • 结盟
    • 图片
      • 尺寸
      • 形状
    • 动画片
  • JavaScript 实用程序
    • JavaScript 数据属性
      • 所有数据属性

安装

新项目管理

通过节点包管理器安装：

npm install @ritterim/skellycss

CSS

无论您在何处添加 CSS，都包含 Skelly css 文件：

 < link rel =" stylesheet " href =" ..@ritterim/skellycss/dist/style.css " >

JavaScript

在添加 JavaScript 的地方包含 skelly.js 文件：

 < script src =" ..@ritterim/skellycss/dist/skelly.js " > </ script > 

快速使用

您可以使用 JavaScript 实用程序快速开始使用 skellyCSS，如下所示：

 < h2 class =" skeleton skeleton--md " data-animation =" true " > </ h2 >
< p class =" skeleton " data-lines =" 4 " data-animation =" true " > </ p >

请参阅下面完整的 JavaScript 实用程序文档

用法

只需几行简单的代码即可将骨架快速添加到任何项目中。

标头

将skeleton类应用于任何类型的标题，它将自动调整为标题样式的字体大小：

 < h1 class =" skeleton " > </ h1 >
< h2 class =" skeleton " > </ h2 >
< h3 class =" skeleton " > </ h3 >
< h4 class =" skeleton " > </ h4 >
< h5 class =" skeleton " > </ h5 >
< h6 class =" skeleton " > </ h6 >

段落

您可以通过将skeleton类应用到段落标记来创建段落骨架，然后在段落中使用skeleton__line类包含您想要的任意多个跨度标记。为了使段落骨架看起来更像一个段落，最后一行设置为 50% 宽度。

 < div >
  < p class =" skeleton " >
    < span class =" skeleton__line " > </ span >
    < span class =" skeleton__line " > </ span >
    < span class =" skeleton__line " > </ span >
    < span class =" skeleton__line " > </ span >
  </ p >
</ div >

线宽

您可以通过应用尺寸修饰符类来调整线宽：

宽度	修饰符类
小，25%	.skeleton--sm
中等，50%	.skeleton--md
大，75%	.skeleton--lg
完全，100%	.skeleton--full

 < h1 class =" skeleton skeleton--sm " > </ h1 >
< h1 class =" skeleton skeleton--md " > </ h1 >
< h1 class =" skeleton skeleton--lg " > </ h1 >
< h1 class =" skeleton skeleton--full " > </ h1 >

结盟

您可以使用对齐修饰符类对骨架进行文本对齐：

结盟	修饰符类
左边	.skeleton--left
中心	.skeleton--center
正确的	.skeleton--right

 <!-- Left Align -->
< p class =" skeleton skeleton--left " >
  < span class =" skeleton__line " > </ span >
  < span class =" skeleton__line " > </ span >
  < span class =" skeleton__line " > </ span >
  < span class =" skeleton__line " > </ span >
</ p >

<!-- Center Align -->
< p class =" skeleton skeleton--center " >
  < span class =" skeleton__line " > </ span >
  < span class =" skeleton__line " > </ span >
  < span class =" skeleton__line " > </ span >
  < span class =" skeleton__line " > </ span >
</ p >

<!-- Right Align -->
< p class =" skeleton skeleton--right " >
  < span class =" skeleton__line " > </ span >
  < span class =" skeleton__line " > </ span >
  < span class =" skeleton__line " > </ span >
  < span class =" skeleton__line " > </ span >
</ p >

图片

您可以使用.skeleton-image类创建图像骨架。默认情况下，这将以父容器的 100% 高度和宽度应用图像骨架。

尺寸

以下是我们为骨架图像提供的一些默认尺寸：

尺寸	修饰符类
小，50x50	.skeleton-image--sm
中号，100x100	.skeleton-image--md
大，200x200	.skeleton-image--lg
超大，400x400	.skeleton-image--xl
完整，100% x 100%	.skeleton-image--full

 < img class =" skeleton-image skeleton-image--md " />
< img class =" skeleton-image skeleton-image--sm " />
< img class =" skeleton-image skeleton-image--lg " />
< img class =" skeleton-image skeleton-image--xl " />

形状

您还可以使用形状修改器类制作不同的图像形状：

形状	描述	修饰符类
正方形	将图像长宽比设置为 1/1（默认）	.skeleton-image--square
圆圈	将边框半径设置为 50%	.skeleton-image--circle
风景长方形	将图像纵横比设置为 4/3	.skeleton-image--landscape
纵向矩形	将图像纵横比设置为 3/4	.skeleton-image--portrait
宽矩形	将图像纵横比设置为 16/9	.skeleton-image--wide
高长方形	将图像纵横比设置为 9/16	.skeleton-image--tall

 < div class =" skeleton-image skeleton-image--lg skeleton-image--square " > </ div >
< div class =" skeleton-image skeleton-image--lg skeleton-image--circle " > </ div >
< div class =" skeleton-image skeleton-image--lg skeleton-image--landscape " > </ div >
< div class =" skeleton-image skeleton-image--lg skeleton-image--portrait " > </ div >
< div class =" skeleton-image skeleton-image--lg skeleton-image--wide " > </ div >
< div class =" skeleton-image skeleton-image--lg skeleton-image--tall " > </ div >

动画片

要添加动画，请在标题或段落中的.skeleton__line元素内添加span.skeleton--animation 。

 < div >
  < p class =" skeleton " >
    < span class =" skeleton__line " >
      < span class =" skeleton--animation " > </ span >
    </ span >
        < span class =" skeleton__line " >
      < span class =" skeleton--animation " > </ span >
    </ span >
    < span class =" skeleton__line " >
      < span class =" skeleton--animation " > </ span >
    </ span >
    < span class =" skeleton__line " >
      < span class =" skeleton--animation " > </ span >
    </ span >
  </ p >
</ div > 

JavaScript 实用程序

添加骨架最简单也是我们首选的方法是使用附带的 JavaScript 实用程序。

在标题标签或段落标签上，添加skeleton类和data-lines属性以及您希望骨架具有的行数：

 < h2 class =" skeleton skeleton--md " data-lines =" 2 " > </ h2 >
< p class =" skeleton " data-lines =" 7 " > </ p >

您还可以通过添加data-animation属性并将其设置为true来提供骨架动画：

 < h2 class =" skeleton skeleton--md " data-animation =" true " > </ h2 >
< p class =" skeleton " data-lines =" 7 " data-animation =" true " > </ p >

JavaScript 数据属性

您还可以利用其他数据属性（包括不透明度和颜色）来改变骨架的外观：

 <!-- Opacity -->
< h2 class =" skeleton skeleton--md " data-animation =" true " > </ h2 >
< p class =" skeleton " data-lines =" 7 " data-opacity =" 0.3 " > </ p >

<!-- Color -->
< h2 class =" skeleton skeleton--md " data-animation =" true " > </ h2 >
< p class =" skeleton " data-lines =" 7 " data-color =" tomato " > </ p > 

所有数据属性

属性	描述	类型
data-lines	确定输出多少行	整数
data-animation	为骨架线添加动画	布尔值
data-opacity	设置骨架线的不透明度（将不透明度设置在 0 和 1 之间）	漂浮
data-color	设置骨架线的颜色	颜色