Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ritterim/skellyCSS

A light-weight CSS framework to quickly implement skeletons into your projects.
https://github.com/ritterim/skellyCSS

Last synced: 25 days ago
JSON representation

A light-weight CSS framework to quickly implement skeletons into your projects.

Host: GitHub
URL: https://github.com/ritterim/skellyCSS
Owner: ritterim
License: mit
Created: 2020-12-21T19:38:54.000Z (almost 4 years ago)
Default Branch: main
Last Pushed: 2024-05-28T15:14:54.000Z (7 months ago)
Last Synced: 2024-11-05T05:49:16.672Z (about 1 month ago)
Language: HTML
Homepage:
Size: 385 KB
Stars: 42
Watchers: 11
Forks: 3
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

my-awesome-list - skellyCSS - weight CSS framework to quickly implement skeletons into your projects. | ritterim | 169 | (HTML)

README

        


  



# skellyCSS

A light-weight CSS framework to quickly implement skeletons into your projects.

Table of Contents


- [skellyCSS](#skellycss)

  - [Installation](#installation)

    - [npm](#npm)

    - [CSS](#css)

    - [JavaScript](#javascript)

  - [Quick Usage](#quick-usage)

  - [Usage](#usage)

    - [Headers](#headers)

    - [Paragraphs](#paragraphs)

    - [Line Width](#line-width)

    - [Alignment](#alignment)

    - [Images](#images)

      - [Sizes](#sizes)

      - [Shapes](#shapes)

    - [Animation](#animation)

  - [JavaScript Utility](#javascript-utility)

    - [JavaScript Data Attributes](#javascript-data-attributes)

      - [All Data Attributes](#all-data-attributes)




## Installation

### npm

To install via node package manager:

```shell

npm install @ritterim/skellycss

```

### CSS

Include the Skelly css file wherever you add your CSS:

``` html

```

### JavaScript

Include the skelly.js file wherever you add your JavaScript:

``` html

```




## Quick Usage

You can quickly get started using skellyCSS using the JavaScript utility, like so:

``` html





```

**See full [JavaScript Utility](#javascript-utility) docs below**




## Usage

Skeletons can be quickly added to any project with a few simple lines of code. 

### Headers

Apply the `skeleton` class to any type of header and it will automatically adjust to the font-size of the header stylings:

![Headers](images/headers.png)

``` html













```




### Paragraphs

You can create paragraph skeletons by applying the `skeleton` class to the paragraph tag, then including however many span tags you'd like with the `skeleton__line` class within the paragraph. In order to make the paragraph skeleton look more like a paragraph, the last line is set to 50% width.

![Paragraphs](images/paragraphs.png)

```html



  

    

    

    

    

  



```




### Line Width

You can adjust the line width by applying a size modifier class:

| Width | Modifier Class | 

| ------------ | ------------|

| Small, 25% | `.skeleton--sm` |

| Medium, 50% | `.skeleton--md` |

| Large, 75% | `.skeleton--lg` |

| Full, 100% | `.skeleton--full` |

![Line Widths](images/line-widths.png)

``` html









```




### Alignment

You can text align the skeleton using alignment modifier classes:

| Alignment | Modifier Class |

| ------------ | ------------|

| Left | `.skeleton--left` |

| Center | `.skeleton--center` |

| Right | `.skeleton--right` |

![Alignment](images/alignment.png)

``` html



  

  

  

  





  

  

  

  





  

  

  

  



```




### Images

You can create an image skeleton by using the `.skeleton-image` class. By default this will apply the image skeleton at 100% height and width of the parent container.

#### Sizes

Here are some default sizes we have included for skeleton images:

| Size | Modifier Class |

| ------------ | ------------| 

| Small, 50x50 | `.skeleton-image--sm` |

| Medium, 100x100 | `.skeleton-image--md` |

| Large, 200x200 | `.skeleton-image--lg` |

| X-Large, 400x400 | `.skeleton-image--xl` |

| Full, 100% x 100% | `.skeleton-image--full` |

![Images](images/images.png)

``` html









```




#### Shapes

You can also make different image shapes using shape modifier classes:

| Shape | Description | Modifier Class |

| ------------ |------------ | ------------| 

| Square | Sets the image aspect ratio to 1/1 (default) | `.skeleton-image--square` |

| Circle | Sets the border radius to 50% | `.skeleton-image--circle` |

| Landscape Rectangle | Sets the image aspect ratio to 4/3 | `.skeleton-image--landscape` |

| Portrait Rectangle | Sets the image aspect ratio to 3/4| `.skeleton-image--portrait` |

| Wide Rectangle | Sets the image aspect ratio to 16/9 | `.skeleton-image--wide` |

| Tall Rectangle | Sets the image aspect ratio to 9/16 | `.skeleton-image--tall` |

``` html













```




### Animation

To add animation, add a `span.skeleton--animation` within the `.skeleton__line` elements in headers or paragaphs.

![Animation](images/animation.gif)

``` html



  

    

      

    

        

      

    

    

      

    

    

      

    

  



```




## JavaScript Utility

The easiest and our preferred way to add Skeletons is by using the included JavaScript utilities. 

On either a header tag or a paragraph tag, add the `skeleton` class and a `data-lines` attribute with the number of lines you'd like the skeleton to have:

``` html





```




You can also give the skeleton animation by adding the `data-animation` attribute and setting it to `true`:

``` html





```




### JavaScript Data Attributes

You can alter the way skeleton looks by utilizing other data-attributes as well, including opacity and color:

``` html









```

#### All Data Attributes

| Attribute | Description | Type |

| ------------ |------------ | ------------| 

| `data-lines` | Determines how many lines to output | Integer |

| `data-animation` | Adds animation to the skeleton lines | Boolean |

| `data-opacity` | Sets the opacity of the skeleton lines (sets opacity between 0 and 1) | Float |

| `data-color` | Sets the color of the skeleton lines | Color |