kafe.style

Class

Version 1.3.0

Common adjustment and manipulation methods for html layouts.

Source: dist/style.js

Methods

equalHeight

Equalizes the height css property of every element in a selector. If no height is currently present, the method computes the height values before equalizing. Elements must be visible at the time or will be considered as having a height of 0.

equalHeight
  • selector
  • options

Parameters:

  • selector String|jQueryObject|DOMElement

    The affected elements.

  • [options] Object Optional

    Additional options.

    • [nbPerRow = 0] Number Optional

      Allows the elements to be compared in groups of a given number.

    • [resetHeight = false] Boolean Optional

      Resets css height of all elements to 'auto' before comparing.

    • [borderBox = false] Boolean Optional

      If true, heights will be computed as if the elements had the 'box-sizing' css attribute to 'border-box'.

Example:

kafe.style.equalHeight('.products', { nbPerRow: 3, resetHeight: true });
$('.products').kafe('style.equalHeight', { nbPerRow: 3, resetHeight: true });

replaceHr

Replaces <hr> tags into <div class="hr"></div> tags to eliminate styling restrictions.

replaceHr
  • selector = 'hr'

Parameters:

  • [selector = 'hr'] String|jQueryObject|DOMElement Optional

    Restricts the process to a specific context.

Example:

kafe.style.replaceHr('.page-content');
$('.page-content').kafe('style.replaceHr');

vAlign

Vertically align an element inside its parent. Elements must be visible at the time or positioning calculations will fail.

vAlign
  • selector
  • parent = DIRECT_PARENT

Parameters:

  • selector String|jQueryObject|DOMElement

    Affected elements.

  • [parent = DIRECT_PARENT] String|jQueryObject|DOMElement Optional

    Container in which we want to be centered.

Example:

kafe.style.vAlign('.menu-items > .label');
$('.menu-items > .label').kafe('style.vAlign');