Skip to content

Commit 619984b

Browse files
dgkncadgknca
committed
v1.0.1
1 parent 14bb3b4 commit 619984b

7 files changed

Lines changed: 63 additions & 59 deletions

File tree

‎.npmignore‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,6 @@ README.md
1313
package-lock.json
1414

1515
# Others
16-
css/css-skeletons.css
17-
css/css-skeletons.scss
1816
gulpfile.js
1917

2018

‎README.md‎

Lines changed: 51 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,27 @@
1-
# A single div, dynamic, fully customizable CSS library.
1+
# Single div, dynamic, fully customizable CSS library.
2+
3+
[See full documentation](https://dgknca.github.io/css-skeletons/docs/index.html)
24

35
## Getting Started
46

7+
### Use from CDN
8+
9+
```html
10+
<!-- UNPKG -->
11+
<link
12+
rel="stylesheet"
13+
href="https://unpkg.com/css-skeletons@1.0.1/css/css-skeletons.min.css"
14+
/>
15+
16+
<!-- JSDelivr -->
17+
<link
18+
rel="stylesheet"
19+
href="https://cdn.jsdelivr.net/npm/css-skeletons@1.0.1/css/css-skeletons.min.css"
20+
/>
21+
```
22+
23+
or
24+
525
### Install from NPM
626

727
```js
@@ -12,53 +32,38 @@ npm i css-skeletons
1232
import 'css-skeletons'
1333
```
1434

15-
or
35+
A few example from [documentation](https://dgknca.github.io/css-skeletons/docs/index.html).
1636

17-
### Use from CDN
37+
```html
38+
<div
39+
class="skeleton skeleton-line"
40+
style="
41+
--lines: 6; /* lines count */
42+
--l-h: 10px; /* line height */
43+
--l-gap: 8px; /* line gap */
44+
"
45+
></div>
46+
```
47+
48+
![example 1](./docs/assets/img/skeleton-line.png)
49+
50+
```html
51+
<div class="skeleton skeleton-card-3"></div>
52+
```
53+
54+
![example 2](./docs/assets/img/skeleton-card-3.png)
1855

1956
```html
20-
<link rel="stylesheet" href="https://unpkg.com/css-skeletons" />
57+
<div
58+
class="skeleton skeleton-list no-animate"
59+
style="
60+
--lines: 5;
61+
--bg: #ffb6b67d;
62+
--c-bg: #ff92922b;
63+
--bullet-ratio: 1.5;
64+
--l-gap: 15px;
65+
"
66+
></div>
2167
```
2268

23-
## Custom Variables
24-
25-
| Custom Variable | Description | Default |
26-
| :-------------- | :---------------------------------------------------------------------- | :--------------------: |
27-
| --lines | Count of the lines. | 1 |
28-
| --l-h | (line-height) Height of the lines. | 20px |
29-
| --l-gap | (line-gap) Gap between the lines. | 10px |
30-
| --g-gap | (group-gap) Gap between the groups. E.g. circle and other lines. | 15px |
31-
| --c-w | (container-width) Width of the container. | 300px |
32-
| --c-p | (container-padding) Padding of the container. | 10px |
33-
| --bg | Background of the shapes. | #e2e1eb |
34-
| --c-bg | (container-background) Background of the container. | transparent |
35-
| --shine | Color of the shine animation. | rgba(255,255,255, 0.2) |
36-
| --t | Duration of the shine animation. | 2s |
37-
| --c-s | (circle-size) Size of the circles. | 40px |
38-
| --rect-h | (rectangle-height) Height of the rectangle at the top. | 80px |
39-
| --chart-h | (chart-height) Height of the chart. | 200px |
40-
| --chart-btm | (chart-bottom) Height of the bottom area of the ".skeleton-chart-line". | 40px |
41-
| --cols | Columns count of the ".skeleton-chart-columns". Can be up to 10. | 5 |
42-
| --col-w | Width of the columns. | 25px |
43-
| --col-gap | Gap between the columns. | 25px |
44-
| --card-h | Height of the cards. | 150px |
45-
46-
## Classes
47-
48-
| Class | Required Classes/Variables | Valid Variables |
49-
| :--------------------------- | :-------------------------: | :----------------------------------------: |
50-
| VALID FOR ALL | - | --bg, --c-bg, --c-w, --c-p, --shine, --t |
51-
| .skeleton-line | - | --l-h, --lines, --l-gap |
52-
| .skeleton-circle | - | --c-s |
53-
| .skeleton-circle-line | - | --c-s, --g-gap, --l-gap |
54-
| .skeleton-circle--multi-line | - | --c-s, --l-h, --lines, --l-gap, --g-gap |
55-
| .adapt-to-circle | .skeleton-circle-multi-line | --c-s, --l-h, --lines, --l-gap, --g-gap |
56-
| .skeleton-rect | - | --rect-h, --l-h, --lines, --l-gap, --g-gap |
57-
| .skeleton-chart-columns | - | --cols, --col-w, --col-gap, --chart-h |
58-
| .skeleton-chart-line | - | --chart-btm, --chart-h |
59-
| .skeleton-card-1 | - | --card-h, --g-gap, --c-s |
60-
61-
## TODO
62-
63-
- List
64-
- Image
69+
![example 3](./docs/assets/img/skeleton-list.png)

‎docs/assets/img/skeleton-card-3.png‎

1.43 KB
Loading

‎docs/assets/img/skeleton-line.png‎

671 Bytes
Loading

‎docs/assets/img/skeleton-list.png‎

1.75 KB
Loading

‎docs/index.html‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,13 @@ <h5>No SVG, No Image. (11.2 Kb)</h5>
3434
<h3>Getting Started</h3>
3535

3636
<h4>Use from CDN</h4>
37-
<pre
38-
class="code-intro"
39-
><code class="code js">&lt;link rel="stylesheet" href="https://unpkg.com/css-skeletons" /></code></pre>
40-
<pre
41-
class="code-intro"
42-
><code class="code">&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/css-skeletons" /></code></pre>
37+
<pre class="code-intro"><code class="code js">&lt;!-- UNPKG -->
38+
&lt;link rel="stylesheet" href="https://unpkg.com/css-skeletons@0.0.1/css/css-skeletons.min.css" />
39+
40+
or
41+
42+
&lt;!-- JSDelivr -->
43+
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/css-skeletons@0.0.1/css/css-skeletons.min.css" /></code></pre>
4344

4445
<span class="or">Or</span>
4546
<h4>Install from NPM</h4>
@@ -414,8 +415,7 @@ <h3>Custom Variables</h3>
414415
<td>
415416
Bullet size depending on
416417
<span class="prop inline">--l-h</span>. <br />
417-
<strong>Note that,</strong> must be equal or bigger than
418-
<span class="prop inline">--l-h</span>.
418+
<strong>*Note that,</strong> must be equal or bigger than 1.
419419
</td>
420420
<td>1.4</td>
421421
<td>
@@ -508,7 +508,8 @@ <h3>Examples</h3>
508508
</div>
509509

510510
<p class="description">
511-
If you want to change the default values, just send it in style="".
511+
If you want to change the default values, you can override it easily
512+
in style attribute.
512513
</p>
513514
<div class="box">
514515
<div class="box__wrp">

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "css-skeletons",
3-
"version": "0.1.0",
3+
"version": "1.0.1",
44
"description": "",
55
"main": "./css/css-skeletons.min.css",
66
"scripts": {
@@ -16,6 +16,6 @@
1616
"gulp-sourcemaps": "^2.6.1",
1717
"prettier": "^2.1.2"
1818
},
19-
"author": "",
19+
"author": "Doğukan Çavuş",
2020
"license": "ISC"
2121
}

0 commit comments

Comments
 (0)