PostCSS plugin to increase the productivity of your co-workers
Switch branches/tags
Nothing to show
Clone or download
Latest commit d7208cd Dec 4, 2015
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.editorconfig initial trolling Nov 26, 2015
.eslintrc trolling complete Nov 28, 2015
.gitignore initial trolling Nov 26, 2015
.npmignore initial trolling Nov 26, 2015
.travis.yml initial trolling Nov 26, 2015
CHANGELOG.md initial trolling Nov 26, 2015
LICENSE initial trolling Nov 26, 2015
README.md fix doc Dec 4, 2015
index.js roulette Dec 3, 2015
package.json 0.1.7 Dec 3, 2015
test.js roulette Dec 3, 2015

README.md

PostCSS Trolling Build Status

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

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

blink

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;
    }
}

text-grow

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);
    }
}

blur

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