https://github.com/docpad/docpad-plugin-stylus

Adds support for the Stylus CSS pre-processor to DocPad
https://github.com/docpad/docpad-plugin-stylus

docpad-plugin stylus

Last synced: 13 days ago
JSON representation

Adds support for the Stylus CSS pre-processor to DocPad

Host: GitHub
URL: https://github.com/docpad/docpad-plugin-stylus
Owner: docpad
License: other
Created: 2012-10-17T02:03:45.000Z (over 12 years ago)
Default Branch: master
Last Pushed: 2023-12-31T22:40:13.000Z (over 1 year ago)
Last Synced: 2024-04-25T22:01:44.806Z (12 months ago)
Topics: docpad-plugin, stylus
Language: CoffeeScript
Homepage:
Size: 265 KB
Stars: 14
Watchers: 16
Forks: 10
Open Issues: 6
Metadata Files:
- Readme: README.md
- Changelog: HISTORY.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md

Awesome Lists containing this project

README

# [Stylus](http://learnboost.github.io/stylus/) Plugin for [DocPad](http://docpad.org)

Adds support for the [Stylus](http://learnboost.github.io/stylus/) CSS pre-processor to [DocPad](http://docpad.org)

Convention: `.css.styl|stylus`

## Install

```
docpad install stylus
```

## Configure

### Defaults

The default configuration for this plugin is the equivalant of adding the following to your [DocPad configuration file](http://docpad.org/docs/config).

``` coffee
plugins:
stylus:
stylusRequire: null
stylusLibraries:
nib: true
stylusOptions:
compress: true
'include css': true

# Disable compression on the development environment
environments:
development:
stylusOptions:
compress: false
```

### Using external Stylus
If you'd like to use not the Stylus version that goes with the plugin, but your custom one (patched or of a previous version), you could use the `stylusRequire` setting by passing your version to it:

``` coffee
plugins:
stylus:
stylusRequire: require('stylus')
```

### Stylus Options
You can customise the options sent to stylus using the `stylusOptions` object. [See the available options here.](http://learnboost.github.io/stylus/docs/js.html)

### Stylus Libraries
By default we include the [Nib Stylus Library](http://visionmedia.github.io/nib/).

#### Using Nib

Nib is a small and powerful library for the Stylus CSS language, providing robust cross-browser CSS3 mixins to make your life as a designer easier. By default nib support is enabled, but it can be disabled by setting the `useNib` option to `false`.

To use Nib, add the following to your main stylus file:
```css
@import 'nib'
```

Alternatively, if you would prefer to use individual parts like gradient support, you can do this by using:
```css
@import 'nib/gradients'
```

#### Turning off Nib

You can also turn off the inclusion of the Nib by setting the following:

``` coffee
plugins:
stylus:
stylusLibraries:
nib: false
```

#### Using a custom Library (like Axis)

You can include your own custom libraries, providing you npm install them yourself.

To use the [Axis Stylus Library](http://roots.cx/axis/) instead of Nib, you first first install axis by doing:

``` bash
npm install --save axis
```

Then update our DocPad configuration file with:

``` coffee
plugins:
stylus:
stylusLibraries:
nib: false
'axis': true
```

You can also customise the configuration sent to the library by doing the following, in this case, we set the [axis `implicit` property to `false`](https://github.com/jenius/axis#usage):

``` coffee
plugins:
stylus:
stylusLibraries:
nib: false
'axis':
implicit: false
```