variables

support-ie9

$support-ie9: true !default;

Support IE9

Type

Bool

support-ie8

$support-ie8: true !default;

Support IE8

Type

Bool

Used by

support-ie7

$support-ie7: false !default;

Support IE7

Type

Bool

Used by

ie-conditional-classes

$ie-conditional-classes: true !default;

Use IE Conditional Classes

using-modernizr

$using-modernizr: true !default;

Use Modernizr Helpers

Type

Bool

Used by

default-img-path

$default-img-path: "" !default;

Image Folder

Type

String

Used by

em-base

$em-base: 16px !default;

Base value of em in pixels

Type

Number[px]

Used by

  • [function] em
  • [function] rem

grid-target

$grid-target: "*" !default;

CSS Target for grid() mixin

Type

String

Used by

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

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;

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;

shade

@function shade($color, $percent) { ... }

Mix a color with black.

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.

tint

@function tint($color, $percent) { ... }

Mix a color with white.

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

See

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

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

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

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

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

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 padding(10px n n 10px);
}

CSS Output

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

Requires

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

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 absolute(0 0 0 0);
}

CSS Output

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

Requires

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

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 fixed(0 0 0 0);
}

CSS Output

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

Requires

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

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 relative(0 0 0 0);
}

CSS Output

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

Requires

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

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

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 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

Used by

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");
}

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;
}