Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: dgknca/css-skeletons
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v1.0.6
Choose a base ref
...
head repository: dgknca/css-skeletons
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref
  • 3 commits
  • 6 files changed
  • 1 contributor

Commits on Jul 19, 2022

  1. demo: correct cdn links

    dgknca committed Jul 19, 2022
    Copy the full SHA
    fa15f33 View commit details
  2. Copy the full SHA
    90e5e96 View commit details

Commits on Jul 24, 2022

  1. Copy the full SHA
    e88afff View commit details
Showing with 161 additions and 1,693 deletions.
  1. +11 −35 README.md
  2. +3 −3 demo/index.html
  3. +1 −1 dist/css-skeletons.min.css
  4. +2 −2 gulpfile.js
  5. +142 −1,650 package-lock.json
  6. +2 −2 package.json
46 changes: 11 additions & 35 deletions README.md
Original file line number Diff line number Diff line change
@@ -10,10 +10,10 @@

```html
<!-- UNPKG -->
<link rel="stylesheet" href="https://unpkg.com/css-skeletons@1.0.6/dist/css-skeletons.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/css-skeletons@1.0.7/dist/css-skeletons.min.css"/>

<!-- JSDelivr -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/css-skeletons@1.0.6/dist/css-skeletons.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/css-skeletons@1.0.7/dist/css-skeletons.min.css"/>
```

or
@@ -28,40 +28,16 @@ npm i css-skeletons
import 'css-skeletons'
```

## Examples
## Development

A few example from [documentation](https://dgknca.github.io/css-skeletons).
Make sure you have [gulp-cli](https://prettier.io/) installed.

```html
<div
class="skeleton skeleton-line"
style="
--lines: 6; /* lines count */
--l-h: 10px; /* line height */
--l-gap: 8px; /* line gap */
"
></div>
```

![example 1](./demo/assets/img/skeleton-line.png)

```html
<div class="skeleton skeleton-card-3"></div>
```
```js
npm install --global gulp-cli
````

![example 2](./demo/assets/img/skeleton-card-3.png)
Then just run `gulp` to build/watch the `index.scss`.

```html
<div
class="skeleton skeleton-list no-animate"
style="
--lines: 5;
--bg: #ffb6b67d;
--c-bg: #ff92922b;
--bullet-ratio: 1.5;
--l-gap: 15px;
"
></div>
```

![example 3](./demo/assets/img/skeleton-list.png)
```js
gulp
````
6 changes: 3 additions & 3 deletions demo/index.html
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@
<link rel="stylesheet" href="./assets/css/main.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/css-skeletons@1.0.6/dist/css-skeletons.min.css"
href="https://unpkg.com/css-skeletons@1.0.7/dist/css-skeletons.min.css"
/>
<title>Single Div CSS Skeletons</title>
</head>
@@ -37,12 +37,12 @@ <h3>Getting Started</h3>

<h4>Use from CDN</h4>
<pre class="code-intro"><code class="code js">&lt;!-- UNPKG -->
&lt;link rel="stylesheet" href="https://unpkg.com/css-skeletons@1.0.6/css/css-skeletons.min.css" />
&lt;link rel="stylesheet" href="https://unpkg.com/css-skeletons@1.0.7/dist/css-skeletons.min.css" />

or

&lt;!-- JSDelivr -->
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/css-skeletons@1.0.6/css/css-skeletons.min.css" /></code></pre>
&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/css-skeletons@1.0.7/dist/css-skeletons.min.css" /></code></pre>

<span class="or">Or</span>
<h4>Install from NPM</h4>
Loading