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:
- Find a category your hipstyl fits (if there's no one, create one).
- Add your hipstyl in a mixin/selector inheritance form.
- Pull request it.
- ????
- PROFIT!!!1
To be accepted, your hipstyl must follow these requirements:
- It must be written in Stylus.
- It should require none or the minimal markup possible (try
:before
and:after
) - It should be hipster :D
- It must provide docs and a demo - codepen.io is recommended.
License
MIT