o-

pronounced "Oh Dash"

A collection of functions, mixins, and placeholders for sass

Install

via npm

npm install o- --save-dev

or through bower

bower install o-dash --save

Usage

Import o- into your sass/scss

@import 'node_modules/o-';

As of node-sass >= v3.0.0, js functions can be registered at configuration time, which is needed for o-md-color and o-closest-md-color functions. You will need node-sass, gulp-sass, or grunt-sass depending on your build setup.

Grunt:

// ...
sass: {
  options: {
    functions: require('o-')
  },
  build: {
    files: {
      'style.css': 'style.scss'
    }
  }
}
// ...

Gulp:

// ...
gulp.task('sass', () => {
  return gulp.src('style.scss')
    .pipe(sass({
      functions: require('o-')
    }))
    .pipe(gulp.src('style.css'))
})
// ...

Node:

// ...
sass.render({
  data: `
    body {
      color: o-closest-md-color(o-random-color())
    }
  `,
  functions: require('o-')
}, (err, result) => {/*...*/})
// ...

API

You can refer to the documentation online at lokua.github.io/o-, or internally by opening doc/index.html.

Dev

NODE_ENV=development && npm install

If adding a new file, run npm run gen afterword to repopulate the lib/_index.scss imports file.

Documentation is generated with the much awesome sassdoc. npm run doc

License

MIT

color

functions

o-gray (aliased as o-grey )

@function o-gray($value: 50, $alpha: 1) { ... }

Description

Create a grayscale color range 0-100 with optional alpha value

Parameters

NameDescriptionTypeDefault value
$value

range [0, 100]

Number50
$alpha

range [0, 1]

Number1

Returns

Color —

rgba color

Used by

Links

o-random-color (aliased as o-rand-color )

@function o-random-color($alpha: false) { ... }

Description

Get a random rgb[a] color

Parameters

NameDescriptionTypeDefault value
$alpha

if true, randomize the alpha value in addition to the rgb

Booleanfalse

Returns

Color —

rgb or rgba if $alpha is true

Used by

o-md-color

@function o-md-color($color, $shade: 500) { ... }

Description

Material design colors accessor.

Note:

this function requires registration of o- with node-sass:options.functions

Parameters

NameDescriptionTypeDefault value
$color

The material design color name (must be wrapped in quotes)

String—
$shade—Number500

o-closest-md-color

@function o-closest-md-color($color) { ... }

Description

Find the material design color that is closest to $color

Note:

this function requires registration of o- with node-sass:options.functions

Parameters

NameDescriptionTypeDefault value
$color

Any valid SassColor

Color—

form

mixins

o-checkbox

@mixin o-checkbox($class: checkbox, $size: 18px, $color: #222, $background: #ddd, $border: 2px solid lighten($color, 10%), $border-radius: 0) { ... }

Description

Custom checkbox factory. Customizations not available through parametes can be applied to the label element child of classname $class as follows:

  • Using the mixins defaults, the colors and appearence of the checkbox can be targeted via .checkbox label.
  • For the checkmark itself, target .checkbox input:checked + label:after

See the example for required markup:

Parameters

NameDescriptionTypeDefault value
$class

the classname for your checkbox container

Numbercheckbox
$size—Number18px
$color—Number#222
$background—Number#ddd
$border—Number2px solid lighten($color, 10%)
$border-radius—Number0

Example

<div class="checkbox">
  <input type="checkbox" checked>
  <label></label>
</div>

Links

o-radio

@mixin o-radio($class: checkbox, $size: 18px, $color: #222, $background: #ddd, $border: 2px solid lighten($color, 10%)) { ... }

Description

Custom radio factory. Customizations not available through parameters can be applied to the label element child of classname $class as follows:

  • Using the mixins defaults, the colors and appearence of the radio can be targeted via .radio label.
  • For the bullet inside the radio, target .radio input:radio + label:after

See the example for required markup:

Parameters

NameDescriptionTypeDefault value
$class

the classname for your checkbox container

Numbercheckbox
$size—Number18px
$color—Number#222
$background—Number#ddd
$border—Number2px solid lighten($color, 10%)

Example

<div class="radio">
  <input type="radio" name="a"/>
  <label></label>
</div>
<div class="radio">
  <input type="radio" name="a"/>
  <label></label>
</div>

Links

o-range (aliased as o-input-range )

@mixin o-range($track-color: #aaa, $knob-color: #444, $rounded: false) { ... }

Description

Cross-browser css input[type=range], implemented as a mixin to enable coloring of the track and thumb, as well as rounded or square thumb option.

Parameters

NameDescriptionTypeDefault value
$track-color—Number#aaa
$knob-color—Number#444
$rounded—Boolfalse

Links

grid

variables

o-auto-break

$o-auto-break: true;

Description

If true, %o-col-* placeholders will expand to 100% width on screens smaller than $o-break-at

Type

{bool}

See

o-break-at

$o-break-at: 768px;

Description

If $o-auto-break is true, sets the breakpoint at which screens smaller than will force all grid placeholders to assume full width

Type

{number}

placeholders

o-grid

%o-grid { ... }

Description

Generic grid container

Requires

Used by

mixins

o-span

@mixin o-span() { ... }

Description

Dynamically add $cols number of columns to an element. Assumes a 12 column grid with no gutters.

Parameters

None.

o-generate-grid-classes

@mixin o-generate-grid-classes() { ... }

Description

Use this mixin if you'd prefer to generate static bootstrap-style .o-grid and o-col-* (.o-col-1 through .o-col-12) classes.

Parameters

None.

Requires

General

placeholders

o-clearfix

%o-clearfix { ... }

Description

modern clearfix

Used by

o-nopaque

%o-nopaque { ... }

Description

"no opacity" - you can't see me

See

o-opaque

%o-opaque { ... }

Description

Maximum opacity

See

o-v-center-child

%o-v-center-child { ... }

Description

Vertically center an element that is a direct descendent of an element that extends %o-v-center-parent.

See

Links

o-v-center-parent

%o-v-center-parent { ... }

Description

Container for vertically centering child elements. To comply, child elements must have vertical-align: middle; or you can simply @extend %o-v-center-child. Note that %o-center-parent also has vertical-align: middle, so parents can be nested.

See

Links

mixins

o-input-range (alias for o-range)

Deprecated!

Keeping for backwards compatibility. Use o-range instead

@mixin o-input-range() { ... }

Refer to o-range.

o-border-box

@mixin o-border-box() { ... }

Description

Paul Irish box-sizing:border-box for errthang

Parameters

None.

o-box-shadow (aliased as o-minimal-box-shadow )

@mixin o-box-shadow($color: rgba(#000, 0.25)) { ... }

Description

Opinionated minimal box shadow

Parameters

NameDescriptionTypeDefault value
$color—Colorrgba(#000, 0.25)

o-minimal-box-shadow (alias for o-box-shadow)

Deprecated!

Keeping for backwards compatibility. Use o-box-shadow instead

@mixin o-minimal-box-shadow() { ... }

Refer to o-box-shadow.

o-center

@mixin o-center($top: 0, $bottom: $top) { ... }

Description

Symantic shorthand for margin: 0 auto

Parameters

NameDescriptionTypeDefault value
$top—Number0
$bottom—Number$top

o-ellipsis

@mixin o-ellipsis() { ... }

Description

Truncate text with an ellipsis (...). Works best on elements with a determined height (not auto or 100%)

Parameters

None.

o-emboss

@mixin o-emboss($radius: 0, $top-opacity: 0.3, $bottom-opacity: 0.25, $bg-opacity: 0.2) { ... }

Description

Provide an inset look to an element

Parameters

NameDescriptionTypeDefault value
$radius—Number0
$top-opacity—Number0.3
$bottom-opacity—Number0.25
$bg-opacity—Number0.2

o-horizontal-list (aliased as o-hlist )

@mixin o-horizontal-list() { ... }

Description

Bare bones horizontal list. Note that this mixin is meant to be placed directly under a ul|ol or class placed directly on a ul|ol

Parameters

None.

o-hlist (alias for o-horizontal-list)

@mixin o-hlist() { ... }

Refer to o-horizontal-list.

o-list-unstyled

@mixin o-list-unstyled() { ... }

Description

Barebones unstyled list

Parameters

None.

o-unstyled-list

@mixin o-unstyled-list() { ... }

Description

alias o-list-unstyled

Parameters

None.

o-media

@mixin o-media($media) { ... }

Description

Basic media support

Parameters

NameDescriptionTypeDefault value
$media

Either (small|sm|s), (medium|md|m), or (large|lg|l)

String—

Content

This mixin allows extra content to be passed (through the @content directive).

Requires

Used by

o-trickle

@mixin o-trickle() { ... }

Description

"Trickle Down" media query helper. Equivalent of calling o-media(medium) and o-media(small) with the exact same content (ensure medium styles cascade downward).

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive).

Requires

o-size

@mixin o-size($width: 100%, $height: $width) { ... }

Description

Set width and height in one line. If height is unspecified, height will be set to the same value as $width (effectively making this a "square" function)

Parameters

NameDescriptionTypeDefault value
$width—Number100%
$height—Number$width

o-square

@mixin o-square($size) { ... }

Description

Symantic alias for o-size with only one argument

Parameters

NameDescriptionTypeDefault value
$size

single value for both width and height

Number—

o-underline-on-hover (aliased as o-underline-text-on-hover )

@mixin o-underline-on-hover($color: #000, $speed: 0.3s) { ... }

Description

Animated underline most suitable for text. If using with an a element, be sure to set text-decoration: none on the element as well its :hover state

Parameters

NameDescriptionTypeDefault value
$color—Color#000
$speed—Number0.3s

o-underline-text-on-hover (alias for o-underline-on-hover)

Deprecated!

Keeping for backwards compatibility. Use o-underline-on-hover instead

@mixin o-underline-text-on-hover() { ... }

Refer to o-underline-on-hover.

functions

o-as-percent

@function o-as-percent($number) { ... }

Description

Simply append a % symbol to a unit (does not perform decimal conversion)

Parameters

NameDescriptionTypeDefault value
$number—Number—

Returns

Number —

$number + %

Requires

o-golden-ratio (aliased as o-golden )

@function o-golden-ratio($number: 100, $scale: 1) { ... }

Description

Get the golden ratio of $number recursively scaled $scale times. A scale setting of less then 1 will return the smaller portion.

Parameters

NameDescriptionTypeDefault value
$number—Number100
$scale—Number1

Returns

Number —

The golden A as to $number, or C as to $number if $scale is < 0

Example

o-golden-ratio(30,  1) //=> 48.54102
o-golden-ratio(30,  2) //=> 78.54102
o-golden-ratio(30, -1) //=> 18.54102
o-golden-ratio(30, -2) //=> 11.45898

Requires

Used by

Links

o-golden (alias for o-golden-ratio)

@function o-golden() { ... }

Refer to o-golden-ratio.

o-grey (alias for o-gray)

@function o-grey() { ... }

Refer to o-gray.

o-rand-color (alias for o-random-color)

@function o-rand-color() { ... }

Refer to o-random-color.

o-strip-unit (aliased as o-strip )

@function o-strip-unit($number) { ... }

Description

Strip unit from $number

Parameters

NameDescriptionTypeDefault value
$number—Number—

Returns

Number

Used by

o-strip (alias for o-strip-unit)

@function o-strip() { ... }

Refer to o-strip-unit.

variables

o-phi

$o-phi: 1.618034;

Type

{number}

Used by

o-break-small

$o-break-small: 720px;

Description

Governs the max screen size for small media

Type

{number}

Used by

o-break-large

$o-break-large: 960px;

Description

Governs the max screen size for large media

Type

{number}

Used by