css-peeps

CSS-Peeps

One CSS file | One <div> | 5 Million Open Peeps combinations | Infinite Customization

Set up

CSS-Peeps only requires a single CSS file and is less than 1/10th of Twitter's max gif size.

Install

$ npm install css-peeps

Then include /node_modules/css-peeps/css-peeps.css

OR Use your favorite NPM CDN for small projects

From html:

<link rel="stylesheet" type="text/css" href="https://unpkg.com/css-peeps@1/css-peeps.css">

or directly from your CSS:

@import url(https://unpkg.com/css-peeps@1/css-peeps.css);

Usage

Using the Type Grinding API where style variations are set from your CSS:

HTML:

<div class="css-peeps"></div>

CSS:

div {
  --peep-head: bangs1;
  --peep-face: talking;
  --peep-body: explaining;

  --peep-hat-color: #FC03C2;
  --peep-hair-color: #7300E6;
  --peep-skin-color: #87ceeb;
  --peep-accessory-color: #00ff00;
  --peep-facial-hair-color: #ffd700;
  --peep-object-color: #ffa500;
  --peep-clothes-color: #ff00c8;

  width: 317px;
  height: 343px;
}

Result:

Or, use the old school, backwards compatible API where style variants are all set from markup:

HTML:

<div data-css-peeps="bangs1 talking explaining"></div>

CSS:

div {
  --peep-hat-color: #FC03C2;
  --peep-hair-color: #7300E6;
  --peep-skin-color: #87ceeb;
  --peep-accessory-color: #00ff00;
  --peep-facial-hair-color: #ffd700;
  --peep-object-color: #ffa500;
  --peep-clothes-color: #ff00c8;

  width: 317px;
  height: 343px;
}

And the result is the same.

CSS-Peeps renders everything on the ::before and ::after pseudo elements, square and centered in the element, so you can still customize the element itself further with border, border-radius, backgrounds, etc.

css-peeps.css vs css-peeps.compat.css

The main css-peeps.css file currently has a global user reach of ~72.95% and includes both the Type Grinding API and the classic backwards compatible data-attr API.

For the largest user reach (~92.33% of global users), include the compatibility-focused API css-peeps.compat.css instead of css-peeps.css but you'll lose the Type Grinding API (data-attr API only).

Links

Online CSS-Peeps WYSIWYG Builder

CSS-Peeps Documentation

Leave a star for CSS-Peeps on github!

Follow the author, Jane Ori, on twitter!

CSS-Peeps on npm

CSS-Peeps is free and open source with the BSD-2-Clause license

---

Original black & white SVG character line drawings by Open Peeps

Open Peeps license: CC0 License

Supporting CSS-Peeps

Through paypal (augmented-ui is another library from Jane @ PropJockey)

BTC address: bc1qe2ss8hvmskcxpmk046msrjpmy9qults2yusgn9

XRP address + tag: rw2ciyaNshpHe7bCHo4bRWq6pqqynnWKQg + 459777128

ETH address: 0x674D4191dEBf9793e743D21a4B8c4cf1cC3beF54