pixture_reloaded-8.x-3.x-dev/pixture_reloaded.shortcodes.yml
pixture_reloaded.shortcodes.yml
textalign:
name: 'Text Align'
description: ''
classes:
text_align_center:
class: ta-center
description: 'Align text centered.'
text_align_left:
class: ta-left
description: 'Align text left.'
text_align_right:
class: ta-right
description: 'Align text right.'
text_align_justify:
class: ta-justify
description: 'Align text justified.'
position:
name: Positioning
description: 'Float elements left or right. Do not use on Page rows or regions (you will break the layout).'
classes:
pull_left:
class: pull-left
description: 'Float element left.'
pull_right:
class: pull-right
description: 'Float element right.'
centered-horizontal:
class: horizontal-center
description: 'Center the element horizontally. Combine with a layout-column to add a width.'
centered-vertical:
class: vertical-center
description: 'Center the element vertically. You must a) set "position-relative" on the parent container and b) combine with a layout-column to add width.'
position-relative:
class: position-relative
description: 'Normally used to set relative for absolytley position child elements (e.g. vertically centered). Maybe used with a trbl class e.g position-top, position-right, position-bottom or position-left.'
position-absolute:
class: position-absolute
description: 'May be used with a trbl class e.g position-top, position-right, position-bottom or position-left.'
position-fixed:
class: position-fixed
description: 'May be used with a trbl class e.g position-top, position-right, position-bottom or position-left.'
position-top:
class: position-top
description: 'Set position in combination with relative or absolute positioning.'
position-right:
class: position-right
description: 'Set position in combination with relative or absolute positioning.'
position-bottom:
class: position-bottom
description: 'Set position in combination with relative or absolute positioning.'
position-left:
class: position-left
description: 'Set position in combination with relative or absolute positioning.'
z-index:
class: z-index-(1-10)
description: 'Layer positioned elements - use with an interger 1 to 10, e.g. z-index-5.'
layout_columns:
name: 'Layout columns'
description: 'Set a width on an element. Do not use on Page rows or regions (you will break the layout). These are most useful or blocks or other elements within the page (for example you can apply these to elements in a node). All layout-column classes are full width in mobile, which is determined by your theme.'
elements:
- blocks
- other
- 'not rows or regions'
classes:
layout-column-quarter:
class: lc-quarter
description: 'Element will be one quarter the container width.'
layout-column-half:
class: lc-half
description: 'Element will be one half the container width.'
layout-column-three-quarters:
class: lc-three-quarters
description: 'Element will be three quarters the container width.'
layout-column-third:
class: lc-third
description: 'Element will be one third the container width.'
layout-column-two-thirds:
class: lc-two-thirds
description: 'Element will be two thirds the container width.'
float_region_blocks:
name: 'Float Region Blocks'
description: 'A combination of positioning and layout for blocks within a region to float blocks. The count class shoud match the number of blocks you wish to have in the region lining up side by side. Example "frb-3". In RTL blocks float right, in LTR blocks float left.'
elements:
- regions
classes:
float-region-blocks-count-2:
class: frb-2
description: 'Two blocks - 2 x 50%.'
float-region-blocks-count-3:
class: frb-3
description: 'Three blocks - 3 x 33.334%.'
float-region-blocks-count-4:
class: frb-4
description: 'Four blocks - 4 x 25%.'
float-region-blocks-count-5:
class: frb-5
description: 'Five blocks - 5 x 20%.'
float-region-blocks-count-6:
class: frb-6
description: 'Six blocks - 3 x 16.667.'
whitespace:
name: 'Whitespace control'
description: 'Remove padding and margin. Useful if you want a containers contents to fill the entire container, e.g. remove block and region margin and padding.'
elements:
- blocks
- regions
- rows
classes:
spaceless:
class: spaceless
description: 'Remove padding and margin.'
spaceless-all:
class: spaceless-all
description: 'Remove padding and margin recursively (all elements).'
remove-padding:
class: rm-padding
description: 'Remove padding.'
remove-padding-top:
class: rm-padding-top
description: 'Remove top padding.'
remove-padding-bottom:
class: rm-padding-bottom
description: 'Remove bottom padding.'
remove-padding-right:
class: rm-padding-right
description: 'Remove right padding.'
remove-padding-left:
class: rm-padding-left
description: 'Remove left padding.'
remove-margin:
class: rm-margin
description: 'Remove margin.'
remove-margin-top:
class: rm-margin-top
description: 'Remove top margin.'
remove-margin-botom:
class: rm-margin-bottom
description: 'Remove bottom margin.'
remove-margin-right:
class: rm-margin-right
description: 'Remove right margin.'
remove-margin-left:
class: rm-margin-left
description: 'Remove left margin.'
full-width-viewport:
class: full-width-viewport
description: 'Stretch to full width of the viewport, this will only really work on Row Containers.'
image_styles:
name: 'Image Styles'
description: 'Set styles for images.'
elements:
- blocks
- regions
- rows
classes:
image-spaceless:
class: image-spaceless
description: 'Remove any padding or margin from img tags and all wrappers (such as field wrapper markup).'
image-full-width:
class: image-full-width
description: 'Stretch images to 100% of their container.'
image-align-left:
class: image-align-left
description: 'Align images left.'
image-align-right:
class: image-align-right
description: 'Align images right.'
image-align-center:
class: image-align-center
description: 'Align images center.'
grid_blocks:
name: Block Grid
description: 'Layout blocks in a grid. Apply to full width regions only. A good alternative is to build a View with the format "Grid".'
elements:
- 'regions that are full width, e.g. leaderboard or content with no sidebars'
classes:
grid-block-two:
class: 'grid-block-2'
description: 'Two grid columns.'
grid-block-three:
class: 'grid-block-3'
description: 'Three grid columns.'
grid-block-four:
class: 'grid-block-4'
description: 'Four grid columns.'
grid-block-five:
class: 'grid-block-5'
description: 'Five grid columns.'
grid-block-six:
class: 'grid-block-6'
description: 'Six grid columns.'
grid-block-eight:
class: 'grid-block-8'
description: 'Eight grid columns.'
grid-block-ten:
class: 'grid-block-10'
description: 'Ten grid columns.'
grid-block-twelve:
class: 'grid-block-12'
description: 'Twelve grid columns.'
rounded_corners:
name: 'Rounded Corners'
description: 'Add rounded corners (border radius). Rounded corners will automatically apply to form elements, tabs etc depending on your theme (e.g. the search block form). You can set a global border radius on the <code>body</code>, then override it in regions or blocks.'
elements:
- blocks
- regions
- body
classes:
rc-0:
class: 'rc-0'
description: 'Remove border radius.'
rc-1:
class: 'rc-1'
description: 'Border radius 1px'
rc-2:
class: 'rc-2'
description: 'Border radius 2px'
rc-3:
class: 'rc-3'
description: 'Border radius 3px'
rc-4:
class: 'rc-4'
description: 'Border radius 4px'
rc-5:
class: 'rc-5'
description: 'Border radius 5px'
rc-6:
class: 'rc-6'
description: 'Border radius 6px'
rc-7:
class: 'rc-7'
description: 'Border radius 7px'
rc-8:
class: 'rc-8'
description: 'Border radius 8px'
rc-9:
class: 'rc-9'
description: 'Border radius 9px'
rc-10:
class: 'rc-10'
description: 'Border radius 10px'
rc-12:
class: 'rc-12'
description: 'Border radius 12px'
rc-15:
class: 'rc-15'
description: 'Border radius 15px'
rc-20:
class: 'rc-20'
description: 'Border radius 20px'
menu_bullets:
name: 'Menu Bullets'
description: 'Add font-icon arrows to collapsed and uncollapsed menu items.'
elements:
- 'menu blocks'
classes:
fa-arrow:
class: 'fa-arrow'
description: 'Simple arrows.'
fa-caret:
class: 'fa-caret'
description: 'Simple carets.'
fa-angle-double:
class: 'fa-angle-double'
description: 'Double angle (default with nothing applied is single angle).'
fa-chevron:
class: 'fa-chevron'
description: 'Chevron.'
animate:
name: Animatations
description: 'Add the "animated" class then one of the following Animate library class names, e.g. "animated, bounce". View demos http://daneden.github.io/animate.css.'
elements:
- blocks
- regions
classes:
# Attention seekers
bounce:
class: bounce
description: 'Attention: bounce'
flash:
class: flash
description: 'Attention: flash'
pulse:
class: pulse
description: 'Attention: pulse'
rubberBand:
class: rubberBand
description: 'Attention: rubberBand'
shake:
class: shake
description: 'Attention: shake'
swing:
class: swing
description: 'Attention: swing'
tada:
class: tada
description: 'Attention: tada'
wobble:
class: wobble
description: 'Attention: wobble'
jello:
class: jello
description: 'Attention: jello'
# Bounces
bounceIn:
class: bounceIn
description: 'Bounce: In'
bounceInDown:
class: bounceInDown
description: 'Bounce: In - Down'
bounceInLeft:
class: bounceInLeft
description: 'Bounce: In - Left'
bounceInRight:
class: bounceInRight
description: 'Bounce: In - Right'
bounceInUp:
class: bounceInUp
description: 'Bounce: In - Up'
# Bounces
bounceOut:
class: bounceOut
description: 'Bounce: Out'
bounceOutDown:
class: bounceOutDown
description: 'Bounce: Out - Down'
bounceOutLeft:
class: bounceOutLeft
description: 'Bounce: Out - Left'
bounceOutRight:
class: bounceOutRight
description: 'Bounce: Out - Right'
bounceOutUp:
class: bounceOutUp
description: 'Bounce: Out - Up'
# Fade entrances
fadeIn:
class: fadeIn
description: 'Fade: In'
fadeInDown:
class: fadeInDown
description: 'Fade: In - Down'
fadeInDownBig:
class: fadeInDownBig
description: 'Fade: In - Down Big'
fadeInLeft:
class: fadeInLeft
description: 'Fade: In - Left'
fadeInLeftBig:
class: fadeInLeftBig
description: 'Fade: In - Left Big'
fadeInRight:
class: fadeInRight
description: 'Fade: In - Right'
fadeInRightBig:
class: fadeInRightBig
description: 'Fade: In - Right Big'
fadeInUp:
class: fadeInUp
description: 'Fade: In - Up'
fadeInUpBig:
class: fadeInUpBig
description: 'Fade: In - Up Big'
# Fade exits
fadeOut:
class: fadeOut
description: 'Fade: Out'
fadeOutDown:
class: fadeOutDown
description: 'Fade: Out - Down'
fadeOutDownBig:
class: fadeOutDownBig
description: 'Fade: Out - Down Big'
fadeOutLeft:
class: fadeOutLeft
description: 'Fade: Out - Left'
fadeOutLeftBig:
class: fadeOutLeftBig
description: 'Fade: Out - Left Big'
fadeOutRight:
class: fadeOutRight
description: 'Fade: Out - Right'
fadeOutRightBig:
class: fadeOutRightBig
description: 'Fade: Out - Right Big'
fadeOutUp:
class: fadeOutUp
description: 'Fade: Out - Up'
fadeOutUpBig:
class: fadeOutUpBig
description: 'Fade: Out - Up Big'
# Flip
flipInX:
class: flipInX
description: 'Flip: In X axis'
flipInY:
class: flipInY
description: 'Flip: In Y axis'
flipOutX:
class: flipOutX
description: 'Flip: Out X axis'
flipOutY:
class: flipOutY
description: 'Flip: Out Y axis'
# LightSpeed
lightSpeedIn:
class: lightSpeedIn
description: 'Light Speed: In'
lightSpeedOut:
class: lightSpeedOut
description: 'Light Speed: Out'
# Rotate
rotateIn:
class: rotateIn
description: 'Rotate: In'
rotateInDownLeft:
class: rotateInDownLeft
description: 'Rotate: In - Down Left'
rotateInDownRight:
class: rotateInDownRight
description: 'Rotate: In - Down Right'
rotateInUpLeft:
class: rotateInUpLeft
description: 'Rotate: In - Up Left'
rotateInUpRight:
class: rotateInUpRight
description: 'Rotate: In - Up Right'
rotateOut:
class: rotateOut
description: 'Rotate: Out'
rotateOutDownLeft:
class: rotateOutDownLeft
description: 'Rotate: Out - Down Left'
rotateOutDownRight:
class: rotateOutDownRight
description: 'Rotate: Out - Down Right'
rotateOutUpLeft:
class: rotateOutUpLeft
description: 'Rotate: Out - Up Left'
rotateOutUpRight:
class: rotateOutUpRight
description: 'Rotate: Out - Up Right'
# Hinge
hinge:
class: hinge
description: 'Hinge'
# Roll
rollIn:
class: rollIn
description: 'Roll: In'
rollOut:
class: rollOut
description: 'Roll: Out'
# Zoom
zoomIn:
class: zoomIn
description: 'Zoom: In'
zoomInDown:
class: zoomInDown
description: 'Zoom: In - Down'
zoomInLeft:
class: zoomInLeft
description: 'Zoom: In - Left'
zoomInRight:
class: zoomInRight
description: 'Zoom: In - Right'
zoomInUp:
class: zoomInUp
description: 'Zoom: In - Up'
zoomOut:
class: zoomOut
description: 'Zoom: Out'
zoomOutDown:
class: zoomOutDown
description: 'Zoom: Out - Down'
zoomOutLeft:
class: zoomOutLeft
description: 'Zoom: Out - Left'
zoomOutRight:
class: zoomOutRight
description: 'Zoom: Out - Right'
zoomOutUp:
class: zoomOutUp
description: 'Zoom: Out - Up'
# Slide
slideInDown:
class: slideInDown
description: 'Slide: In - Down'
slideInLeft:
class: slideInLeft
description: 'Slide: In - Left'
slideInRight:
class: slideInRight
description: 'Slide: In - Right'
slideInUp:
class: slideInUp
description: 'Slide: In - Up'
slideOutDown:
class: slideOutDown
description: 'Slide: Out - Down'
slideOutLeft:
class: slideOutLeft
description: 'Slide: Out - Left'
slideOutRight:
class: slideOutRight
description: 'Slide: Out - Right'
slideOutUp:
class: slideOutUp
description: 'Slide: Out - Up'
