6.7 KiB

Raw Blame History

Mixins

Gradient

Nib's gradient support is by far the largest feature it provides. Not only is the syntax extremely similar to what you would normally write, it's more forgiving, expands to vendor equivalents, and can even produce a PNG for older browsers with node-canvas.

body
  background linear-gradient(top, white, black)

body {
  background: -webkit-linear-gradient(top, #fff, #000);
  background: -moz-linear-gradient(top, #fff, #000);
  background: -o-linear-gradient(top, #fff, #000);
  background: -ms-linear-gradient(top, #fff, #000);
  background: linear-gradient(to bottom, #fff, #000);
}

Any number of color stops may be provided:

body
  background linear-gradient(bottom left, white, red, blue, black)

Units may be placed before or after the color:

body
  background linear-gradient(left, 80% red, #000)
  background linear-gradient(top, #eee, 90% white, 10% black)

Position

The position mixins absolute, fixed, and relative provide a shorthand variant to what is otherwise three CSS properties. The syntax is as follows:

fixed|absolute|relative: top|bottom [n] left|right [n]

The following example will default to (0,0):

#back-to-top
  fixed bottom right

#back-to-top {
  position: fixed;
  bottom: 0;
  right: 0;
}

You may also specify the units:

#back-to-top
  fixed bottom 10px right 5px

#back-to-top {
  position: fixed;
  bottom: 10px;
  right: 5px;
}

Clearfix

Clearfixing causes containers to expand to contain floated contents. A simple example is shown here.

The clearfix mixin takes no arguments and expands to a form that provides extremely robust browser support.

.clearfix
  clearfix()

.clearfix {
  zoom: 1;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}

Border Radius

Nib's border-radius supports both the regular syntax as well as augmenting it to make the value more expressive.

button
  border-radius 1px 2px / 3px 4px

  button
    border-radius 5px

  button
    border-radius bottom 10px

button {
  border-radius: 1px 2px/3px 4px;
}
button {
  border-radius: 5px;
}
button {
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

Responsive Images

The image mixin allows you to define a background-image for both the normal image, and a doubled image for devices with a higher pixel ratio such as retina displays. This works by using a @media query to serve an "@2x" version of the file.

#logo
  image '/images/branding/logo.main.png'

#logo
  image '/images/branding/logo.main.png' 50px 100px

#logo {
  background-image: url("/images/branding/logo.main.png");
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #logo {
    background-image: url("/images/branding/logo.main@2x.png");
    background-size: auto auto;
  }
}
#logo {
  background-image: url("/images/branding/logo.main.png");
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #logo {
    background-image: url("/images/branding/logo.main@2x.png");
    background-size: 50px 100px;
  }
}

Ellipsis

The overflow property is augmented with a "ellipsis" value, expanding to what you see below.

button
  overflow ellipsis

button {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Reset

Nib comes bundled with Eric Meyer's style reset and Nicolas Gallagher's Normalize support and, you can choose to apply the global or any specifics that you wish. To view the definitions view reset.styl.

CSS Reset

global-reset()
nested-reset()
reset-font()
reset-box-model()
reset-body()
reset-table()
reset-table-cell()
reset-html5()

Normalize

normalize-html5()
normalize-base()
normalize-links()
normalize-text()
normalize-embed()
normalize-groups()
normalize-forms()
normalize-tables()
normalize-css()

Read more about Normalize or see the original CSS here.

Border

This shorthand lets you create a border by just specifying a color, with defaults for width and style.

.foo
  border red

.foo {
  border: 1px solid red;
}

Shadow Stroke

Creates a text outline using text-shadow.

.foo
  shadow-stroke(red)

.foo {
  text-shadow: -1px -1px 0 red, 1px -1px 0 red, -1px 1px 0 red, 1px 1px 0 red;
}

Size

This shorthand lets you set width and height in one go.

.foo
  size 5em 10em

.foo {
  width: 5em;
  height: 10em;
}

Transparent Mixins

These mixins expand vendor prefixes but do not modify the behavior of the property.

For example:

*
  box-sizing border-box

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Here is the full list of properties for which Nib provides transparent mixins:

box-shadow
radial-gradient
user-select
column-count
column-gap
column-rule
column-rule-color
column-rule-width
column-rule-style
column-width
transform
border-image
transition
transition-property
transition-duration
transition-timing-function
transition-delay
backface-visibility
opacity
box-sizing
box-orient
box-flex
box-flex-group
box-align
box-pack
box-direction
animation
animation-name
animation-duration
animation-delay
animation-direction
animation-iteration-count
animation-timing-function
animation-play-state
animation-fill-mode
hyphens
appearance

Aliases

These aliases are provided purely for convenience.

official	aliases
nowrap	no-wrap
white-space	whitespace

6.7 KiB Raw Blame History