You are here

Home » API reference » AT Tools 8

THEMENAME.shortcodes.yml in AT Tools 8

at_theme_generator/starterkits/starterkit/THEMENAME.shortcodes.yml

File

at_theme_generator/starterkits/starterkit/THEMENAME.shortcodes.yml
View source 
  1. textalign:

  2.   name: 'Text Align'

  3.   description: ''

  4.   classes:

  5.     text_align_center:

  6.       class: ta-center

  7.       description: 'Align text centered.'

  8.     text_align_left:

  9.       class: ta-left

  10.       description: 'Align text left.'

  11.     text_align_right:

  12.       class: ta-right

  13.       description: 'Align text right.'

  14.     text_align_justify:

  15.       class: ta-justify

  16.       description: 'Align text justified.'

  17. 

  18. position:

  19.   name: Positioning

  20.   description: 'Float elements left or right. Do not use on Page rows or regions (you will break the layout).'

  21.   classes:

  22.     pull_left:

  23.       class: pull-left

  24.       description: 'Float element left.'

  25.     pull_right:

  26.       class: pull-right

  27.       description: 'Float element right.'

  28.     centered-horizontal:

  29.       class: horizontal-center

  30.       description: 'Center the element horizontally. Combine with a layout-column to add a width.'

  31.     centered-vertical:

  32.       class: vertical-center

  33.       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.'

  34.     position-relative:

  35.       class: position-relative

  36.       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.'

  37.     position-absolute:

  38.       class: position-absolute

  39.       description: 'May be used with a trbl class e.g position-top, position-right, position-bottom or position-left.'

  40.     position-fixed:

  41.       class: position-fixed

  42.       description: 'May be used with a trbl class e.g position-top, position-right, position-bottom or position-left.'

  43.     position-top:

  44.       class: position-top

  45.       description: 'Set position in combination with relative or absolute positioning.'

  46.     position-right:

  47.       class: position-right

  48.       description: 'Set position in combination with relative or absolute positioning.'

  49.     position-bottom:

  50.       class: position-bottom

  51.       description: 'Set position in combination with relative or absolute positioning.'

  52.     position-left:

  53.       class: position-left

  54.       description: 'Set position in combination with relative or absolute positioning.'

  55.     z-index:

  56.       class: z-index-(1-10)

  57.       description: 'Layer positioned elements - use with an interger 1 to 10, e.g. z-index-5.'

  58. 

  59. layout_columns:

  60.   name: 'Layout columns'

  61.   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.'

  62.   elements:

  63.     - blocks

  64.     - other

  65.     - 'not rows or regions'

  66.   classes:

  67.     layout-column-quarter:

  68.       class: lc-quarter

  69.       description: 'Element will be one quarter the container width.'

  70.     layout-column-half:

  71.       class: lc-half

  72.       description: 'Element will be one half the container width.'

  73.     layout-column-three-quarters:

  74.       class: lc-three-quarters

  75.       description: 'Element will be three quarters the container width.'

  76.     layout-column-third:

  77.       class: lc-third

  78.       description: 'Element will be one third the container width.'

  79.     layout-column-two-thirds:

  80.       class: lc-two-thirds

  81.       description: 'Element will be two thirds the container width.'

  82. 

  83. float_region_blocks:

  84.   name: 'Float Region Blocks'

  85.   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.'

  86.   elements:

  87.     - regions

  88.   classes:

  89.     float-region-blocks-count-2:

  90.       class: frb-2

  91.       description: 'Two blocks - 2 x 50%.'

  92.     float-region-blocks-count-3:

  93.       class: frb-3

  94.       description: 'Three blocks - 3 x 33.334%.'

  95.     float-region-blocks-count-4:

  96.       class: frb-4

  97.       description: 'Four blocks - 4 x 25%.'

  98.     float-region-blocks-count-5:

  99.       class: frb-5

  100.       description: 'Five blocks - 5 x 20%.'

  101.     float-region-blocks-count-6:

  102.       class: frb-6

  103.       description: 'Six blocks - 3 x 16.667.'

  104. 

  105. whitespace:

  106.   name: 'Whitespace control'

  107.   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.'

  108.   elements:

  109.     - blocks

  110.     - regions

  111.     - rows

  112.   classes:

  113.     spaceless:

  114.       class: spaceless

  115.       description: 'Remove padding and margin.'

  116.     spaceless-all:

  117.       class: spaceless-all

  118.       description: 'Remove padding and margin recursively (all elements).'

  119.     remove-padding:

  120.       class: rm-padding

  121.       description: 'Remove padding.'

  122.     remove-padding-top:

  123.       class: rm-padding-top

  124.       description: 'Remove top padding.'

  125.     remove-padding-bottom:

  126.       class: rm-padding-bottom

  127.       description: 'Remove bottom padding.'

  128.     remove-padding-right:

  129.       class: rm-padding-right

  130.       description: 'Remove right padding.'

  131.     remove-padding-left:

  132.       class: rm-padding-left

  133.       description: 'Remove left padding.'

  134.     remove-margin:

  135.       class: rm-margin

  136.       description: 'Remove margin.'

  137.     remove-margin-top:

  138.       class: rm-margin-top

  139.       description: 'Remove top margin.'

  140.     remove-margin-botom:

  141.       class: rm-margin-bottom

  142.       description: 'Remove bottom margin.'

  143.     remove-margin-right:

  144.       class: rm-margin-right

  145.       description: 'Remove right margin.'

  146.     remove-margin-left:

  147.       class: rm-margin-left

  148.       description: 'Remove left margin.'

  149.     full-width-viewport:

  150.       class: full-width-viewport

  151.       description: 'Stretch to full width of the viewport, this will only really work on Row Containers.'

  152. 

  153. image_styles:

  154.   name: 'Image Styles'

  155.   description: 'Set styles for images.'

  156.   elements:

  157.     - blocks

  158.     - regions

  159.     - rows

  160.   classes:

  161.     image-spaceless:

  162.       class: image-spaceless

  163.       description: 'Remove any padding or margin from img tags and all wrappers (such as field wrapper markup).'

  164.     image-full-width:

  165.       class: image-full-width

  166.       description: 'Stretch images to 100% of their container.'

  167.     image-align-left:

  168.       class: image-align-left

  169.       description: 'Align images left.'

  170.     image-align-right:

  171.       class: image-align-right

  172.       description: 'Align images right.'

  173.     image-align-center:

  174.       class: image-align-center

  175.       description: 'Align images center.'

  176. 

  177. grid_blocks:

  178.   name: Block Grid

  179.   description: 'Layout blocks in a grid. Apply to full width regions only. A good alternative is to build a View with the format "Grid".'

  180.   elements:

  181.     - 'regions that are full width, e.g. leaderboard or content with no sidebars'

  182.   classes:

  183.     grid-block-two:

  184.       class: 'grid-block-2'

  185.       description: 'Two grid columns.'

  186.     grid-block-three:

  187.       class: 'grid-block-3'

  188.       description: 'Three grid columns.'

  189.     grid-block-four:

  190.       class: 'grid-block-4'

  191.       description: 'Four grid columns.'

  192.     grid-block-five:

  193.       class: 'grid-block-5'

  194.       description: 'Five grid columns.'

  195.     grid-block-six:

  196.       class: 'grid-block-6'

  197.       description: 'Six grid columns.'

  198.     grid-block-eight:

  199.       class: 'grid-block-8'

  200.       description: 'Eight grid columns.'

  201.     grid-block-ten:

  202.       class: 'grid-block-10'

  203.       description: 'Ten grid columns.'

  204.     grid-block-twelve:

  205.       class: 'grid-block-12'

  206.       description: 'Twelve grid columns.'

  207. 

  208. rounded_corners:

  209.   name: 'Rounded Corners'

  210.   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.'

  211.   elements:

  212.     - blocks

  213.     - regions

  214.     - body

  215.   classes:

  216.     rc-0:

  217.       class: 'rc-0'

  218.       description: 'Remove border radius.'

  219.     rc-1:

  220.       class: 'rc-1'

  221.       description: 'Border radius 1px'

  222.     rc-2:

  223.       class: 'rc-2'

  224.       description: 'Border radius 2px'

  225.     rc-3:

  226.       class: 'rc-3'

  227.       description: 'Border radius 3px'

  228.     rc-4:

  229.       class: 'rc-4'

  230.       description: 'Border radius 4px'

  231.     rc-5:

  232.       class: 'rc-5'

  233.       description: 'Border radius 5px'

  234.     rc-6:

  235.       class: 'rc-6'

  236.       description: 'Border radius 6px'

  237.     rc-7:

  238.       class: 'rc-7'

  239.       description: 'Border radius 7px'

  240.     rc-8:

  241.       class: 'rc-8'

  242.       description: 'Border radius 8px'

  243.     rc-9:

  244.       class: 'rc-9'

  245.       description: 'Border radius 9px'

  246.     rc-10:

  247.       class: 'rc-10'

  248.       description: 'Border radius 10px'

  249.     rc-12:

  250.       class: 'rc-12'

  251.       description: 'Border radius 12px'

  252.     rc-15:

  253.       class: 'rc-15'

  254.       description: 'Border radius 15px'

  255.     rc-20:

  256.       class: 'rc-20'

  257.       description: 'Border radius 20px'

  258. 

  259. menu_bullets:

  260.   name: 'Menu Bullets'

  261.   description: 'Add font-icon arrows to collapsed and uncollapsed menu items.'

  262.   elements:

  263.     - 'menu blocks'

  264.   classes:

  265.     fa-arrow:

  266.       class: 'fa-arrow'

  267.       description: 'Simple arrows.'

  268.     fa-caret:

  269.       class: 'fa-caret'

  270.       description: 'Simple carets.'

  271.     fa-angle-double:

  272.       class: 'fa-angle-double'

  273.       description: 'Double angle (default with nothing applied is single angle).'

  274.     fa-chevron:

  275.       class: 'fa-chevron'

  276.       description: 'Chevron.'

  277. 

  278. animate:

  279.   name: Animatations

  280.   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.'

  281.   elements:

  282.     - blocks

  283.     - regions

  284.   classes:

  285.     # Attention seekers

  286.     bounce:

  287.       class: bounce

  288.       description: 'Attention: bounce'

  289.     flash:

  290.       class: flash

  291.       description: 'Attention: flash'

  292.     pulse:

  293.       class: pulse

  294.       description: 'Attention: pulse'

  295.     rubberBand:

  296.       class: rubberBand

  297.       description: 'Attention: rubberBand'

  298.     shake:

  299.       class: shake

  300.       description: 'Attention: shake'

  301.     swing:

  302.       class: swing

  303.       description: 'Attention: swing'

  304.     tada:

  305.       class: tada

  306.       description: 'Attention: tada'

  307.     wobble:

  308.       class: wobble

  309.       description: 'Attention: wobble'

  310.     jello:

  311.       class: jello

  312.       description: 'Attention: jello'

  313.     # Bounces

  314.     bounceIn:

  315.       class: bounceIn

  316.       description: 'Bounce: In'

  317.     bounceInDown:

  318.       class: bounceInDown

  319.       description: 'Bounce: In - Down'

  320.     bounceInLeft:

  321.       class: bounceInLeft

  322.       description: 'Bounce: In - Left'

  323.     bounceInRight:

  324.       class: bounceInRight

  325.       description: 'Bounce: In - Right'

  326.     bounceInUp:

  327.       class: bounceInUp

  328.       description: 'Bounce: In - Up'

  329.     # Bounces

  330.     bounceOut:

  331.       class: bounceOut

  332.       description: 'Bounce: Out'

  333.     bounceOutDown:

  334.       class: bounceOutDown

  335.       description: 'Bounce: Out - Down'

  336.     bounceOutLeft:

  337.       class: bounceOutLeft

  338.       description: 'Bounce: Out - Left'

  339.     bounceOutRight:

  340.       class: bounceOutRight

  341.       description: 'Bounce: Out - Right'

  342.     bounceOutUp:

  343.       class: bounceOutUp

  344.       description: 'Bounce: Out - Up'

  345.     # Fade entrances

  346.     fadeIn:

  347.       class: fadeIn

  348.       description: 'Fade: In'

  349.     fadeInDown:

  350.       class: fadeInDown

  351.       description: 'Fade: In - Down'

  352.     fadeInDownBig:

  353.       class: fadeInDownBig

  354.       description: 'Fade: In - Down Big'

  355.     fadeInLeft:

  356.       class: fadeInLeft

  357.       description: 'Fade: In - Left'

  358.     fadeInLeftBig:

  359.       class: fadeInLeftBig

  360.       description: 'Fade: In - Left Big'

  361.     fadeInRight:

  362.       class: fadeInRight

  363.       description: 'Fade: In - Right'

  364.     fadeInRightBig:

  365.       class: fadeInRightBig

  366.       description: 'Fade: In - Right Big'

  367.     fadeInUp:

  368.       class: fadeInUp

  369.       description: 'Fade: In - Up'

  370.     fadeInUpBig:

  371.       class: fadeInUpBig

  372.       description: 'Fade: In - Up Big'

  373.     # Fade exits

  374.     fadeOut:

  375.       class: fadeOut

  376.       description: 'Fade: Out'

  377.     fadeOutDown:

  378.       class: fadeOutDown

  379.       description: 'Fade: Out - Down'

  380.     fadeOutDownBig:

  381.       class: fadeOutDownBig

  382.       description: 'Fade: Out - Down Big'

  383.     fadeOutLeft:

  384.       class: fadeOutLeft

  385.       description: 'Fade: Out - Left'

  386.     fadeOutLeftBig:

  387.       class: fadeOutLeftBig

  388.       description: 'Fade: Out - Left Big'

  389.     fadeOutRight:

  390.       class: fadeOutRight

  391.       description: 'Fade: Out - Right'

  392.     fadeOutRightBig:

  393.       class: fadeOutRightBig

  394.       description: 'Fade: Out - Right Big'

  395.     fadeOutUp:

  396.       class: fadeOutUp

  397.       description: 'Fade: Out - Up'

  398.     fadeOutUpBig:

  399.       class: fadeOutUpBig

  400.       description: 'Fade: Out - Up Big'

  401.     # Flip

  402.     flipInX:

  403.       class: flipInX

  404.       description: 'Flip: In X axis'

  405.     flipInY:

  406.       class: flipInY

  407.       description: 'Flip: In Y axis'

  408.     flipOutX:

  409.       class: flipOutX

  410.       description: 'Flip: Out X axis'

  411.     flipOutY:

  412.       class: flipOutY

  413.       description: 'Flip: Out Y axis'

  414.     # LightSpeed

  415.     lightSpeedIn:

  416.       class: lightSpeedIn

  417.       description: 'Light Speed: In'

  418.     lightSpeedOut:

  419.       class: lightSpeedOut

  420.       description: 'Light Speed: Out'

  421.     # Rotate

  422.     rotateIn:

  423.       class: rotateIn

  424.       description: 'Rotate: In'

  425.     rotateInDownLeft:

  426.       class: rotateInDownLeft

  427.       description: 'Rotate: In - Down Left'

  428.     rotateInDownRight:

  429.       class: rotateInDownRight

  430.       description: 'Rotate: In - Down Right'

  431.     rotateInUpLeft:

  432.       class: rotateInUpLeft

  433.       description: 'Rotate: In - Up Left'

  434.     rotateInUpRight:

  435.       class: rotateInUpRight

  436.       description: 'Rotate: In - Up Right'

  437.     rotateOut:

  438.       class: rotateOut

  439.       description: 'Rotate: Out'

  440.     rotateOutDownLeft:

  441.       class: rotateOutDownLeft

  442.       description: 'Rotate: Out - Down Left'

  443.     rotateOutDownRight:

  444.       class: rotateOutDownRight

  445.       description: 'Rotate: Out - Down Right'

  446.     rotateOutUpLeft:

  447.       class: rotateOutUpLeft

  448.       description: 'Rotate: Out - Up Left'

  449.     rotateOutUpRight:

  450.       class: rotateOutUpRight

  451.       description: 'Rotate: Out - Up Right'

  452.     # Hinge

  453.     hinge:

  454.       class: hinge

  455.       description: 'Hinge'

  456.     # Roll

  457.     rollIn:

  458.       class: rollIn

  459.       description: 'Roll: In'

  460.     rollOut:

  461.       class: rollOut

  462.       description: 'Roll: Out'

  463.     # Zoom

  464.     zoomIn:

  465.       class: zoomIn

  466.       description: 'Zoom: In'

  467.     zoomInDown:

  468.       class: zoomInDown

  469.       description: 'Zoom: In - Down'

  470.     zoomInLeft:

  471.       class: zoomInLeft

  472.       description: 'Zoom: In - Left'

  473.     zoomInRight:

  474.       class: zoomInRight

  475.       description: 'Zoom: In - Right'

  476.     zoomInUp:

  477.       class: zoomInUp

  478.       description: 'Zoom: In - Up'

  479.     zoomOut:

  480.       class: zoomOut

  481.       description: 'Zoom: Out'

  482.     zoomOutDown:

  483.       class: zoomOutDown

  484.       description: 'Zoom: Out - Down'

  485.     zoomOutLeft:

  486.       class: zoomOutLeft

  487.       description: 'Zoom: Out - Left'

  488.     zoomOutRight:

  489.       class: zoomOutRight

  490.       description: 'Zoom: Out - Right'

  491.     zoomOutUp:

  492.       class: zoomOutUp

  493.       description: 'Zoom: Out - Up'

  494.     # Slide

  495.     slideInDown:

  496.       class: slideInDown

  497.       description: 'Slide: In - Down'

  498.     slideInLeft:

  499.       class: slideInLeft

  500.       description: 'Slide: In - Left'

  501.     slideInRight:

  502.       class: slideInRight

  503.       description: 'Slide: In - Right'

  504.     slideInUp:

  505.       class: slideInUp

  506.       description: 'Slide: In - Up'

  507.     slideOutDown:

  508.       class: slideOutDown

  509.       description: 'Slide: Out - Down'

  510.     slideOutLeft:

  511.       class: slideOutLeft

  512.       description: 'Slide: Out - Left'

  513.     slideOutRight:

  514.       class: slideOutRight

  515.       description: 'Slide: Out - Right'

  516.     slideOutUp:

  517.       class: slideOutUp

  518.       description: 'Slide: Out - Up'