Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stylus/nib
Stylus mixins, utilities, components, and gradient image generation
https://github.com/stylus/nib
Last synced: 29 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 (about 13 years ago)
- Default Branch: main
- Last Pushed: 2022-05-17T03:22:16.000Z (about 2 years ago)
- Last Synced: 2024-04-14T15:56:38.198Z (2 months ago)
- Language: Stylus
- Homepage: http://stylus.github.io/nib
- Size: 604 KB
- Stars: 1,906
- Watchers: 61
- Forks: 250
- Open Issues: 90
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- awesome-stars - nib - Stylus mixins, utilities, components, and gradient image generation (CSS)
- awesome-stars - nib
- awesome-stars - nib - Stylus mixins, utilities, components, and gradient image generation (CSS)
- awesome-stars - nib - Stylus mixins, utilities, components, and gradient image generation (CSS)
README
# Nib [](https://www.npmjs.com/package/nib) [](https://www.npmjs.com/package/nib) [](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)