Upbase - v1.0.0

variables

Type

Bool

Type

Bool

Used by

[mixin] svg

Type

Bool

Used by

[mixin] grid

Type

Bool

Used by

[mixin] grid
[mixin] svg

Type

Bool

Used by

[mixin] svg

Type

String

Used by

[mixin] svg

Type

Number[px]

Used by

[function] em
[function] rem

Type

String

Used by

[mixin] grid

functions

auto

@function auto($value) { ... }

Convert simple "a" to "auto" for shorthander mixin

Parameters

$value Value Default: —none

Checks for "a", replaces with "auto" otherwise returns value.

Example

SCSS

.item {
  @include absolute(0 a);
}

CSS Output

.item {
  position: absolute;
  top: 0;
  right: auto;
  bottom: 0;
  left: auto;
}

Used by

[mixin] shorthander

em

@function em($px-val, $base: $em-base) { ... }

Convert pixels to ems. $em-base is set by default to 16px in Upbase's settings file. Override it in a project-specific settings or variables file.

Parameters

$px-val Number Default: —none

Desired pixel equivalent

$base Number Default: $em-base

[Optional] Parent em-to-pixel value

Example

SCSS

font-size: em(12px);
font-size: em(12px, 24px);

CSS Output

font-size: 0.75em;
font-size: 0.5em;

Requires

[variable] em-base
[function] strip-units

rem

@function rem($px-val) { ... }

Convert pixels to rems. $em-base is set by default to 16px in Upbase's settings file. Override it in a project-specific settings or variables file.

Parameters

$px-val Number Default: —none

Desired pixel equivalent

Example

SCSS

font-size: rem(12px);

CSS Output

font-size: 0.75em;

Requires

[variable] em-base
[function] strip-units

Parameters

$color Color Default: —none

A hex, rgb, or hsl color value

$percent Number(%) Default: —none

The percent of black to be mixed in.

Example

Usage

.element {
  background-color: shade(#ffbb52, 60%);
}

CSS Output

.element {
  background-color: #664a20;
}

Returns

Color

strip-units

@function strip-units($number) { ... }

Removing the unit from a number and returning the raw value. It’s used as a helper in the Pixel-to-Ems and Pixel-to-Rems functions.

Parameters

$number Number Default: —none

A number value with unit

Example

SCSS

$pxval: strip-units(500px);
// $pxval: 500;

Used by

[function] em
[function] rem

TODO's

See Stack Overflow discussion and determine whether we actually really need this in our em and rem functions.

Parameters

$color Color Default: —none

A hex, rgb, or hsl color value

$percent Number(%) Default: —none

The percent of white to be mixed in.

Example

Usage

.element {
  background-color: tint(#6ecaa6, 40%);
}

CSS Output

.element {
  background-color: #a8dfc9;
}

Returns

Color

mixins

aspect-ratio

@mixin aspect-ratio($aspect-ratio: 16/9, $target: > *) { ... }

A formula for making an embedded video responsive (oftentimes, an iframe, embed, or object). Apply it to the parent container. Note: Some older players may require some additional spacing for the player controls. You can do so by adding padding-top to the parent container.

Parameters

$aspect-ratio Fraction Default: 16/9

Desired aspect ratio, such as 16/9, 4/3, etc.

$target Selector Default: > *

(Optional) Video object selector

Example

SCSS

.video-wrapper {
  @include aspect-ratio(16/9);
  //@include aspect-ratio(4/3);
  //@include aspect-ratio(2.35/1, ".video-embed");
}

CSS Output

.responsive-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  margin-bottom: 50px;
}
.responsive-video > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

center

@mixin center($axis: both, $method: flex, $dimensions: null) { ... }

Center something (both horizontally & vertically)

Parameters

$axis Direction Default: both

vertical, horizontal, or both

$method Method Default: flex

flex, absolute

$dimensions Number Default: null

width and height of outer container to be centered within to trigger legacy fallback

Example

SCSS

.container {
  position: relative;
}

.item {
  @include center();
  //@include center(vertical);
  //@include center(horizontal);
  //@include center(vertical, absolute);
  //@include center(horizontal, absolute);
  //@include center(vertical, flex, 200px 200px);
}

CSS Output

.item--both {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item--horizontal {
  display: flex;
  justify-content: center;
}

.item--vertical {
  display: flex;
  align-items: center;
}

circle

@mixin circle($size) { ... }

Make a circle. Pass its size, and this'll take care of the rest.

Parameters

$size Number Default: —none

size

Example

HTML

<div class="circle"></div>

SCSS

.circle {
  @include circle(100px);
}

CSS Output

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

clearfix

@mixin clearfix() { ... }

Force an element to self-clear its children.

Parameters

None.

Example

HTML

<section class="container">
    <div class="col-1 col">
        <!-- Content Goes Here -->
    </div> <!-- /col-1 -->
    <div class="col-2 col">
        <!-- Content Goes Here -->
    </div> <!-- /col-2 -->
</section> <!-- /container -->

SCSS

.container {
  @include clearfix();
  .col-1,
  .col-2 {
    float: left;
    width: 50%;
  }
}

CSS Output

.container:after {
  content: "";
  display: table;
  clear: both;
}

Used by

[mixin] grid

See

[mixin] unclearfix

unclearfix

@mixin unclearfix() { ... }

Remove clearfix from an element after it's been applied.

Parameters

None.

Example

SCSS

.container {
  @include clearfix();
  @include mq(320px, 768px) {
    @include unclearfix();
  }
}

CSS Output

.container:after {
  display: initial;
  clear: none;
}

See

[mixin] clearfix

ellipsis

@mixin ellipsis() { ... }

Truncate text with an ellipsis using CSS.

Parameters

None.

Example

SCSS

.txt-box {
  @include ellipsis;
  width: 100%;
}

CSS Output

.txt-box {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  width: 100%;
}

grid

@mixin grid($items: 2, $gutter: 20px, $target: $grid-target(*)) { ... }

Create a row of liquid columns of defined width, or an infinite grid of items of equal width. Apply mixin to parent container.

Parameters

$items Number or Number[%] list Default: 2

Number of equal-sized items per row, or list of widths for as many items as desired

$gutter Number[%/px] Default: 20px

Gutter between items

$target String Default: $grid-target(*)

Target items

Example

HTML

<section class="grid-3">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item">/div>
</section>

SCSS

.grid-3 {
  @include grid(3);
}

.grid-25-50-25 {
  @include grid(25% 50% 25%, 5px, ".ui-item");
}

.grid-4 {
  @include grid(4, 2.5%);
}

.grid-5-complex {
  @include grid(10% 30% 10% 40% 10%);
}

CSS Output

.grid-3 {
  margin-left: -20px;
}
.grid-3:after {
  content: "";
  display: table;
  clear: both;
}
.grid-3 > * {
  float: left;
  padding-left: 20px;
  width: 33.33333%;
}
.grid-3 > *:nth-child(1n) {
  clear: none;
}
.grid-3 > *:nth-child(3n + 1) {
  clear: both;
}

.grid-25-50-25 {
  margin-left: -5px;
}
.grid-25-50-25:after {
  content: "";
  display: table;
  clear: both;
}
.grid-25-50-25 > .ui-item:nth-child(1) {
  float: left;
  padding-left: 5px;
  width: 25%;
}
.grid-25-50-25 > .ui-item:nth-child(2) {
  float: left;
  padding-left: 5px;
  width: 50%;
}
.grid-25-50-25 > .ui-item:nth-child(3) {
  float: left;
  padding-left: 5px;
  width: 25%;
}
.grid-25-50-25 > .ui-item:nth-child(1n) {
  clear: none;
}
.grid-25-50-25 > .ui-item:nth-child(3n + 1) {
  clear: both;
}

.grid-4 {
  margin-left: -2.5%;
}
.grid-4:after {
  content: "";
  display: table;
  clear: both;
}
.grid-4 > * {
  float: left;
  padding-left: 2.5%;
  width: 25%;
}
.grid-4 > *:nth-child(1n) {
  clear: none;
}
.grid-4 > *:nth-child(4n + 1) {
  clear: both;
}

.grid-5-complex {
  margin-left: -20px;
}
.grid-5-complex:after {
  content: "";
  display: table;
  clear: both;
}
.grid-5-complex > *:nth-child(1) {
  float: left;
  padding-left: 20px;
  width: 10%;
}
.grid-5-complex > *:nth-child(2) {
  float: left;
  padding-left: 20px;
  width: 30%;
}
.grid-5-complex > *:nth-child(3) {
  float: left;
  padding-left: 20px;
  width: 10%;
}
.grid-5-complex > *:nth-child(4) {
  float: left;
  padding-left: 20px;
  width: 40%;
}
.grid-5-complex > *:nth-child(5) {
  float: left;
  padding-left: 20px;
  width: 10%;
}
.grid-5-complex > *:nth-child(1n) {
  clear: none;
}
.grid-5-complex > *:nth-child(5n + 1) {
  clear: both;
}

Requires

[mixin] clearfix
[variable] support-ie7
[variable] ie-conditional-classes
[variable] grid-target

hide

@mixin hide($accessible: true) { ... }

Hides text, but is accessible to screen readers. Best used on single element next to an element that will display. IE: title next to an icon.

Warning: Fallback has been known to mistakenly fail as invalid CSS, and might fail completely in Opera Mini with the text fallback completely obscured. General best practice in many cases, for icon/text pairs for example, is to use two elements and use appropriate hidden or invisible styles for the text.

Parameters

$accessible String Default: true

Triggers accessible clip method. Use "false" for font: 0 method.

Example

HTML

<div class="item focusable">Lorem ipsum dolor sit amet.</div>

SCSS

.item {
  @include hide();
  //@include hide(false);
}

CSS Output

.item {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.item.focusable:active, .item.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}
.item--false {
  color: transparent;
  font: 0/0 a;
  text-shadow: none;
}

margin

@mixin margin($value) { ... }

Shorthand method for applying margin while using the familiar multi-value declarations while also providing a null option to display only needed values.

Parameters

$value Number[unit] Default: —none

Takes 1-4 values, following convention of traditional CSS shorthand properties for margin, padding, etc. One notable improvement: You can use the shorthand and still leave some values blank. Do so by placing an 'n' in place of any numeral.

Example

HTML

<div class="item">Lorem ipsum dolor sit amet.</div>

SCSS

.item {
  @include margin(10px n n 10px);
}

CSS Output

.item {
  margin-top: 10px;
  margin-left: 10px;
}

Requires

[mixin] shorthander

mq-dpi

@mixin mq-dpi($dpi) { ... }

Creates a cross browser pixel density media query

Parameters

$dpi Number [dpi] Default: —none

Minimum dpi

Content

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

Example

SCSS

.class {
  font-weight: 400;
  @include mq-dpi {
    font-weight: 100;
  }
}

CSS Output

.class {
  font-weight: 400;
}
/@media (min--moz-device-pixel-ratio: 1.01042), (-o-min-device-pixel-ratio: 96dpi), (-webkit-min-device-pixel-ratio: 1.01042), (min-device-pixel-ratio: 1.01042), (min-resolution: 97dpi) {
  .class {
    font-weight: 100;
  }
}

Used by

[mixin] retina-bg

mq

@mixin mq($bp-1, $bp-2: null) { ... }

Write less verbose media queries.

Parameters

$bp-1 Number(px) Default: —none

breakpoint value, min-width if declaring range

$bp-2 Number(px) Default: null

[Optional] breakpoint value, max-width if declaring range

Content

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

Example

SCSS

.item-1 {
   @include mq(600px, 768px) {
    display: block;
  }
}

.item-2 {
  @include mq(768px) {
    display: block;
  }
}

.item-3 {
  @include mq("max", 600px) {
    display: block;
  }
}

CSS Output (Ignore the "/")

/@media (min-width: 600px) and (max-width: 767px) {
  .item-1 {
    display: block;
  }
}

/@media (min-width: 768px) {
  .item-2 {
    display: block;
  }
}

/@media (max-width: 599px) {
  .item-3 {
    display: block;
  }
}

padding

@mixin padding($value) { ... }

Shorthand method for applying padding while using the familiar multi-value declarations while also providing a null option to display only needed values.

Parameters

$value Number[unit] Default: —none

Example

HTML

<div class="item">Lorem ipsum dolor sit amet.</div>

SCSS

.item {
  @include padding(10px n n 10px);
}

CSS Output

.item {
  padding-top: 10px;
  padding-left: 10px;
}

Requires

[mixin] shorthander

absolute

@mixin absolute($value) { ... }

Shorthand method for applying absolute positioning while using the familiar multi-value declarations (20px 40px 26px) offered by CSS margin and padding.

Parameters

$value Number[unit] Default: —none

Example

HTML

<div class="item">Lorem ipsum dolor sit amet.</div>

SCSS

.item {
  @include absolute(0 0 0 0);
}

CSS Output

.item {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Requires

[mixin] shorthander

fixed

@mixin fixed($value) { ... }

Shorthand method for applying fixed positioning while using the familiar multi-value declarations (20px 40px 26px) offered by CSS margin and padding.

Parameters

$value Number[unit] Default: —none

Example

HTML

<div class="item">Lorem ipsum dolor sit amet.</div>

SCSS

.item {
  @include fixed(0 0 0 0);
}

CSS Output

.item {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Requires

[mixin] shorthander

relative

@mixin relative($value) { ... }

Shorthand method for applying relative positioning while using the familiar multi-value declarations (20px 40px 26px) offered by CSS margin and padding.

Parameters

$value Number[unit] Default: —none

Example

HTML

<div class="item">Lorem ipsum dolor sit amet.</div>

SCSS

.item {
  @include relative(0 0 0 0);
}

CSS Output

.item {
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Requires

[mixin] shorthander

pseudo

@mixin pseudo() { ... }

Make a useable object out of a pseudo element like :before or :after. You must set pseudo element to inline-block or block depending on your need.

Parameters

None.

Example

SCSS

.item:after {
  @include pseudo;
  display: inline-block; //or block
}

CSS Output

.item:after {
  content: "\0020";
  display: inline-block;
}

reset-input

@mixin reset-input() { ... }

Zero'ing out the style on an input field (text input, radio button, etc), which usually isn't reset using standard reset or base styles.

Parameters

None.

Example

HTML

<form class="upbase-neue">
  <input class="search-input" type="text" name="s" id="s" size="15" placeholder="Search">
  <button class="search-button" type="submit" value="Button">Submit</button>
</form>

SCSS

.upbase-neue .search-input,
.upbase-neue .search-button {
  @include reset-input;
}

CSS Output

.upbase-neue .search-input,
.upbase-neue .search-button {
  border: 0;
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
  -webkit-appearance: none;
  font-size: 18px;
}
.upbase-neue .search-input:focus,
.upbase-neue .search-button:focus {
  outline: 0;
}

retina-bg

@mixin retina-bg($bg-size, $image) { ... }

Serves a different background image when the user agent has a retina display

Parameters

$bg-size Size Default: —none

optional background size

$image Path Default: —none

file path

Example

SCSS

.item-1 {
  background-image: url('img/image.jpg');
  @include retina-bg(img/image--lg.jpg);
}

.item-2 {
  background-image: url('img/image2.jpg');
  @include retina-bg(img/image2--lg.jpg, cover);
}

CSS Output

.item-1 {
  background-image: url("img/image.jpg");
}
/@media (min--moz-device-pixel-ratio: 1.01042), (-o-min-device-pixel-ratio: 96dpi), (-webkit-min-device-pixel-ratio: 1.01042), (min-device-pixel-ratio: 1.01042), (min-resolution: 97dpi) {
  .item-1 {
    background-image: url("img/image--lg.jpg");
  }
}

.item-2 {
  background-image: url("img/image2.jpg");
}
/@media (min--moz-device-pixel-ratio: 1.01042), (-o-min-device-pixel-ratio: 96dpi), (-webkit-min-device-pixel-ratio: 1.01042), (min-device-pixel-ratio: 1.01042), (min-resolution: 97dpi) {
  .item-2 {
    background-image: url("img/image2--lg.jpg");
    background-size: cover;
  }
}

Requires

[mixin] mq-dpi

shorthander

@mixin shorthander($position, $value) { ... }

Shorthand method for common multi-value declarations such as absolute, padding, and margin. Can also be used as the basis to create new multi-value declarations that we haven't conceived.

Parameters

$position String Default: —none

Takes name of attribute: margin, padding, absolute, fixed, relative, static.

$value Number[unit] Default: —none

Example

HTML

<div class="item">Lorem ipsum dolor sit amet.</div>

SCSS

.item {
  @include absolute(0 0 0 0);
  //@include relative(0 0 0 0);
  //@include fixed(0 0 0 0);
  //@include padding(0 0 0 0);
  //@include margin(0 0 0 0);
}

CSS Output

.item {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Requires

[function] auto

Used by

[mixin] margin
[mixin] padding
[mixin] absolute
[mixin] fixed
[mixin] relative

size

@mixin size($width, $height) { ... }

Sets the width and height of the element.

Parameters

$width Number [unit] Default: —none

Width (or height and width if $height is not declared)

$height Number [unit] Default: —none

Height

Example

Usage

.box-1 {
  @include size(100px, 150px);
}

.box-2 {
  @include size(200px);
}

CSS Output

.box-1 {
  width: 100px;
  height: 150px;
}

.box-2 {
  width: 200px;
  height: 200px;
}

svg

@mixin svg($bg-name, $bg-position: 50% 50%, $bg-color: transparent, $bg-size: 100%) { ... }

Use SVGs as background images with the proper PNG fallbacks. You'll need to set the display (inline-block or block) and a height/width for the container. Also, before using, set a default image path if you wish by overriding the empty $default-img-path variable in your project's settings or variables file.

For full support, produce your graphic with highest resolution in mind, and export:

A responsive-ready SVG named {file-name}.svg
A highest-resolution PNG named {file-name}.png
A 1x-resolution PNG named {file-name}-ie.png

Parameters

$bg-name String Default: —none

Name of the image file without extension. Include a path if you have not set a default $img-path variable or if you want to use a unique path.

$bg-position X y [px] Default: 50% 50%

background-position

$bg-color String Default: transparent

background-color

$bg-size String Default: 100%

background size

Example

SCSS

//In your project's settings or variables file
$default-img-path: "http://www.thetrace.org/wp-content/themes/thetrace/static/img/icons/";

.basic {
  @include svg(envelope);
  //Defaults to...
  //@include svg(envelope, 50% 50%, transparent, 100%);
}

.awesome {
  @include svg(envelope, 50% 50%, #bada55, 36px auto);
}

.moreawesome {
  @include svg(envelope, 50% 50%, #bada55, cover);
}

CSS Output

.moreawesome {
  background-image: url("http://www.thetrace.org/wp-content/themes/thetrace/static/img/icons/envelope.png");
  background-image: url("http://www.thetrace.org/wp-content/themes/thetrace/static/img/icons/envelope.svg"), none;
  background-color: #bada55;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.no-svg .moreawesome {
  background-image: url("http://www.thetrace.org/wp-content/themes/thetrace/static/img/icons/envelope.png");
}
.ie8 .moreawesome {
  background-image: url("http://www.thetrace.org/wp-content/themes/thetrace/static/img/icons/envelope-ie.png");
}

Requires

[variable] ie-conditional-classes
[variable] default-img-path
[variable] support-ie8
[variable] using-modernizr

triangle

@mixin triangle($size, $color, $direction) { ... }

Creates a triangle with just CSS.

Parameters

$size Number(px) Default: —none

One or two values: width height

$color Color or List Default: —none

One or two color values: foreground background

$direction String Default: —none

A direction: up, down, left, right, up-right, up-left, down-right, down-left

Example

SCSS

.triangle {
  @include triangle(100px, #bada55, down);
}

.triangle--complex {
  @include triangle(100px 50px, #bada55 #000000, up-left);
}

CSS Output

.triangle {
  height: 0;
  width: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 50px solid #bada55;
}

.triangle--complex {
  height: 0;
  width: 0;
  border-top: 50px solid #bada55;
  border-right: 100px solid #000000;
}

variables

Type

Type

Used by

Type

Used by

Type

Used by

Links

Type

Used by

Type

Used by

Type

Used by

Type

Used by

functions

Parameters

Example

Used by

Links

Parameters

Example

Requires

Links

Parameters

Example

Requires

Links

Parameters

Example

Returns

Parameters

Example

Used by

TODO's

Links

Parameters

Example

Returns

mixins

Parameters

Example

Links

Parameters

Example

Links

Parameters

Example

Links

Parameters

Example

Used by

See

Parameters

Example

See

Parameters

Example

Links

Parameters

Example

Requires

Links

Parameters

Example

Links

Parameters

Example

Requires

Links

Parameters

Content

Example

Used by

Links

Parameters

Content

Example