Technology moves fast! ⚡ Don't get left behind.🚶 Subscribe to our mailing list to keep up with latest and greatest in open source projects! 🏆


Subscribe to our mailing list

nib

Stylus mixins, utilities, components, and gradient image generation

Subscribe to updates I use nib


Statistics on nib

Number of watchers on Github 1833
Number of open issues 104
Average time to close an issue about 2 months
Main language CSS
Average time to merge a PR 27 days
Open pull requests 36+
Closed pull requests 19+
Last commit over 1 year ago
Repo Created over 8 years ago
Repo Last Updated over 1 year ago
Size 542 KB
Homepage http://stylus.git...
Organization / Authorstylus
Latest Releasev1.0.4
Contributors53
Page Updated
Do you use nib? Leave a review!
View open issues (104)
View nib activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating nib for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

Build Status

Nib

Stylus mixins, utilities, components, and gradient image generation. Don't forget to check out the documentation.

Installation

$ npm install nib

If the image generation features of Nib are desired, such as generating the linear gradient images, install node-canvas:

$ npm install canvas

JavaScript API

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

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:

  @import 'nib'

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

  @import 'nib/gradients'
  @import 'nib/overflow'
  @import 'nib/normalize'

To be continued...

More Information

Testing

You will first need to install the dependencies:

    $ npm install -d

Run the automated test cases:

    $ npm test

For visual testing run the test server:

    $ 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:

nib open issues Ask a question     (View All Issues)
  • almost 3 years nib and Stylus variables do not work well together
  • almost 3 years broken with only one level of relative path
  • almost 3 years nsp vulnerability via stylus
  • about 3 years transition mixin breaks surrounding code
  • about 3 years Not want to use reset.styl
  • about 3 years "Size" utility conflicts with @page rule.
  • over 3 years normalize.styl
  • over 3 years width: max-content doesn't come with webkit and moz prefix
  • over 3 years Odd new error building flexbox grid framework with nib
  • over 3 years How to pass multiple animations to `animation()` in `vendor.styl`?
  • over 3 years Allow position top initial
  • over 3 years Release new version to npm
  • almost 4 years size() doesn't work with !important
  • almost 4 years "border" has its own mixin but other border properties don't
  • almost 4 years Request: disable vendor prefixing completely
  • about 4 years Writing-mode support
  • about 4 years Which site is official docs: nibstyl.us or tj.github.io/nib?
  • over 4 years Radial-gradient bug
  • over 4 years Stylus 0.50
  • over 4 years Disable erasing old CSS properties
  • over 4 years Multiple importing in 1.1.0
  • over 4 years set stylus as a peer dependency
  • over 4 years Prefixing causes flexbox to be set outside media query
  • over 4 years could we define browser version support to filter the result generated
  • almost 5 years Why is iconic in this repo?
  • almost 5 years Image mixin fails when defined inside a media query.
  • almost 5 years border-radius inherit not being compiled
  • about 5 years Add opactity mixin
  • about 5 years Using stylus sourcemaps with nib
  • about 5 years radial-gradient transparent mixin doesn't work?
nib open pull requests (View All Pulls)
  • columns vendor support
  • Allow pixel ratio array for image mixin
  • Fix flex-basis, flex-grow and flex-shrink for IE10 by adding -ms-flex-preferred-size, -ms-flex-positive and -ms-flex-negative
  • set stylus as a peer dep, closes #296
  • Created text.styl in lib/nib/ (fixes #249)
  • add filter to vendor
  • Better box model reset
  • Image mixin refactor
  • New site (redesign, updated documentation, and more)
  • mixin for blur
  • fix 189
  • Inline-block with conditional IE support
  • begin pulling in useful features from axis-css
  • Fix "-ms-flex: auto"
  • Add "avoid-column-break" mixin
  • Proper text stroke vendor prefixes and some touch/tap movile specific vendor prefixes mixins
  • Autoprefixer Integration
  • Position mixin accepts upto 4 arguments and supports 'auto' & 'inherit' values
  • Proper background-size keyword support
  • allow gradients stops to accept an array
  • W3 gradient direction reverse
  • Add vendor support for "filter" property
  • mobile mixins
  • Fix automatic gradient stops calculation
  • flex: basis-size and full flex shorthand support
  • Sizing Convenience Methods
  • SVG Gradient Generation Support
  • break-inside support
  • Add vendor clip-path support.
  • Update to the lastest normalize.css
  • feat: update Stylus dependency to version 0.54.5
  • Update docs/README.md for formatting and phrasing
  • stylus as a peer dependency
  • Remove vendor prefix for background-size
  • Update links
  • Fix link in readme
nib questions on Stackoverflow (View All Questions)
  • Deriving MKAnnotationView and linking it to a NIB file
  • i designed my nib in land scape mode, but in simulator it is showing in portrait mode?
  • Loading a view container inside of nib
  • How to load a View Controller SubClass with a nib without specifying the nib name as a string?
  • Reuse Custom Cell using NIB
  • Can we change class from uiview to uiscrollview in nib without changing constraints?
  • UITableViewCell nib with several constraint scenarios
  • View is loaded from nib but is not visible?
  • UITableViewCell swipe change content with nib file
  • How to fix "nib but didn't get a UITableView" error?
  • How to apply autolayout for UIView in nib?
  • Could not load the "" image referenced from a nib
  • Load Nib for UIView used in ViewController in StoryBoard
  • Instantiate view from nib throws error
  • Are view controllers with nib files broken in ios 8 beta 5?
  • Correct way to load a Nib for a UIView subclass
  • programmatically loading object from subclass of NSView from nib
  • How to resize custom UITableViewCell nib file to fit tableView?
  • Load a UIView from nib in Swift
  • Custom UITableView cell Nib file only shows up after select cell?
  • viewDidAppear called twice on the same instance, but only the first time this class loads form NIB
  • All images in xcassets, then how load the image referenced from a nib in my bundle
  • How to use UILabels from nib file in its super/mainview
  • Issue with Uicollectionview for nib but didn't get a UICollectionView
  • Cannot instantiate UIView from nib. "warning: could not load any Objective-C class information"
  • Could not load the "" image referenced from a nib in the bundle with identifier
  • NSWindowController without a nib file in Swift
  • View-based NSOutlineView without NIB?
  • Use two different nib files for iPhone 4 and iPhone 5
  • Custom UITableViewCell from nib in Swift
nib list of languages used
nib latest release notes

bugfix for inherit & initial values and a few documentation fixes

Other projects in CSS