Propel will apply all the necessary browser prefixes where needed but no longer supports the -o- prefix for older versions of Opera. Opera now uses the Blink engine from Chromium (Read More).
Find the other available mixins below:
Variables
Propel comes pre-packaged with a host of SASS variables. They are all listed below.
Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace
$openSans
'Open Sans', Helvetica, Arial, sans-serif
$roboto
'Roboto', 'Helvetic Neue', Helvetica, Arial
$tahoma
Tahoma, Geneva, sans-serif
$timesNewRoman
"Times New Roman", Times, serif
$trebuchet
"Trebuchet MS", Helvetica, sans-serif
$verdana
Verdana, Geneva, sans-serif
Text Size
The size evaluates to an em value and then down to a pixel value.
Variable
Evaluates To
$sizeSmall
14px
$sizeBase
16px
$sizeMedium
18px
$sizeLarge
24px
Text Weight
Variable
Value
$weightThin
100
$weightLight
300
$weightBase
400
$weightBold
700
$weightHeavy
900
Animation
Mixin
Defaults
Description
animate(attr, speed)
speed: 0.2s
Set the transition style of attribute attr.
animate-none()
Remove all transition styles for an element.
animate-timing-function(timing)
Set the transition timing function for an element.
animation(n, dur, i, dir, f)
dur: 0.4s i: false dir: false f: false
Set all the animation properties. n = name dur = duration i = iteration dir = direction f = fill mode
animation-delay(x)
Set the animation delay property to x.
animation-direction(x)
x: normal
Set the animation direction property.
animation-duration(x)
Set the animation duration property to x.
animation-fill-mode(x)
x: forwards
Set the animation fill mode property.
animation-iteration(x)
Set the animation iteration x property.
animation-name(x)
Set the animation name property.
animation-timing-function(x)
x: ease-out
Set the animation timing function property.
keyframes(x)
Generate the animation keyframes with name x.
// Animate block on hover.block {
@includeposition(absolute, top10pxleft10px);
@includeheight(50px);
@includewidth(50px);
@includebackground-colour($red);
@includeanimate('all', 1s); // Here we attach the animation styles&:hover {
@includeposition-set(top20pxleft20px);
}
}
Arrow
Mixin
Defaults
Description
arrow(pos, clr, size)
pos: bottom clr: $white size: 20px
Attach a CSS arrow to an element.
arrow-colour(pos, clr)
pos: bottom clr: $white
Change the colour of an elements CSS arrow.
arrow-none(clr)
clr: $white
Remove an elements CSS arrow Reset the background colour.
Background
Mixin
Defaults
Description
background-attachment(x)
x: scroll
Set the background attachment property to x.
background-clip(x)
x: border-box
Set the background clip property to x.
background-colour(x)
Set the background colour to x.
background-contain()
Set the background size to contain and center position.
background-cover()
Set the background size to cover and center position.
background-origin(x)
x: padding-box
Set the background origin property to x.
background-position(x)
x: center
Set the background position property to x.
background-repeat(x)
x: repeat
Set the background repeat property to x.
background-size(x)
x: auto
Set the background size property to x.
background-single()
Set the background position to center Stop the background from repeating.
Background Images
Mixin
Defaults
Description
background-image(url, pos)
pos: top left
Set the background image on an element.
background-image-contain(url, pos)
pos: center
Set a contained background image on an element.
background-image-cover(url, pos)
pos: center
Set a covered background image on an element.
background-image-parallax(url)
Set a parallax style background image on an element.
background-image-single(url, pos)
pos: center
Set a single background image on an element.
// Set the background.my-element {
@includebackground-image-cover("global/background.png");
}
Borders
Set the border property of an element.
Mixin
Defaults
border(clr, size, type)
clr: $grey size: 1px type: solid
border-[s](clr, size, type)
[s]: trbl clr: $grey size: 1px type: solid
border-horizontal(clr, size, type)
clr: $grey size: 1px type: solid
border-vertical(clr, size, type)
clr: $grey size: 1px type: solid
border-none()
.my-element {
@includeborder-left($red, 2px);
}
Border Radius
Set the border radius property on an element.
Mixin
Options & Defaults
border-radius(x)
x: 2px
border-radius-[s](x)
[s]: trbltltrblbr x: 2px
border-radius-none()
.my-element {
@includeborder-radius-tr(4px); // This add a border radius to the top right corner.
}
Display
Mixin
Defaults
Description
hide()
Hide an element.
hide-visually()
Hide an element but still make it accessible to the DOM. Used for instances where accessibility is needed.
show(x)
x: block
Show an element with display type of x.
opacity(int)
int: 0.60
Set the opacity of an element.
overflow(x, direction)
x: visible direction: false
Set the overflow of an element. direction is optional and can be vertical or horizontal.
perspective(x)
x: 0px
Set the perspective of an element.
transparency(int)
int: 0.60
Set the transparency of an element. You can also use the opacity mixin as an alternative.
visibility(x)
x: visible
Set the visibility property of an element.
Drop Shadow
Mixin
Defaults
Description
drop-shadow(clr, size, v, h)
clr: fade-out(#000, 0.6) size: 3px v: 0px h: 0px
Set the drop shadow of an element. v is the vertical offset. h is the horizontal offset.
drop-shadow-inset(clr, size, v, h)
clr: fade-out(#000, 0.6) size: 3px v: 0px h: 0px
Set an inset drop shadow of an element. v is the vertical offset. h is the horizontal offset.
drop-shadow-none()
Remove any drop shadow.
.my-element {
@includedrop-shadow($green);
}
Global Setup
Mixin
Description
global-setup()
Apply the border-box property to all elements to contain dimensions. Set the default colour to a lighter, more readable black, the background colour to white and the default font to Open Sans with an Arial and Helvetica fallback. Note that this setup is automatically called by Rocket already.
Gradient
Note that the arguments x and y are the starting and ending gradient colours.
Mixin
Defaults
Description
gradient-animate(x, y, angle)
angle: 135deg
Apply animated background gradient.
gradient-animate-horizontal(x, y)
Apply animated background gradient from left to right.
gradient-animate-vertical(x, y)
Apply animated background gradient from top to bottom.
gradient-animate-none()
Remove any animated background gradient.
gradient-angle(x, y, angle)
angle: -45deg
Apply background gradient.
gradient-horizontal(x, y)
Apply background gradient from left to right.
gradient-vertical(x, y)
Apply background gradient from top to bottom.
gradient-none()
Remove any background gradient.
Interaction
Mixin
Defaults
Description
cursor(x)
x: auto
Set the cursor to x.
iOS
Mixin
Description
ios-render()
Set some special properties like Webkit's backface visibility and perspective property to help with rendering elements like images.
Layout
Mixin
Defaults
Description
box-sizing(x)
x: content-box
Set the box sizing style of an element.
center()
Center an element within its container.
center-vertical()
Center an element vertically within its container.
clearfix()
Clear the zoom and set the clear style to both for the element.
level(int)
int: 1
Set the z-index of an element to int. You can also use the z-index mixin as an alternative.
Set the align content property of a flex element. x can be flex-start, flex-end, center, space-between, space-around or stretch.
align-items(x)
x: flex-start
Set the align items property of a flex element. x can be flex-start, flex-end, center, space-between, space-around or stretch.
align-self(x)
x: auto
Set the align self property of a flex element. x can be flex-start, flex-end, center, space-between, space-around or stretch.
flex(grow, shrink, basis)
grow: 0 shrink: 1 basis: auto
Set the all the flex properties for a flex item.
flex-basis(x)
basis: auto
Set the flex basis property for a flex item.
flex-direction(x)
x: row
Set the flex direction property of a flex element. x can be row, row-reverse, column or column-reverse.
flex-display(x)
x: normal
Set the flex display property of a flex element.
flex-flow(x, y)
Set the flex direction and wrap properties of a flex element. x is direction. y is wrap.
flex-grow(x)
x: 0
Set the flex grow property of a flex element.
flex-shrink(x)
x: 1
Set the flex shrink property of a flex element.
flex-wrap(x)
x: nowrap
Set the flex wrap property of a flex element. x can be nowrap, wrap or wrap-reverse.
justify-content(x)
x: flex-start
Set the justify content property of a flex element. x can be flex-start, flex-end, center, space-between or space-around.
order(int)
int: 0
Set the flex order property for a flex item.
Layout Floats
Mixin
Description
float(x)
Set the float of an element to x.
float-clear()
Clear the float of an element.
float-none()
Set the float of an element to none.
Layout Responsive
Mixin
Defaults
Description
breakpoint(x, y, z)
y: false z: false
Generate a media query based on a Rocket preset or a value. x: large, small or an em/px value. y: Breakpoint type of min or max z: breakpoint orientation.
breakpoint-vertical(x, y, z)
y: false z: false
The same as breakpoint except it activates vertically.
limit(x)
x: $limitWidth
Assigns a maximum width to an element and centers it. Anything below the limit will become fluid. Used mainly to contain row elements.
offset(x, y)
y: $columnLimit
Push an element out x amount of columns from the left.
offset-right(x, y)
y: $columnLimit
Push an element x amount of columns from the right.
row()
Turns an element into a row. Row is needed to wrap any span elements. A row element will default to a 100% width of its container.
span(x, y)
y: $columnLimit
Span an element x amount of columns within the z total. See and example below.
.container {
@includerow();
.left,
.right {
@includespan(12); // Span of 12 is a width of 100% (12/12).
}
// Change the layout at the large breakpoint@includebreakpoint ($bpLarge) {
.left {
@includespan-new(3); // Span of 3 is a width of 25% (3/12).
}
.right {
@includespan-new(9); // Span of 9 is a width of 75% (9/12).
}
}
}
List
Mixin
Defaults
Description
list-style(x)
x: disc outside none
Set the list style.
list-style-image(url)
Set the list style image.
list-style-position(x)
x: outside
Set the list style position.
list-style-type(x)
x: disc
Set the list style type.
Position
Mixin
Defaults
Description
position(x, opt)
x: relative
Set the position of an element to x. opt is optional. opt can include top, right, bottom, left, margin-top, margin-right, margin-bottom and margin-left.
position-set(opt)
opt can include top, right, bottom, left, margin-top, margin-right, margin-bottom and margin-left.
Because all classes are declared on the DOM elements themselves, Propel sees them as global modifiers and such uses the _ prefix to reflect this. In the case of modules the module name would prefix the modifier but that only happens with extensions to Rocket Propel.
Find the other available classes below:
Background
Class
Options
Description
._back-pos-[x]
[x]: top, right, bottom, left, center
Set the background position of an element. [x] is for top, right, bottom, left or center.
._back-repeat-[x]
[x]: noyx
Set the background repeat of an element. [x] is for repeat no, along the Y axis or along the X axis.
._back-single
Set the background of element to no repeat and centered.
._back-contain
Set the background of element to no repeat and contain.
._back-cover
Set the background of element to no repeat and cover.
._back-black
Set the background colour to black.
._back-grey
Set the background colour to medium grey.
._back-grey-light
Set the background colour to light grey.
._back-white
Set the background colour to white.
Display
Class
Options
Description
._hide
Hide an element.
._hide-visually
Hide an element visually. It will still register as on the page.
._hide-large
Hide an element in large view only.
._hide-small
Hide an element in small view only.
._show
Show an element.
._show-large
Show an element in large view only.
._show-small
Show an element in small view only.
._transparency-[x]
[x]: 1007550250
Set the opacity of an element. [x] is for 100%, 75%, 50%, 25% or 0%.
Global
Class
Options
._propel
Apply some global styles to the HTML element of your page.
Layout
Class
Options
Description
._center
Center an element.
._float-[x]
[x]: lr
Set the float property of an element to left or right.
._float-none
Remove the float property from an element.
._float-clear
Stop all floating elements from affecting any element following.
._valign-[x]
[x]: tmb
Set the vertical alignment of an element to top, middle or bottom.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
The Tidelift Subscription provides access to a continuously curated stream of human-researched and maintainer-verified data on open source packages and their licenses, releases, vulnerabilities, and development practices.