You can either download a copy of the source files or install via NPM.
npm install rocket-propel
SASS Implementation
Start by importing the necessary file into your own SASS file and include the required mixins.
SASS
@import"rocket-propel/build/sass/import";
.example{
@includerow();
.left, .middle, .right{
@includespan(12); // 100% width
}
@includebreakpoint($bp-large){
.left{
@includespan-new(6); // 50% width
}
.middle{
@includespan-new(4); // 33.33% width
}
.right{
@includespan-new(2); // 16.66% width
}
}
}
HTML
<divclass="example">
<divclass="left"></div>
<divclass="middle"></div>
<divclass="right"></div>
</div>
Browser Prefixes
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.
@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: $limit-width
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: $column-limit
Push an element out x amount of columns from the left.
offset-right(x, y)
y: $column-limit
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: $column-limit
Span an element x amount of columns within the z total. See and example below.
span-new(x, y)
y: $column-limit
Apply a new span amount of x to an element.
<divclass="container">
<divclass="left">Left Column</div>
<divclass="right">Right Column</div>
</div>
.container{
@includerow();
.left,
.right{
@includespan(12); // Span of 12 is a width of 100% (12/12).
}
// Change the layout at the large breakpoint
@includebreakpoint($bp-large){
.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.
Alternatively you can also build the SASS out if you wish to include all your CSS in one production file. See an example below.
@import"rocket-propel/build/sass/import";
@includerocket-propel-css;
Now class your HTML to manage your layout. For example:
<divclass="_row">
<divclass="_span-2">Span 2</div>
<divclass="_span-2">Span 2</div>
<divclass="_span-2">Span 2</div>
<divclass="_span-2">Span 2</div>
<divclass="_span-2">Span 2</div>
<divclass="_span-2">Span 2</div>
</div>
Classes as Modifiers
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.
<divclass="_center">
<divclass="_float-r">One</div>
<divclass="_float-r">Two</div>
</div>
Layout Responsive
Class
Options
Description
._row
Set the element to a row. Used on responsive containers
._span-[i]
[i]: 1 to 12
Set width of an element within a row. The spans are base 12.
._span-large-[i]
[i]: 1 to 12
Set width of an element within a row at the large breakpoint.
._span-small-[i]
[i]: 1 to 12
Set width of an element within a row at the small breakpoint.
._limit
Limit an elements width to 68.750em (default) and center.
._offset-[i]
[i]: 1 to 12
Offset from the left by span [i]. The spans are base 12.
._offset-right-[i]
[i]: 1 to 12
Offset from the right by span [i].
._offset-large-[i]
[i]: 1 to 12
Offset from the left by span [i] at the large breakpoint.
._offset-large-right-[i]
[i]: 1 to 12
Offset from the right by span [i] at the large breakpoint.
._offset-small-[i]
[i]: 1 to 12
Offset from the left by span of [i] at the small breakpoint.
._offset-small-right-[i]
[i]: 1 to 12
Offset from the right by span of [i] at the small breakpoint.
Add [x] amount of margin to the [s] side of an element.
._mgn-none
Remove all margins from an element.
._pad-[x]
[x]: 1 to 10
Add [x] amount of padding all around.
._pad-[s]-[x]
[s]: trbl [x]: 1 to 10
Add [x] amount of padding to the [s] side of an element.
._pad-none
Remove all padding from an element.
._spacing-none
Remove all padding and margins from an element.
<divclass="_pad-t-10">Padding top of 10 pixels</div>
<divclass="_mgn-right-10">Margin right of 8 pixels</div>
Text
Class
Options
Description
._txt-hide
Hide the text within an element.
._txt-[x]
[x]: lcr
Set the text alignment to [x]. [x] is for left, center, right.
._txt-size-[x]
[x]: x2sxssmnlxlx2l
Set the font size to [x].
._txt-weight-[x]
[x]: xllnbxb
Set the font weight to [x].
._txt-light
Set the font weight to light.
._txt-bold
Set the font weight to bold.
._txt-normal
Set the font weight and style to normal.
._txt-italics
Set the font style to italics.
._txt-oblique
Set the font style to oblique.
._txt-white
Set the font colour to white.
._txt-grey
Set the font colour to medium grey.
<divclass="_txt-weight-xl">Very light text.</div>
<divclass="_txt-r">Text aligned right.</div>
Blueplate Deprecated
The original library, Blueplate, has been deprecated. The entire Webplate project is being refactored and rebranded with a new development philosophy. Blueplate will be maintained only with bug fixes under the blueplate branch.
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.