wintersmith-styl

styl plugin for wintersmith.

$3

npm install wintersmith-styl -g
then add wintersmith-styl to your plugins in the wintersmith config

or locally,

npm install wintersmith-styl

then add ./node_modules/wintersmith-styl/ to config.json like:

{
"locals": {
"url": "http://localhost:8080",
"name": "The Wintersmith's blog",
"owner": "The Wintersmith",
"description": "-32°C ain't no problems!",
"index_articles": 3
},
"plugins": [
"./node_modules/wintersmith-styl/"
]
}

On this plugin, the whitespace option is true by default. You can turn it off by setting it to false on your config.json:

{
"locals": {},
"plugins": [
"./node_modules/wintersmith-styl/"
],
"styl": {"whitespace": false}
}

$3

#### Variants

A better way to write variables on styl, using rework-variant.

$globals
size: 50px

$colors
blue: #2ccdec
orange: #f33c27

#logo
width: $size
height: @width
absolute: top 100px left 50%
background: linear-gradient(top, $colors.blue, $colors.orange)

They are enabled by default, but if you need to disable them, just set the variant property to false, in your config.json:

{
"locals": {},
"plugins": [
"./node_modules/wintersmith-styl/"
],
"styl": {"variant": false}
}

#### Selector Prefixes

You can add a prefix to all selectors in your stylesheet, by adding the property prefix to your styl configuration, on config.json:

{
"locals": {},
"plugins": [
"./node_modules/wintersmith-styl/"
],
"styl": {"str": "body.my-app >", "exclude": "normalize\.styl$"}
}

#### Custom Mixins and Functions

You can also add mixins and functions, by creating a small plugin:

# ./plugins/styl_custom.coffee
module.exports = (env, callback) ->
options = env.config.styl or {}
options.functions =
black: (opacity) -> "rgba(0, 0, 0, #{opacity})"

callback()

// ./css/main.styl
body
.my-div
color: black(0.3) // outputs color: rgba(0, 0, 0, 0.3);

Check the example folder, for a functional implementation.

$3

Just run npm test.
Test are written using Mocha.