variables
functions
auto
@function auto($value) { ... }
Convert simple "a" to "auto" for shorthander mixin
Parameters
$value
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
Links
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
Desired pixel equivalent
$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
Desired pixel equivalent
Example
SCSS
font-size: rem(12px);
CSS Output
font-size: 0.75em;
Requires
- [variable]
em-base
- [function]
strip-units
shade
@function shade($color, $percent) { ... }
Mix a color with black.
Parameters
$color
A hex, rgb, or hsl color value
$percent
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
A number value with unit
Example
SCSS
$pxval: strip-units(500px);
// $pxval: 500;
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
A hex, rgb, or hsl color value
$percent
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
Desired aspect ratio, such as 16/9, 4/3, etc.
$target
(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%;
}
Links
center
@mixin center($axis: both, $method: flex, $dimensions: null) { ... }
Center something (both horizontally & vertically)
Parameters
$axis
vertical, horizontal, or both
$method
flex, absolute
$dimensions
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
size
Example
HTML
<div class="circle"></div>
SCSS
.circle {
@include circle(100px);
}
CSS Output
.circle {
width: 100px;
height: 100px;
border-radius: 50px;
}
Links
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%;
}
Links
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 of equal-sized items per row, or list of widths for as many items as desired
$gutter
Gutter between items
$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
Links
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
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
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
Links
mq-dpi
@mixin mq-dpi($dpi) { ... }
Creates a cross browser pixel density media query
Parameters
$dpi
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
Links
mq
@mixin mq($bp-1, $bp-2: null) { ... }
Write less verbose media queries.
Parameters
$bp-1
breakpoint value, min-width if declaring range
$bp-2
[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;
}
}
Links
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
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
- [mixin]
shorthander
Links
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
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
- [mixin]
shorthander
Links
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
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
- [mixin]
shorthander
Links
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
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
- [mixin]
shorthander
Links
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;
}
Links
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;
}
Links
retina-bg
@mixin retina-bg($bg-size, $image) { ... }
Serves a different background image when the user agent has a retina display
Parameters
$bg-size
optional background size
$image
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
Links
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
Takes name of attribute: margin, padding, absolute, fixed, relative, static.
$value
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;
}
size
@mixin size($width, $height) { ... }
Sets the width
and height
of the element.
Parameters
$width
Width (or height and width if $height is not declared)
$height
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;
}
Links
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
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
background-position
$bg-color
background-color
$bg-size
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
One or two values: width height
$color
One or two color values: foreground background
$direction
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;
}