hipstyl

a collection of hipster-ish mixins for stylus

Usage no npm install needed!

<script type="module">
  import hipstyl from 'https://cdn.skypack.dev/hipstyl';
</script>

README

hipstyl

A collection of hipster-ish mixins for Stylus preprocessor.

The Collection

Check out our current hipstyls.

Color

  • Pastelify

Buttons

  • Pressable (w/ animation)

Shadow

  • Long Shade
  • Raised

Loading

  • Website Bar (w/ animation)

Getting Started

Grab it from npm:

$ npm install hisptyl

Command-line

stylus --use ./node_modules/hipstyl/hipstyl.js --out ./

Gulp

var gulp = require('gulp')
  , stylus = require('gulp-stylus')
  ;

gulp.task('one', function () {
    gulp.src('./css/one.styl')
        .pipe(stylus({
            use: [require('hipstyl').css]
            compress: false
        }))
        .pipe(gulp.dest('./css'));
});

Connect/Express

var stylus = require('stylus')
  , hipstyl = require('hipstyl')
  ;

app.configure(function(){
    app.use(stylus.middleware({ src: __dirname + '/public', compile: hipstyl.middleware }));
});

Other enviroments

var stylus = require('stylus')
  , hipstyl = require('hipstyl')
  ;

stylus(str)
    .use(hipstyl.css())
    // call render & add more stylus config

Got a hipstyl? Really?

It'd be awesome to have your effect/mixin into hipstyl collection. So, make a Pull Request following these steps:

  1. Find a category your hipstyl fits (if there's no one, create one).
  2. Add your hipstyl in a mixin/selector inheritance form.
  3. Pull request it.
  4. ????
  5. PROFIT!!!1

To be accepted, your hipstyl must follow these requirements:

  1. It must be written in Stylus.
  2. It should require none or the minimal markup possible (try :before and :after)
  3. It should be hipster :D
  4. It must provide docs and a demo - codepen.io is recommended.

License

MIT