css-peeps

v1.0.1

Published

2 years ago

One CSS File, One <div>, 5 Million Open Peeps Combinations | Infinite Customization

Downloads

198

0High
0Medium
0Low

janeori

CSS Art OpenPeeps 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: picture the css-peeps character displayed from the above code

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).