GithubHelp home page GithubHelp logo

isabella232 / docpad-plugin-stylus Goto Github PK

View Code? Open in Web Editor NEW

This project forked from docpad/docpad-plugin-stylus

0.0 0.0 0.0 497 KB

Adds support for the Stylus CSS pre-processor to DocPad

License: Other

CoffeeScript 77.83% CSS 16.26% Stylus 5.91%

docpad-plugin-stylus's Introduction

Stylus Plugin for DocPad

Travis CI Build Status NPM version NPM downloads Dependency Status Dev Dependency Status
GitHub Sponsors donate button Patreon donate button Flattr donate button Liberapay donate button Buy Me A Coffee donate button Open Collective donate button crypto donate button PayPal donate button Wishlist browse button

Adds support for the Stylus CSS pre-processor to DocPad

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.

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:

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

Stylus Options

You can customise the options sent to stylus using the stylusOptions object. See the available options here.

Stylus Libraries

By default we include the Nib Stylus Library.

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:

@import 'nib'

Alternatively, if you would prefer to use individual parts like gradient support, you can do this by using:

@import 'nib/gradients'

Turning off Nib

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

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 instead of Nib, you first first install axis by doing:

npm install --save axis

Then update our DocPad configuration file with:

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:

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

History

Discover the release history by heading on over to the HISTORY.md file.

Contribute

Discover how you can contribute by heading on over to the CONTRIBUTING.md file.

Backers

Maintainers

These amazing people are maintaining this project:

Sponsors

No sponsors yet! Will you be the first?

GitHub Sponsors donate button Patreon donate button Flattr donate button Liberapay donate button Buy Me A Coffee donate button Open Collective donate button crypto donate button PayPal donate button Wishlist browse button

Contributors

These amazing people have contributed code to this project:

Discover how you can contribute by heading on over to the CONTRIBUTING.md file.

License

Unless stated otherwise all works are:

and licensed under:

docpad-plugin-stylus's People

Contributors

balupton avatar chase avatar dependabot[bot] avatar intval avatar ixth avatar kizu avatar lbilharz avatar mjrev avatar robloach avatar shinnn avatar timaschew avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.