0.1.1 • Published 10 years ago

hipstyl v0.1.1

Weekly downloads
1
License
-
Repository
github
Last release
10 years ago

#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

0.1.1

10 years ago

0.1.0

10 years ago