https://github.com/stylus/nib

Stylus mixins, utilities, components, and gradient image generation
https://github.com/stylus/nib

Last synced: 13 days ago
JSON representation

Stylus mixins, utilities, components, and gradient image generation

• Host: GitHub
• URL: https://github.com/stylus/nib
• Owner: stylus
• License: mit
• Created: 2011-04-05T01:42:41.000Z (over 13 years ago)
• Default Branch: main
• Last Pushed: 2022-05-17T03:22:16.000Z (over 2 years ago)
• Last Synced: 2024-10-29T23:58:38.462Z (about 1 month ago)
• Language: Stylus
• Homepage: http://stylus.github.io/nib
• Size: 604 KB
• Stars: 1,900
• Watchers: 61
• Forks: 250
• Open Issues: 89
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-gradient - nib - Stylus mixins, utilities, components, and gradient image generation. (CSS)

README

        
# Nib [![npm](https://img.shields.io/npm/v/nib)](https://www.npmjs.com/package/nib) [![npm](https://img.shields.io/npm/dm/nib.svg?sanitize=true)](https://www.npmjs.com/package/nib)  [![build status](https://github.com/stylus/nib/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/stylus/nib/actions?query=branch%3Amain)

  Stylus mixins, utilities, components, and gradient image generation. Don't forget to check out the [documentation](http://stylus.github.io/nib).

## Installation

```bash

$ npm install nib

```

 If the image generation features of Nib are desired, such as generating the linear gradient images, install [node-canvas](http://github.com/learnboost/node-canvas):

```bash

$ npm install canvas

```

## JavaScript API

 Below is an example of how to utilize nib and stylus with the connect framework (or express).

```javascript

var connect = require('connect')

  , stylus = require('stylus')

  , nib = require('nib');

var server = connect();

function compile(str, path) {

  return stylus(str)

	.set('filename', path)

	.set('compress', true)

	.use(nib());

}

server.use(stylus.middleware({

	src: __dirname

  , compile: compile

}));

```

## Stylus API

  To gain access to everything nib has to offer, simply add:

  ```css

  @import 'nib'

  ```

  Or you may also pick and choose based on the directory structure in `./lib`, for example:

  ```css

  @import 'nib/gradients'

  @import 'nib/overflow'

  @import 'nib/normalize'

  ```

_To be continued..._

## More Information

  - Introduction [screencast](http://www.screenr.com/M6a)

## Testing

 You will first need to install the dependencies:

 ```bash

    $ npm install -d

 ```

 Run the automated test cases:

 ```bash

    $ npm test

 ```

 For visual testing run the test server:

 ```bash

    $ npm run-script test-server

 ```

 Then visit `localhost:3000` in your browser.

## Contributors

I would love more contributors. And if you have helped out, you are awesome! I want to give a huge thanks to these people:

  - [TJ Holowaychuk](https://github.com/tj) (Original Creator)

  - [Sean Lang](https://github.com/notslang) (Previous Maintainer)

  - [iChenLei](https://github.com/iChenLei) (Current Maintainer)

  - [Isaac Johnston](https://github.com/superstructor)

  - [Everyone Else](https://github.com/tj/nib/contributors)