As for pure node.js or some other cases dookie has method called css. Here is an example of simple static server.js using Stylus + dookie:
var stylus = require('stylus'),
dookie = require('dookie-css');
...
// use stylus for styling
stylus(str)
.use(dookie.css()) // call dookie.css() function
.render(function (err, css) {
if (err) {
throw err;
}
// do smth with 'css'
});
Check out ./examples folder to see how dookie can be introduced with pure node.js static server or express framework.
So now all dookie utilities can be called within your .styl files and it's time to check lib's documentation.
##Stylus cli plugin
If you prefer use Stylus cli executable for converting Stylus to CSS, you can also use dookie with it. In option specify path to dookie.js file, for example:
Dookie contains default configuration settings.styl. So this depends on your needs, but it's recommended to create your own _settings.styl (could be named whatever you like) and specify or overwrite existed variables.
######Examples:
Here is custom _settings.styl file which specifies vendors that are needed, and path to the folder with images:
img-path = '../images/'
vendors = webkit moz
Now in your main Stylus file we add @import configuration and start to use dookie easily:
@import '_settings'
...
######List of global settings:
img-path - path to the app folder with images (empty by default);
vendors - list of vendors you want to use (by default includes webkit, moz, ms, o and official which means unprefixed property);
ie-support - set to true to enable special IE properties like filter: alpha(opacity = 100) etc.
font-stack - global font-family stack;
sans-serif- serif and monospace - default font-families;
font-size - global font-size variable;
default-color - global font color fallback;
Settings file is also a good place to put your own configuration on the project.
###Reset mixins
These helpers are global (this also means you should use them in mixin form - mixin(args) instead of mixin: args):
very similar mixin but adds background-size: contain property for retina displays (use it together with @media all and (-webkit-min-device-pixel-ratio: 1.5));
Note: if you specify images folder in your settingsimg-path variable it allows you to put only picture file name in all dookie mixins;
#####image-block: [path], [dimensions optional]
mixin that replaces block with image specified in it.
Note:.png images could skip dimensions, because of Stylus native image-size() built-in function, example:
Dookie allows you to shorten css element positioning while using simply one line property.
#####absolute: [name value], ...
#####relative: [name value], ...
#####fixed: [name value], ...
#####static: [name value], ...
######Example:
.box
absolute: top 10px left 15px
/* yields => */
.box {
position: absolute;
top: 10px;
right: 15px;
}
###Sprites
Dookie has several helpers to simplify your work with sprites.
#####sprite-grid: [path], [x], [y], [grid]
basic grid helper, [path] to your sprite picture, [x], [y] - square counts where icon is placed and [grid] param is your grid step (also can be as 2 params - gridX and gridY), example:
same as previous one but also replaces text within an element with icon from the sprite;
Note: nice article describing these techniques by Niels Matthijs;
###Vendor prefixes
Dookie intelligently simplifies usage of css properties that mostly need to be prefixed. Only thing that you should do is to setup in your _settings.styl which prefixes you want to use (by default all of them are included). List of property mixins:
#####box-shadow: [args...]
#####border-radius: [args...]
#####box-sizing: [args...]
#####animation: [args...]
#####transition: [args...]
#####transformation: [args...]
#####perspective: [args...]
#####backface-visibility: [args...]
#####filters: [args...]
Note: Properties like animation, transition, transform and perspective also include all separate dependent props like animation-name, transition-delay, perspective-origin etc.
#####-prefix: [property], [args...]
It is also good to know that if you need some property to be prefixed, you can use dookie's -prefix method while passing into it property name and value, example:
Together with Stylus and dookie you can easily create tests for your mixins and utilities. Read more how you can test dookie itself with mocha.js and casper.js here - ./test/README.md.
##Contribute
Dookie is in beta yet, so issues or useful pull requests are highly appreciated.
##Why dookie?!
Because it's awesome Green Day's album from my childhood :)