juanfran / postcss-trolling

PostCSS plugin to increase the productivity of your co-workers

PostCSS Trolling

PostCSS plugin to increase the productivity of your co-workers .

Usage

postcss([ require('postcss-trolling') ])

See PostCSS docs for examples for your environment.

Options

blurBlink

Blur the website for a split second

• Default:

trolling({
  blurBlink: {
    time: '20s'
  }
});

/* output */
body {
    animation: blurBlink 20s infinite;
}
@keyframes blurBlink {
    0% {
        filter: blur(0px)
    }
    49% {
        filter: blur(0px)
    }
    50% {
        filter: blur(1px)
    }
    51% {
        filter: blur(0px)
    }
    100% {
        filter: blur(0px)
    }
}

comicSans

The best font ever for the web

• Default:

trolling({
  comicSans: true
});

/* output */
* {
    font-family: 'Comic Sans MS', cursive !important;
}

slowlyGrowText

Slowly grow text

• Default:

trolling({
  slowlyGrowText: {
    time: '120s',
    maxFontSize: '80pt'
  }
});

/* output */
p {
    animation: slowlyGrowText 120s ease-in;
}
@keyframes slowlyGrowText {
    0% {
        font-size: none;
    }
    100% {
        font-size: 80pt;
    }
}

rotate

Rotate the website

• Default:

trolling({
  rotate: {
    deg: 0.2
  }
});

/* output */
body {
    transform: rotate(0.2deg);
    overflow-x: hidden;
}

blur

Blur everything!

• Default:

trolling({
  blur: {
    time: '120s',
    blur: '0.8px'
  }
});

/* output */
body {
    animation: blur 120s infinite;
}
@keyframes blur {
    0% {
        filter: blur(0px);
    }
    100% {
        filter: blur(0.8px);
    }
}

roulette

Moves the specified number of properties into other (random) elements

• Default:

trolling({
  roulette: 1
});

.selector1 {
   width: 100%;
}

.selector2 {
   height: 100%;
}

.selector3 {
   display: block;
}

// (random) output -->

```css
.selector1 {
   height: 100%;
}

.selector2 {
  display: block;
}

.selector3 {
  width: 100%;
}

hideOdd

Hide every odd paragraph element

• Default:

trolling({
  hideOdd: true
});

/* output */
p:nth-child(odd) {
    display: none;
}

wait

Permanent cursor wait

• Default:

trolling({
  wait: true
});

/* output */
html {
    cursor: wait !important;
}

hideCursor

Hide cursor

• Default:

trolling({
  hideCursor: true
});

/* output */
html {
    cursor: none !important;
}

ren

rem is a band of course

.selector {
   width: 10rem;
}

// output -->

.selector {
  width: 10ren;
}

• Default:

trolling({
  ren: true
});

ms

microsoft doesn't have a browser...

.selector {
   -ms-flex: 1;
}

// output -->

.selector {
  flex: 1;
}

• Default:

trolling({
  ms: true
});

heigth

Fix typo heigth

.selector {
   height: 10px;
}

// output -->

.selector {
  heigth: 10px;
}

• Default:

trolling({
  heigth: true
});

aling

aling...

.selector {
   align-content: center;
}

// output -->

.selector {
  aling-content: center;
}

• Default:

trolling({
  aling: true
});

clearfix

fix clearfix

.clearfix:after { }

// output -->

.clearfix:before { }

• Default:

trolling({
  clearfix: true
});

veryImportant

Makes everything very important...

.selector {
  float: left !important;
}

// output -->

.selector {
  float: left !!important;
}

• Default:

trolling({
  veryImportant: true
});

zIndex

.selector {
  z-index: 99999;
}

// output -->

.selector {
  z-index: 0;
}

• Default:

trolling({
  zIndex: true
});

All defaults

trolling({
  aling: true,
  blur: {
    time: '120s',
    blur: '0.8px'
  },
  blurBlink: {
    time: '20s'
  },
  clearfix: true,
  comicSans: true,
  heigth: true,
  hideCursor: true,
  hideOdd: true,
  ms: true,
  ren: true,
  rotate: {
    deg: 0.2
  },
  roulette: 1,
  slowlyGrowText: {
    time: '120s',
    maxFontSize: '80pt'
  },
  veryImportant: true,
  wait: true,
  zIndex: true
});

// disabled
trolling({
    aling: false,
    blur: false,
    blurBlink: false,
    clearfix: false,
    comicSans: false,
    heigth: false,
    hideCursor: false,
    hideOdd: false,
    ms: false,
    ren: false,
    rotate: false,
    roulette: false,
    slowlyGrowText: false,
    verImportant: false,
    wait: false,
    zIndex: false
})

Thanks

This plugin is based on aprilFools.css

postcss-trolling's Issues

More examples

You need more input/output or screenshots examples.