Installation

You can and should install axis through npm, which comes bundled with node.js. You can install axis into a node project with the following command:

npm install axis --save

You can find the full source for axis on github, here.

Usage

Axis comes as a very standard stylus plugin, but unfortunately there are a huge variety of ways that you can use stylus plugins and it would be impossible to cover them all here. But I will try to cover as many of the common use cases as possible.

Before we start with the different build system integrations though, I want to note the single option that you can initialize axis with. By default, axis will auto-import itself into all your stylesheets. This is purely for convenience -- axis only defines mixins, so it's invisible if you don't use any of it's mixins anyway. However, if you'd rather not have it do this, you can initialize axis with { implicit: false }, then you'll need to manually @import it in your stylus in order to use it. Ok, on to integrations.

Standalone

Using axis with a straight up stylus pipeline is fairly simple with the use function. The code below demonstrates a simple use case.

var stylus = require('stylus'),
    axis = require('axis'),
    fs = require('fs');

var code = fs.readFileSync('/path/to/file.styl', 'utf8');

stylus(code)
  .use(axis())
  .render(console.log.bind(console));

Accord & Roots

Accord is a clean and uniform interface to a large number of compiled languages. It's used behind the scenes of a number of libraries, including the wonderful static site build tool roots. It's stylus adapter is fully documented, and includes 'use' similar to the direct stylus API. Here's an example of how it would look loading in axis.

var accord = require('accord'),
    axis = require('axis'),
    styl = accord.load('stylus');

styl.renderFile('/path/to/file.styl', { use: axis() })
  .then(console.log.bind(console))

If you are using Roots, you can just load axis in as a stylus plugin in the app.coffee file as such:

axis = require 'axis'

module.exports =
  stylus: { use: axis() }

Gulp

You can use accord directly with gulp if you'd like through the gulp-accord plugin, which can compile any of the languages accord supports, or use the gulp-stylus plugin, which also uses accord under the hood. Here's how it would look with gulp-stylus:

var gulp = require('gulp'),
    stylus = require('gulp-stylus'),
    axis = require('axis');

gulp.task('default', function(){
  gulp.src('./path/to/file.styl')
  .pipe(stylus({ use: axis() }))
  .pipe(gulp.dest('./destination/folder'));
});

Grunt

Although grunt's stylus plugin doesn't use accord, it takes very similar options, and will look almost the same, although a lot more verbose than gulp, but that's just how grunt is. Here's how a snippet of the config would look in use:

var axis = require('axis');

stylus: {
  compile: {
    options: { use: axis() },
    files: { '/path/to/result.css': '/path/to/file.styl' }
  }
}

Express

Stylus actually has very nice documentation on its own site on how to use it with express, so follow this to get stylus set up. Beyond that, just use axis in the pipeline as is described in the standalone section above. Example of this in action:

var express = require('express'),
    stylus = require('stylus'),
    axis = require('axis');

var app = express()

app.use(stylus.middleware({
  src: __dirname,
  dest: __dirname  '/public',
  compile: compile
}));

function compile(str, path){
  return stylus(str)
    .set('filename', path)
    .use(axis());
}

If there's another build pipeline that you are struggling to get axis integrated with, open up an issue, and we can try to add instructions here!

Settings

Axis has a simple built-in settings file with common variables shared across mixins. Overwrite any of these defaults in your project where needed.

Font Stacks

Shortcuts to common font stacks.

$helvtica-neue = "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif
$helvetica = "Helvetica Neue", Helvetica, Arial, sans-serif
$georgia = Georgia, Cambria, "Times New Roman", Times, serif
$lucidia-grande = "Lucida Grande", Tahoma, Verdana, Arial, sans-serif
$monospace = unquote("'Bitstream Vera Sans Mono', Consolas, Courier, monospace")
$verdana = Verdana, Geneva, sans-serif

Default Font Settings

Some reasonable defaults for typography.

$font-stack = $helvetica-neue
$font-size = 16
$font-color = #555

Colors

Axis provides an alternative pallete to default html colors. These are accessible as variables or by calling the color name directly. ie: background: teal. Based on http://clrs.cc (slightly modded).

$navy = #001F3F
$blue = #0074D9
$aqua = #7FDBFF
$teal = #39CCCC
$olive = #3D9970
$green = #2ECC40
$lime = #01FF70
$yellow = #FFDC00
$orange = #FF851B
$red = #D13F19
$maroon = #85144B
$fuchsia = #F012BE
$purple = #B10DC9
$white = #FFFFFF
$silver = #DDDDDD
$gray = #AAAAAA
$black = #222222

Did you know?

There are 140 named hex colors like honeydew, tomato, and mistyrose. Need inspiration when naming your own custom color variables? Try Name that Color.

Default color

$default-color = $blue

This sets the color for various primary elements. Used in blockquote, button, figure, link, hover-glow

Text selection

$text-selection = $blue

Used in text-selection this sets the text highlight color.

Image path

$img-path = ''

This custom image base path is used in image-replace, bg, & bg-retina. It's handy for your custom seletors and mixins as well.

Ligatures

$ligatures = 'false'

Enables Opentype ligatures. Used in paragraph.

Easing

While the dieties of css have been kind enough to provide us with a couple of basic easing functions for transitions, some of us like to go all out on crazy easing effects. If you fit this description, do not fret, axis has got you covered in that department.

$ease-in-quad

$ease-in-cubic

$ease-in-quart

$ease-in-quint

$ease-in-sine

$ease-in-expo

$ease-in-circ

$ease-in-back

$ease-in-swift

$ease-out-quad

$ease-out-cubic

$ease-out-quart

$ease-out-quint

$ease-out-sine

$ease-out-expo

$ease-out-circ

$ease-out-back

$ease-out-swift

$ease-in-out-quad

$ease-in-out-cubic

$ease-in-out-quart

$ease-in-out-quint

$ease-in-out-sine

$ease-in-out-expo

$ease-in-out-circ

$ease-in-out-back

$ease-in-out-swift

Buttons

Axis' buttons are extremely flexible to be able to fit any situation. They come in two flavors, the basic default button and the glossy button.

button-disabled()

Add this mixin to a button and it will make the button appear to be disabled. Try attaching to a class like .disabled and adding that class to the button.

Examples

.disabled
  button-disabled()

don't click me : (

button($color,$size,$text-color)

The basic button mixin, flat and simple, but scales very well to any size and can be quite flexible using options passed in.

Parameters

$color: Any CSS color value, default blue.
$size: Font size, no unit. Used to scale all other properties. You can also use a string, either "small", "medium", or "large". Default is 14.
$text-color: Color of the text on the button. Default is either black or white depending on the darkness of the background color.

Examples

.selector
  button()

click me!

.selector
  button: green 'large'

click me!

glossy-button($color,$size,$text-color)

A more fancy button style. This button has more swagger than your momma's uncle's cousin.

Parameters

$color: Any CSS color value, default blue.
$size: Font size, no unit. Used to scale all other properties. Default 14.
$text-color: Color of the text on the button. Default is either black or white depending on the darkness of the background color. Sometimes this contrast detection doesn't do exactly what you want though, so you can override it with textColor.

Examples

.selector
  glossy-button()

click me!

.selector
  glossy-button: blue 'large'

click me!

.selector
  glossy-button: orange 18 white

click me!

.selector
  glossy-button($color: orange, $text-color: white)

click me!

Code Blocks

A small collection of simple and polished styles for code blocks.

code($color)

Basic styles for inline code blocks, with a customizable color.

Parameters

$color: The color of the element, default red.

Examples

code
  code()

Here's an inline code block

code
  code: blue

Here's another one

pre()

Basic styles for a multiline code block, ready for syntax highlighting.

Examples

pre
  pre()

this is so meta

Forms

Forms are a huge pain. This light set of mixins attempt to eliminate some of the pain without forcing your hand in regards to markup structure.

autofill($background,$color)

When forms are auto-filled, the background color for the inputs (ie: pale yellow) can be very jarring, especially if you have a dark background. This allows you to override that.

Parameters

$background: Background color. Default is blue, but you'll probably want to change this.
$color: Text color. Default is white.

Examples

input
  autofill(green, white)

Email:

field-error($color)

If you are wrapping labels and inputs in a '.field' div, this makes life even easier. Makes the label text as well as the input field highlight red.

Parameters

$color: Color that it uses to highlight. Default is red.

Examples

form .field.error
  field-error()

Name:

form .field.error
  field-error: #FA7346

Location:

field-success($color)

If you are wrapping labels and inputs in a '.field' div, you can now increase your users' feeling of joy upon successful entry of some information. Makes the label text as well as the input field highlight green.

Parameters

$color: Color that it uses to highlight. Default is green.

Examples

form .field.success
  field-success()

Name:

form .field.success
  field-success: #9DF49E

Location:

field-warning($color)

If you are wrapping labels and inputs in a '.field' div, this makes warning users even easier, wow. Makes the label text as well as the input field highlight yellow.

Parameters

$color: Color that it uses to highlight. Default is yellow.

Examples

form .field.warning
  field-warning()

Name:

form .field.warning
  field-warning: #FA7346

Location:

field($direction,$width)

Often times it's easier to wrap your input and label in a div so they can be floated, positioned, and manipulated without screwing up the rest of the form. That's what this mixin is for - put it on a div (perhaps with a class of 'field') that wraps a label and an input.

Parameters

$direction: The direction in which you'd like the text and input to be aligned. Takes either 'left' or 'right', default is 'right'.
$width: Width of the div. Default is 370px.

Examples

.field
  field()

Wow:

.field
  field: right 300px

Amaze:

html5-inputs()

Block mixin that renders all the types of input fields and text areas, even the special html5 ones like date, email, url, tel, etc so you don't need to type them all out manually.

Examples

+html5-inputs()
  input()

input-disabled()

Makes your input appear to be disabled. Note that you also need to add 'disabled' to your html tag in order for it to actually be disabled.

Examples

.disabled
  input-disabled()

input-error(color)

When someone screwed it up, you gotta show them how it is. Put this on an input to make it clear that something bad has happened. Best implemented in an '.error' class or something like that.

Parameters

color: Color that it uses to highlight. Default is red.

Examples

form .error
  input-error()

form .error
  input-error: #F99987

input-success(color)

Great success, very naice! Best implemented in a '.success' class or something similar.

Parameters

color: Color that it uses to highlight. Default is green.

Examples

form .success
  input-success()

form .success
  input-success: #9DF49E

input-warning($color)

Ok, so maybe you didn't *totally* mess it up, but at very least you deserve a warning. Best implemented in a '.warning' class or something similar.

Parameters

$color: Color that it uses to highlight. Default is yellow.

Examples

form .warning
  input-warning()

form .warning
  input-warning: #F8DE75

input($color,$width)

A general purpose mixin for text inputs. Provides an nice attractive default style that's easily customizable.

Parameters

$color: Color theme, shows up on focus. Defaults to aqua
$width: Self-explanitory, defaults to 250px

Examples

input[type='text']
  input()

input[type='text']
  input: purple 150px

label($display)

A very basic label style for your forms.

Parameters

$display: The css display property. Defaults to inline-block so the label displays next to the input, change to block to display above.

Examples

label
  label()

Name:

label
  label: block

Password:

radio($color)

A simple reset for radio button styling across browsers. Takes a color. Default color is blue. Use on the label which wraps your radio inputs.

Parameters

$color: Color for the active state. Default is blue.

Examples

label
  radio()

tersemodularpowerful

label
  radio(red)

BrooklynNashville

range-input($color,$track-width,$thumb-size,$track-height,$track-color)

A clean, cross-browser styling reset for range inputs. Note: range inputs are not supported in IE9 and below.

Parameters

$color: Color for the active state. Default is blue.
$track-width: Width of the track. Default is 100% of container.
$thumb-size: Size of the thumb. Default is 2em.
$track-height: Height of track. Default is .5em
$track-color: Color of track. Default is rgba(#000, .1)

Examples

input[type='range']
  range-input(blue, 100%, 1.5em)

.range
  range: tomato 150px 25px 2px rgba(red, .5)

Gradients

While the official W3C specs on gradients take care of most situations, Axis provides a couple of convenience methods for easily creating gradients.

gradient($color1,$color2,$strength)

Takes one color and outputs a vertical gradient between the offset by 10% in either direction, offset precentage customizable via 'strength' param. Or takes two colors and outputs a vertical gradient that fades between the two colors.

Parameters

$color1: Transitions starting at this color. If only this color is passed, lightens and darkend by 'strength' and creates a gradient with this color as the average. If you pass a second color, this is the top color and it transitions to the second.
$color2: Optional, transitions from color1 to this one
$strength: Percentage value, if you pass one color determines how much lighter and darker the top and bottom of the gradient should be. Default is 10%. If you pass a percentage as the second value, it's interpreted as strength, not color2.

Examples

.gradient
  gradient: red

.gradient
  gradient: red 30%

.gradient
  gradient: red blue

image-gradient($color1,$color2,$image-path,strength)

Exactly the same as the gradient mixin, but you can overlay an image to give it more texture.

Parameters

$color1: Transitions starting at this color. If only this color is passed, lightens and darkend by 'strength' and creates a gradient with this color as the average. If you pass a second color, this is the top color and it transitions to the second.
$color2: Optional, transitions from color1 to this one
$image-path: Path to the image you want to overlay. It will repeat/tile, so make sure there are no seams. If you pass an image path instead of a color as the second argument, the args are all shifted left one spot.
strength: Percentage value, if you pass one color determines how much lighter and darker the top and bottom of the gradient should be. Default is 10%.

Examples

.gradient
  image-gradient: red 'pattern.svg'

.gradient
  gradient: red 'pattern.svg' 30%

.gradient
  gradient: red blue 'pattern.svg'

Images

Some helpful tools to make dealing with images much more pleasant.

bg-retina($path,$width,$height,$args)

Make sure the image is double the size, pass it halved numbers, and you're in the retina-clear.

You may not need an extra retina image:

Use SVGs whenever possible: tiny file-size, fully scalable without losing clarity. Seriously, these things are the best.
When using JPGs: double the image resolution but crank the compression more than you normally would. This often results in smaller filesize for the @2x image versus the standard image at normal compression. The extra compression isn't noticeable on retina screens, because of the smaller pixels. It also looks great on non-retina screens because of browser resampling. Sounds too good to be true right? See a demo here.

Parameters

$path: Path to the image. If you set img-path, no need to include that twice.
$width: Width of the image. In this case it should be half the actual image's width
$height: Height of the image. In this case it should be half the actual image's height
$args: Any other arguments you might want to pass to 'background'

Examples

.selector
  bg-retina: 'path/to/image.jpg' 200px 250px

bg($path,$args)

A more convenient version of 'background'. Defaults to 'no-repeat' and prefixes your image path with img-path if you provide one.

Parameters

$path: Path to your image, prefixed with img-path if present.
$args: Any other arguments you might pass to 'background'.

Examples

.el
  bg: '/path/to/image.jpg'

image-replace($path,$dimensions)

Standard image replacement. Pass it an image path and the image's dimensions and any text will be hidden in the div and it will show an image instead. Uses the fanciest new method, props to Paul Irish. Only works when called as a function with parens. Also aliased to 'ir'.

Parameters

$path: Path to the image. This is prefixed by img-path if set.
$dimensions: Space-separated list of pixel values defining the image's dimensions.

Examples

h1
  ir('path/to.image.jpg', 300px 500px)

Hello there!

sprite($iteration,$orientation)

Given a direction in which your sprites are aligned (horizontal/vertical) and an iteration, will measure the width/height of your first sprite frame and step through to the nth next one, depending on the given iteration number. Width/height must be defined for this to work (as is the case for any sprite)

Parameters

$iteration: Integer, the frame number on the sprite. Will be 1/X of the total image width. Zero-indexed, so the first frame is 0.
$orientation: Whether your sprite frames are aligned horizontal or vertical. Default is 'vertical'.

Examples

.sprite
  sprite: 0

.sprite
  sprite: 1 'horizontal'

Interaction

Stylus is unique among css preprocessors for it's ability to access values from parent elements. This makes interaction-based mixins like these not only possible, but much more clean and DRY.

click-down($distance)

Moves element down on Y axis when clicked.

Parameters

$distance: Distance moved on Y axis. Default is 1px.

Examples

.btn
  click-down()

Click me

click-inset($radius)

Creates the effect of the element being pressed in on the Z axis. Recommended to be used with transition.

Parameters

$radius: Amount of the inset

Examples

.btn
  click-inset()

Click me as well

click-shadow($distance)

Creates a shadow under element while clicked/tapped. Recommended to be used with transition.

Parameters

$distance: Distance moved on Y axis. Default is 1px.

Examples

.btn
  click-shadow()

Click me too

click-shrink($distance)

Scales an element while clicked/tapped. Gives the illusion of lowering on the z-axis. Recommended to be used with transition.

Parameters

$distance: Amount scaled down. Default is .92

Examples

.btn
  click-shrink()

Do the click

hover-color($color,$force-use-color)

Will swap an elements color or background color on hover. Takes a color in any format as the first argument. Will first look for a background color to change, then a color.

Parameters

$color: The color you want to transition to
$force-use-color: If true, chooses color over background color first. Default false.

Examples

.selector
  background: red
  hover-color: black

background

.selector
  background: red
  color: white
  hover-color: black true

foreground

hover-darken($percentage,$force-use-color)

Darkens the color and/or background color on your element when it's hovered.

Parameters

$percentage: How much you want to darken the color. Default is 15%
$force-use-color: If true, chooses color over background color first. Default false.

Examples

.selector
  background: maroon
  hover-darken()

.selector
  background: olive
  hover-darken: 50%

hover-fade($amount)

Changes the element's opacity on hover.

Parameters

$amount: A value between zero and 1, as css opacity normally takes. Default is .5

Examples

.selector
  background: teal
  hover-fade()

.selector
  background: aqua
  hover-fade: .2

hover-float()

Floats element up on the Y axis with a little shadow below.

Examples

.selector
  hover-float()

hover-glow($color,$radius)

Gives an element a glow on hover. Recommended to be used with transition.

Parameters

$color: Color for the glow. Default is blue.
$radius: Glow radius. Default is 20px.

Examples

.selector
  hover-glow()

.selector
  hover-glow(purple, 100px)

hover-lighten($percentage,$force-use-color)

Lightens the color and/or background color on your element when it's hovered.

Parameters

$percentage: How much you want to lighten the color. Default is 15%
$force-use-color: If true, chooses color over background color first. Default false.

Examples

.selector
  background: fuchsia
  hover-lighten()

.selector
  background: yellow
  hover-lighten: 50%

hover-pop($scale,$rotate,$shadow)

'Pops' the element out from the page on hover.

Parameters

$scale: Scale to which the element should increase in size. Default is 1.2
$rotate: How many degrees the element should rotate, if any. Default is 0deg.
$shadow: Boolean, whether there should be a drop shadow once the element pops off the page.

Examples

.selector
  hover-pop()

WOW

.selector
  hover-pop: 1.5 7deg true

MORE WOW

hover-underline($border-size,$type,$color)

Creates a bottom border on an element on hover. Works very nicely for text like in a span, and can animate, but may need tweaking to get it working on other elements.

Parameters

$border-size: How thick you want rh border to be. Default is 1px.
$type: Type of border you want to use. Default is solid.
$color: Color you want the border to be. Default is none (will match element color).

Examples

.selector
  hover-underline()

Hello there!

.selector
  hover-underline: 2px dotted lime

Welcome to the docs

Layout

A few mixins to help tame those layouts.

absolute()

Syntax shortcut for absolute positioning. Ported from nib.

Examples

.selector
  absolute()

.selector
  absolute: bottom right

.selector
  absolute: top 50px right 5px

avoid-column-break()

If you have a list that is broken into columns, this will make sure that the list item is not split across columns awkwardly. Works only in webkit at the moment.

columns($count,$gap,$width,$rule)

A nice shortcut for smooth css3 columns.

Parameters

$count: Column count, integer.
$gap: Gap between columns, css width unit.
$width: Width of each column, css width unit.
$rule: Line between columns, takes the same arguments as a css border.

Examples

.cols
  columns: 3 10px 30px

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue.

fixed()

Syntax shortcut for fixed positioning. Ported from nib.

Examples

.selector
  fixed()

.selector
  fixed: top left

.selector
  fixed: bottom 50px left 5px

group()

Clearfix with a better name. Excellent for wrangling floats. Also aliased as clearfix. Learn more here.

Examples

.selector
  group()

.selector
  clearfix()

inline-block()

Display: inline-block, except it works in old browsers as well.

media($margin,$right-margin)

Based on Nicole Sullivan's media class, made famous by Facebook. Put this on a parent and it will split the first two children left and right, like you would with perhaps a comment with an avatar to the left. Pass it a margin between the two. Explained fully here.

This mixin works right when the element you apply it to has two or three direct children. The first one will float to the left, the second one will be to the right of the first, and third will go farthest right.

Parameters

$margin: Margin between the two floated elements
$right-margin: Optional margin to the right

Examples

.media
  media: 10px

Steve Brule:
In 1971 Bill Grates invented Michaelsoft.

ratio-box($ratio)

This sets a specific width/height ratio. Useful on background images, iframes and Youtube embeds.

Parameters

$ratio: Fraction, width over height

Examples

.widescreen-video
  ratio-box(16/9)

  iframe
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%

relative()

Syntax shortcut for absolute positioning. Ported from nib.

Examples

.selector
  relative()

.selector
  relative: top auto right auto

rule($color,$spacing)

A cleaner default for horizontal rules.

Parameters

$color: Color for the line. Default is rgba(#000, .15)
$spacing: Spacing above and below. Default is 1.5em

Examples

hr
  rule()

Text above the hr

Text below the hr.

table-layout($layout-type)

Sometimes you just need a good old-fashioned table layout. Here's a great article on the subject.

Parameters

$layout-type: fixed or auto

Examples

ul
  tl()

Adding more text to this li will add more vertical height to the ones next to it.
I am an li
Borders are for demo only - not part of the mixin.

Evenly
space
those
sibling
elements

No
matter
the
number

Reset

Reset all the things.

border-box-html()

Add border box to every element in your project. Used in your project root. Based on this post by Paul Irish.

fluid-media()

Use this mixin in the root of your project to make your img, video, and iframe tags display block and fill the width of their parent container.

global-reset()

We include a handy, intelligent reset of all styles based on Eric Meyer's reset. Call this at the root of your project, and never worry about reset again.

normalize-css()

Call this at the root level to apply normalize.css v3 to your page. It's recommended that you call this at the top of your stylesheet.

print-styles()

Apply this mixin in the root of your stylesheet to give your site nice, clean print styles wrapped in a media print query so you don't have to worry about it.

Tables

Right now, the "tables" section consists of just one mixin, for prettifying tables. But who knows, it might expand in the future if people love tables enough!

table($border,$striped,$condensed)

Ported directly from Twitter Bootstrap, as they did an excellent job with tables. Take three fairly self-explanitory arguments, all boolean. 1st makes the table bordered, 2nd adds zebra striping, and the 3rd indiated whether the table is condensed or not.

Parameters

$border: Boolean - adds borders to the table. Default true.
$striped: Boolean - adds zebra striping to the table rows. Default true.
$condensed: Boolean - created a condensed table with much less extra space. Default false.

Examples

table
  table()

Name	Doge?
John Doe	Yup.
Foo Bar	No Way

.stable
  table($striped: false, $condensed: true)

Name	Doge?
John Doe	Yup.
Foo Bar	No Way

Typography

A set of helpers and beautiful defaults for all aspects of typography.

blockquote($color)

Nice styles for a blockquote, and even puts a nice hyphen in before your citation. Use with a 'p' and 'cite', 'footer', or 'figcaption' inside for best results.

Parameters

$color: Color of the border on the left hand side. Default is blue.

Examples

blockquote
  blockquote()

Sometimes people write books and they just be so wordy and so self-absorbed. I am not a fan of books. I would never want a book's autograph. I am a proud non-reader of books.
Kanye West

blockquote
  blockquote: red

I hate when I'm on a flight and I wake up with a water bottle next to me like oh great now I gotta be responsible for this water bottle.
Kanye West

bold()

A short alias for 'font-weight: bold'. Purely convenience.

Examples

strong
  bold()

Wow such stronk text

ellipsis($width)

Truncate text to the width of its container using ellipsis.

Parameters

$width: Width of the container. Default is 100%

Examples

Sometimes you have to truncate verbose lines, and that's all there is to say.

p
  ellipsis()

Sometimes you have to truncate verbose lines, and that's all there is to say.

p
  ellipsis(50px)

Sometimes you have to truncate verbose lines, and that's all there is to say.

font-face($name,$folder,$weight,$style)

Super simple font-face declaration. Make sure to use this at the root level, not within a css selector, and use the parentheses syntax. Also make sure the font name matches the name of the files. Uses the fontspring syntax.

Parameters

$name: Name of the font. Make sure the font files have this name, this is also what you will use in your css.
$folder: Path to the folder that the fonts are in. The fonts will be located by joining this path and the font name, and adding extensions.
$weight: The weight you want this font to be. Default is normal.
$style: The style you want this font to be. Default is normal.

fs($size)

An alias for 'font-size' with a fallback for pixels in older browsers if you are using rem.

Parameters

$size: Font size that you want to pass in.

Examples

p
  fs: 1.5rem

My milkshake brings all the boys to the yard

headings()

For every header level from h1 through h6, there is a mixin you can use here that will set solid scalable defaults.

Examples

h1
  h1()

Heading 1

h2
  h2()

Heading 2

h3
  h3()

Heading 3

h4
  h4()

Heading 4

h5
  h5()

Heading 5

h6
  h6()

Heading 6

hyphenation()

Hyphenation is the better word-break. It’s locale aware, and inserts the hyphen character at the correct place, when breaking the words. This is especially important in responsive designs. It will save you from a lot of ragged lines. And, no need anymore for clunky & slow Javascript hyphenation fallbacks.

Warning

Hyphens are not currently supported by Chrome, so unless by some miracle you don't need to support Chrome you may want to hold off on using this one.

Examples

p
  hyphenation()

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

inline-list($spacing)

Lists stack vertically by default. This mixin makes them stack horizontally.

Parameters

$spacing: The amount of space between each list element. Default is 20px

Examples

ul
  inline-list()

One
Two
Three

ul
  inline-list: 40px

One
Two
Three

italic()

A short alias for 'font-style: italic'. Purely convenience.

Examples

em
  italic()

Wow such slanty text

link($color,$style)

A nice default style for your links.

Parameters

$color: Color you want the link to be. Default is blue.
$style: Can be underline, darken, lighten, or glow. Default is "underline".

Examples

a
  link()

Click me!

a
  link: green 'darken'

No click me instead!

lowercase()

A quicker alias for text-transform: lowercase. You can also use the alias 'downcase' to get the same effects.

Examples

h5
  lowercase()

FORCED LOWERCASE

h5
  downcase()

MORE LOWERCASE HERE

normal()

Resets the font weight and font style to normal, clearing anything that was bold and/or italic.

Examples

p
  bold()
  normal()

Not even a little bit bold.

ol($style)

Nice clean and scalable defaults for organized lists.

Parameters

$style: Any style that 'list-style-type' would normally take. Default is 'decimal'.

Examples

ol
  ol()

One
Two
Three

ol
  ol: 'upper-roman'

One
Two
Three

paragraph($size,$margins)

Sets a nice size, line-height, and margins on a paragraph of text, all smoothly scalable.

Parameters

$size: Font size for the paragraph. Default is 1rem.
$margins: Boolean, whether you'd like margins to be defined or not. Default true.

Examples

p
  paragraph()

Nullam id dolor id nibh ultricies vehicula ut id elit.

p
  paragraph: 18px false

Nullam id dolor id nibh ultricies vehicula ut id elit.

raquo()

Because technically raquo is not semantic, this mixin will add it as an :after to your element.

Examples

h3
  raquo()

Check this out

reset-case()

A shorter alias for text-transform: none. Resets any change in case that was previously set.

Examples

p
  upcase()
  reset-case()

Normal case oh yeah.

reset-link()

Removes any styles that were previously set on links, even that annoying text-decoration.

Examples

a
  reset-link()

Wow no more underline and harsh blue, amazing

reset-list()

Removes any styles that were previously set on a list, clearing out all the margins and padding that are there by default.

Examples

ul
  reset-list()

One
Two
Three

shadow-stroke($color)

Creates an outline using text-shadow. Works best on larger text. Ported from nib.

Parameters

$color: Color of the stroke. Default is blue.

Examples

h1
  shadow-stroke()

Totally

h1
  shadow-stroke(tomato)'

Outlined

small()

A nice set of default styles for the 'small' element.

Examples

small
  small()

Wow so tiny!

text-margin($size)

Puts nice visually pleasing top and bottom margins on a paragraph of text. Use a font-size on your element to have it magically adjust.

Parameters

$size: Override the existing font size with a custom one.

Examples

p
  font-size: 18px
  text-margin()

Look at these great margins

So great.

text-selection($color,$text-color)

Sets the text select color intelligently based on the highlight-color variable found in the settings file. Intended to be used at the root, for the whole document rather than at one element.

Parameters

$color: Override the highlight background with a custom color. Defaults to highlight-color.
$text-color: Override the text color. Default is black or white based on contrast detection.

Examples

text-selection()

Try selecting me!

ul($style)

Nice clean and scalable defaults for unorganized lists.

Parameters

$style: Any style that 'list-style-type' would normally take. Default is 'disc'.

Examples

ul
  ul()

One
Two
Three

ul
  ul: 'square'

One
Two
Three

uppercase()

A quicker alias for text-transform: uppercase. You can also use the alias 'upcase' to get the same effects.

Examples

h5
  uppercase()

ALL CAPS HEADING

h5
  upcase()

ANOTHER ALL CAPS HEADING

UI

A set of flexible shortcuts for creating common UI elements.

area($color)

Just a nice little area for you to put content in. Rounded corners, box with a light grey background by default.

Parameters

$color: Background color of the area. Default is #F5F5F5.

Examples

p
  area()

Hi there, I'm a nicely defined little area of content!

p
  area: #D4EEF8

I'm an area with a kind of blue-ish background.

If you put this mixin on a list, it will turn it into an inline list separated by a character, slash by default. Good for breadcrumb trails or divided lists.

Parameters

$character: The character that divides the list items. Default is '/'.
$spacing: How much space between each item. Default is 10px.
$divider-color: Color of the list item divider. Default is #CDCDCD

Examples

p
  breadcrumb()

p
  breadcrumb: '>'

One
Two
Three

p
  breadcrumb: '~' 25px red

One
Two
Three

bubble($pos0,$pos1,$color,$width,$triangle-size,$padding,$triangle-color)

Creates a bubble with a little pointer with pure css. A lot of customizable options on this one.

Parameters

$pos0: Put the triangle on the left or right side of the bubble. Default is left.
$pos1: Put the triangle on the top or bottom of the bubble. Default is bottom.
$color: Color of the bubble. Default is #EEEEEE.
$width: Width of the bubble, if you need to set a hard width.
$triangle-size: Size of the triangle pointer. Default is 10px
$padding: Padding around the contents of the bubble. Default is 10px.
$triangle-color: Color of the triangle pointer. Default is 3% darker than the color, to account for the gradient.

Examples

.bubble
  bubble()

So bubbly, wow

.bubble
  bubble: top center #57777E

So bubbly, wow

.bubble
  bubble(pos0: bottom, pos1: right, triangleSize: 15px, triangleColor: red)

So bubbly, wow

figure($color,$dimensions)

For when you want to 'semantically' show an image. Put this on your <figure/> element and it will style the nested image and figcaption in a wonderfully pleasing manner.

Parameters

$color: Color theme for the figure display. Default is blue.
$dimensions: The size of the image, if you need it. Since this is a list, you need to call with parens if you are using this parameter.

Examples

p
  figure: red

flash($type)

A notification for 'flash' alerts, generally letting the user know about something like a success or failure.

Parameters

$type: Can be "notice", "success", "warning", or "error". Default is "notice".

Examples

.flash
  flash()

Hey, something happened

.flash
  flash: 'warning'

Your computer will explode in 5 minutes

.flash
  flash: 'error'

Your computer has exploded. How are you reading this?

.flash
  flash: 'success'

You have saved your computer from certain doom!

icon-arrow($direction,$size,$color,$stroke)

Creates a clean, customizable arrow icon in pure css. Useful for navigation.

Parameters

$direction: Direction the arrow "up", "down", "left", or "right". Default is "right".
$size: Size of the icon. Default is 40px.
$color: Color of the icon. Default is #888.
$stroke: Icon line width. Default is 1px.

Examples

span
  icon-arrow()

.arrow-left
  icon-arrow(left, 20px, blue, 3px)

.arrow-down
  icon-arrow(down, 50px, blue, 7px)

icon-x($size,$color,$stroke)

Creates a clean, customizable "x" icon in pure css. Useful for close and delete interactions.

Parameters

$size: Size of the icon. Default is 40px.
$color: Color of the icon. Default is #888.
$stroke: Icon line width. Default is 1px.

Examples

span
  icon-x()

.delete
  icon-x(20px, orange, 5px)

A simple and flexible bootstrap-esque navigation bar. Requires a certain html structure: a 'h1' is the site title on the left, and a 'ul' containing 'li's which contain 'a's show the links on the right.

Parameters

$size: An integer from 1 to X, specifying an arbitrary scale. Try a couple different numbers to get what's best for you. Default is 1.
$bg-color: The color of the navigation bar's background. Default is #222.
$link-color: The color of the navigation links. Default is white.
$pos-fixed: Boolean, whether the nav bar should be fixed to the top of the window or not.

Examples

nav
  nav()

Example Site

About

notice($width,$color,$padding)

A more generic and customizable version of a flash alert. Outputs a colored box with a light gradient, fully customizable.

Parameters

$width: Hard width of the box, if you need it. No default.
$color: The base color of the box. Default is #eee
$padding: Padding between the box and content. Default is 10px.

Examples

.notice
  notice()

Hey, something happened!

.notice
  notice: 200px #D4EEF8

Look at my fancy colors!

Utilities

A grab bag of various useful mixins that don't fit into any other category.

b(arguments)

A shorter version of 'border' that also includes the intelligent default of '1px solid' if no args passed

Parameters

arguments: Same as the arguments you'd normally pass to 'border'. Default 1px solid.

Examples

.el
  b()

Check out my border

debug()

Debugging tool - adds a border to the current element, its children, grandchildren, etc so you can see what's up – great for precise layout tweaks. It will also add flags if you made mistakes like put in inline styles, forgot an alt on an image, left the alt blank, etc. Not to be used in production, obviously. View the demo.

no-select()

Makes the text in an element un-selectable. This is good for things like buttons so that a double click doesn't select the text.

Examples

.selector
  no-select()

Try to highlight me. Just try.

open-type-ligatures()

The vast majority of fonts contain lowercase and uppercase alphabets, numerals, punctuation and accents. Many professionally-designed fonts also contain ligatures, alternative characters, smallcaps, different kinds of numbers, and sometimes much more besides. This enables it.

Examples

.selector
  open-type-ligatures()

quantity-at-least($count,$selector)

Quantity query to set rules for a selector based on a minimum number of siblings. To use, set it as a block mixin on the parent element. Demo here.

Parameters

$count: Minimum number of siblings
$selector: Css selector to be used. Default is <li>.

Examples

ul
  +quantity-at-least(3, li)
     border: 1px solid red

one
two
three
four

Since there are at least 3 list items, they are colored red.

quantity-at-most($count,$selector)

Quantity query to set rules for a selector based on a maxium number of siblings. To use, set it as a block mixin on the parent element. Demo here.

Parameters

$count: Maxium number of siblings
$selector: Css selector to be used. Default is <li>.

Examples

ul
  +quantity-at-most(7)
     border: 1px solid blue

one
two
three
four

Since there are at most 7 list items, they are colored blue.

quantity-between($start,$end,$selector)

Quantity query to set rules for a selector based on a range of siblings. To use, set it as a block mixin on the parent element. Demo here.

Parameters

$start: starting number of siblings
$end: ending number of siblings
$selector: Css selector to be used. Default is <li>.

Examples

ul
  +quantity-between(1, 10, span)
     border: 1px solid green

span 1span 2span 3span 4

Since there are between 1 and 10 spans, they are colored green.

quantity-exactly($count,$selector)

Quantity query to set rules for a selector based on an exact number of siblings. To use, set it as a block mixin on the parent element. Demo here.

Parameters

$count: Exact number of siblings
$selector: Css selector to be used. Default is <li>.

Examples

ul
  +quantity-exactly(4)
     border: 1px solid orange

one
two
three
four

Since there are exactly 4 list items, they are colored orange.

rem($value)

Calculates and returns the rem value based on px input.

Parameters

$value: Number in px

Examples

h5
  font-size: rem(24px)

This font size is set to 24px but renders in the browser as 1.5rem.

div
  width: rem(150)

This div's width is set to 150px, but renders as 9.375rem.

rounded()

Round the corners of an element as much as css will allow.

Examples

.btn
  button()
  rounded()

So round

transition()

Transition with an intelligent default.

Examples

transition()

transition: all .3s ease;

transition: color 1s ease

transition(color 1s ease, background 2.4s linear)

triangle($direction,$size,$color)

Makes a customizable css triangle just for you.

Parameters

$direction: Direction the triangle points: "up", "down", "left", or "right". Default is "up".
$size: Size of the triangle in pixels. Default is 10px.
$color: Color of the triangle. Default is black.

Examples

.tri
  triangle()

.tri
  triangle: 'right' 13px lime

vertically-align()

Cross browser vertical align. Works down to IE9.

Examples

.box
  vertically-align()

Didn't think it was possible with css, did ya?

.box
  vertically-align(false)

This was previously vertically aligned, but now it is not.