.. include:: ../Includes.txt .. _integration: =========== Integration =========== .. _integration_templating: Templating ========== When creating templates structures dividing the available width might be defined (e.g. columns). By providing the system with information regarding the available space within the structures the content rendering can be optimized. A typical scenario is to render images in columns. For this purpose the following view helpers are available: pp:render.bootstrap.column -------------------------- .. code-block:: html
The above code results in: .. code-block:: html
.. note:: The `count`-attribute is used when the width from the column isn't specified by the classes (e.g. when using `col`) pp.structure.wrap.column ------------------------ .. code-block:: html
The above code results in: .. code-block:: html
pp:structure.multiplier.getForColumn ------------------------------------ .. code-block:: html
{pp:structure.multiplier.getForColumn(class: 'col-xl-4', count: 2, as: '_colMultiplier')}
{pp:structure.multiplier.getForColumn(multiplier: _colMultiplier, class: 'col-md-6 col-xl-12', count: 2, as: '_colMultiplier')} {bk2k:data.imageVariants(as:'_colVariants', variants: variants, multiplier: _colMultiplier)}
SCSS-Mixins =========== The extensions provides mixins to assist in customizing a web site. Following the most used ones are listed. ======================================================================================================= =============================================================================================================================================================================== Mixin Description ======================================================================================================= =============================================================================================================================================================================== `pp-make-rainbow-background($start_color, $end_color, $count: 10)` Used to create a background with two overlapping rainbows starting from each bottom corner. `pp-make-spaces($properties, $value, $valueBreakpoint: xl, $scaling: $pp-space-scaling)` Used to create any kind of responsive space (padding or margin). Usage: `pp-make-spaces(margin-top, 1.5rem)` `pp-make-frame-spaces($value, $valueBreakpoint: xl, $sibling: '.frame', $scaling: $pp-space-scaling)` Used to create responsive frame spaces with a space of @value at $valueBreakpoint. The space is controlled by the padding and collapsing is taken into account. `pp-make-text-shadow-outline($thickness: 3px, $color: black, $blur-radius: 5px)` Used to create text with a shadowed outline ======================================================================================================= ===============================================================================================================================================================================