Calculates the responsive width of a Bootstrap 3 grid element as a percentage of the viewport at each screen breakpoint, for use in the HTML "sizes" attribute of responsive images. Applied during theme post-rendering to every element carrying the "theme-bootstrap3-sizes" class: it walks up the element's ancestors reading "container", "container-fluid" and "col-lg-*"/"col-md-*"/"col-sm-*"/"col-xs-*" classes to work out what proportion of its parent's width the element occupies at each breakpoint, then combines those proportions down the ancestor chain. The result, via toString, is a CSS media-query sizes string the browser uses to pick the right image from a srcset.


Properties

PropertyReturnsDescription
sizesList<Size>The list of computed sizes for this element, one entry per breakpoint at which its width changes, ordered from largest to smallest minimum width. Calculated lazily on first access by walking the element's ancestor chain, and cached for the lifetime of this helper.
thisElementJerryThe element whose responsive sizing is being calculated.

Methods

getThisElement()

Returns: Jerry

The element whose responsive sizing is being calculated.

getSizes()

Returns: List<Size>

The list of computed sizes for this element, one entry per breakpoint at which its width changes, ordered from largest to smallest minimum width. Calculated lazily on first access by walking the element's ancestor chain, and cached for the lifetime of this helper.

To get full access to the Kademi Hub existing customers can login here, or new customers can register here.