Extend Sylus with a Nib

Today I am releasing Nib, an extensions library for Stylus, inspired by the SASS compass library. Nib is a very new library with a minimal feature set at the moment, however I need to get some of my semi-finished projects open-sourced to make way for bigger badder things, and I’m already finding this project quite useful so feedback and contributions are always welcome.

If you dont like to read, feel free to check out the short screencast.

Vendor Support

Nib currently supplies some cross-browser vendor support for properties, however this will surely expand and be refined as we go.

Enjoy The Little Things

Ever forget if nowrap is no-wrap, or whitespace over white-space? well I do, thanks to simple definitions like the following, these are completely interchangeable:

no-wrap = unquote('nowrap')

Augmented Border Radius

Border radius works as you might expected, however it is also augmented to support positioning. For example to round only the top of a box, use top 5px, or perhaps round the top and bottom differently with top 5px, buttom 10px. For example:

button {
  border-radius: top left 5px, bottom right 10px;
}

yields:

button {
  -moz-border-radius-topleft: 5px;
  -webkit-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

Position Properties

Nib has three position mixins or “custom properties”, fixed, absolute, and relative. These shorthands are helpful since you can define three properties in one concise, legible manner.

fixed: top left
fixed: top 5px left
fixed: top left 5px
absolute: top 5px left 5px
relative: left -5px

Expanding to:

position: fixed;
top: 0;
left: 0;

etc.

Gradients

Nib makes working with gradients easier than you could imagine. The following call to linear-gradient() duplicates the property to which it is assigned to (not bound only to “background”), and generates the appropriate webkit and mozilla output:

body
  background: linear-gradient(right bottom, white, 80% black)

yields:

body {
  background: -webkit-gradient(linear, right bottom, left top, color-stop(0, #fff), color-stop(0.8, #000));
  background: -moz-linear-gradient(right bottom, #fff 0%, #000 80%);
  background: linear-gradient(right bottom, #fff 0%, #000 80%);
}

You may pass as many color stops as you like, optionally providing a position before or after the color for each, whichever you prefer.

Gradient Image Generation

Another powerful feature of Nib, is the ability to utilize node-canvas when installed, and auto-generate a data URI representation of the gradient for further browser support. The image below displays google chrome’s render on the left, and node-canvas on the right.

gradients

The linear-gradient-image() function generates the data uri only:

body
  background: linear-gradient-image(50px top, white, black);

Alternatively we can pass the size to a regular call to linear-gradient() and the data uri will be created along with the other properties:

body
  background: linear-gradient(50px top, white, black);

Components

Nib currently ships with 5 or 6 sets of buttons, however I welcome the addition of other flexible components, and of course more buttons :). Below is an example of utilizing the “bold” button, assigning a glow which adjusts appropriately within the mixin.

.bold
  bold-button()

.bold-alternate
  bold-button(glow: #00ABFA)

glow button