postcss-geordie-stylesheets

PostCSS Geordie

PostCSS plugin which allows you to speak Geordie.

Geordie Input

/* =============================
// Geordie Styling
// ============================= */

html {
  font-size: geet-walla;
}

small {
  font-size: canny-big;
}

.is-hidden {
  display: nowt !radgy;
}

.is-visible {
  display: giz-a-deek !radgy;
}

.box {
  position: absolute;
  doon-there: canny-big;
  reet: geet-walla;
}

.my-amazing-animation {
  wor-there: left;
  width: a-canny-bit;
  bobby-dazzla: slideIn 3s infinite;
}

@keyframes slideIn {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

CSS Output:

html {
  font-size: 100%;
}

small {
  font-size: 80%;
}

.is-hidden {
  display: none !important;
}

.is-visible {
  display: visible !important;
}

.box {
  position: absolute;
  bottom: 80%;
  right: 100%;
}

.my-amazing-animation {
  float: left;
  width: 30%;
  animation: slideIn 3s infinite;
}

@keyframes slideIn {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

Usage

postcss([ require('postcss-geordie-stylesheets') ])

Thanks to

To all the other great plugins such as Canadian Stylesheets & Australian Stylesheets. Inspiration comes from Saturday nights around the city.