wintersmith-styl

styl plugin for wintersmith.

Installation

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}
}

Extras

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.

Testing

Just run npm test.
Test are written using Mocha.