@ulu/frontend 0.1.0-beta.37 → 0.1.0-beta.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (160) hide show
  1. package/CHANGELOG.md +19 -3
  2. package/dist/ulu-frontend.min.css +1 -1
  3. package/dist/ulu-frontend.min.js +2 -2
  4. package/docs-dev/changelog/index.html +137 -30
  5. package/docs-dev/demos/accordion/index.html +60 -30
  6. package/docs-dev/demos/breakpoints-manager/index.html +5186 -0
  7. package/docs-dev/demos/button/index.html +60 -30
  8. package/docs-dev/demos/button-verbose/index.html +60 -30
  9. package/docs-dev/demos/callout/index.html +60 -30
  10. package/docs-dev/demos/captioned-figure/index.html +60 -30
  11. package/docs-dev/demos/card/index.html +76 -46
  12. package/docs-dev/demos/card-grid/index.html +60 -30
  13. package/docs-dev/demos/css-icons/index.html +60 -30
  14. package/docs-dev/demos/data-grid/index.html +60 -30
  15. package/docs-dev/demos/data-table/index.html +160 -130
  16. package/docs-dev/demos/details-group/index.html +60 -30
  17. package/docs-dev/demos/file-save/index.html +60 -30
  18. package/docs-dev/demos/flipcard/index.html +60 -30
  19. package/docs-dev/demos/form-theme/index.html +60 -30
  20. package/docs-dev/demos/index.html +60 -30
  21. package/docs-dev/demos/list-inline/index.html +60 -30
  22. package/docs-dev/demos/list-lines/index.html +60 -30
  23. package/docs-dev/demos/menu-stack/index.html +60 -30
  24. package/docs-dev/demos/modals/index.html +111 -30
  25. package/docs-dev/demos/nav-strip/index.html +60 -30
  26. package/docs-dev/demos/overlay-section/index.html +60 -30
  27. package/docs-dev/demos/popovers/index.html +117 -31
  28. package/docs-dev/demos/print/index.html +60 -30
  29. package/docs-dev/demos/pull-quote/index.html +60 -30
  30. package/docs-dev/demos/rule/index.html +60 -30
  31. package/docs-dev/demos/scrollpoints/index.html +60 -30
  32. package/docs-dev/demos/spoke-spinner/index.html +60 -30
  33. package/docs-dev/demos/sticky-list/index.html +60 -30
  34. package/docs-dev/demos/tabs/index.html +60 -30
  35. package/docs-dev/demos/tag/index.html +60 -30
  36. package/docs-dev/demos/theme-toggle/index.html +60 -30
  37. package/docs-dev/demos/tiles/index.html +60 -30
  38. package/docs-dev/demos/tooltip/index.html +60 -30
  39. package/docs-dev/guide/building-stylesheet/index.html +60 -30
  40. package/docs-dev/guide/developing-ulu-scss-module/index.html +60 -30
  41. package/docs-dev/guide/index.html +60 -30
  42. package/docs-dev/index.html +60 -30
  43. package/docs-dev/javascript/events/index.html +60 -30
  44. package/docs-dev/javascript/index.html +60 -30
  45. package/docs-dev/javascript/settings/index.html +132 -36
  46. package/docs-dev/javascript/ui-breakpoints/index.html +75 -45
  47. package/docs-dev/javascript/ui-collapsible/index.html +60 -30
  48. package/docs-dev/javascript/ui-details-group/index.html +60 -30
  49. package/docs-dev/javascript/ui-dialog/index.html +60 -30
  50. package/docs-dev/javascript/ui-flipcard/index.html +60 -30
  51. package/docs-dev/javascript/ui-grid/index.html +60 -30
  52. package/docs-dev/javascript/ui-modal-builder/index.html +60 -30
  53. package/docs-dev/javascript/ui-overflow-scroller/index.html +60 -30
  54. package/docs-dev/javascript/ui-overflow-scroller-pager/index.html +60 -30
  55. package/docs-dev/javascript/ui-page/index.html +60 -30
  56. package/docs-dev/javascript/ui-popover/index.html +60 -30
  57. package/docs-dev/javascript/ui-print/index.html +60 -30
  58. package/docs-dev/javascript/ui-print-details/index.html +60 -30
  59. package/docs-dev/javascript/ui-programmatic-modal/index.html +60 -30
  60. package/docs-dev/javascript/ui-proxy-click/index.html +60 -30
  61. package/docs-dev/javascript/ui-resizer/index.html +60 -30
  62. package/docs-dev/javascript/ui-scroll-slider/index.html +60 -30
  63. package/docs-dev/javascript/ui-scrollpoint/index.html +60 -30
  64. package/docs-dev/javascript/ui-slider/index.html +60 -30
  65. package/docs-dev/javascript/ui-tabs/index.html +60 -30
  66. package/docs-dev/javascript/ui-theme-toggle/index.html +60 -30
  67. package/docs-dev/javascript/ui-tooltip/index.html +60 -30
  68. package/docs-dev/javascript/utils-class-logger/index.html +60 -30
  69. package/docs-dev/javascript/utils-css/index.html +5164 -0
  70. package/docs-dev/javascript/utils-dom/index.html +60 -30
  71. package/docs-dev/javascript/utils-file-save/index.html +60 -30
  72. package/docs-dev/javascript/utils-floating-ui/index.html +60 -30
  73. package/docs-dev/javascript/utils-id/index.html +60 -30
  74. package/docs-dev/javascript/utils-pause-youtube-video/index.html +60 -30
  75. package/docs-dev/javascript/utils-system/index.html +60 -30
  76. package/docs-dev/sass/base/color/index.html +60 -30
  77. package/docs-dev/sass/base/elements/index.html +60 -30
  78. package/docs-dev/sass/base/index/index.html +60 -30
  79. package/docs-dev/sass/base/index.html +60 -30
  80. package/docs-dev/sass/base/keyframes/index.html +60 -30
  81. package/docs-dev/sass/base/layout/index.html +60 -30
  82. package/docs-dev/sass/base/normalize/index.html +60 -30
  83. package/docs-dev/sass/base/print/index.html +60 -30
  84. package/docs-dev/sass/base/root/index.html +60 -30
  85. package/docs-dev/sass/base/typography/index.html +60 -30
  86. package/docs-dev/sass/components/accordion/index.html +60 -30
  87. package/docs-dev/sass/components/adaptive-spacing/index.html +60 -30
  88. package/docs-dev/sass/components/badge/index.html +60 -30
  89. package/docs-dev/sass/components/basic-hero/index.html +60 -30
  90. package/docs-dev/sass/components/button/index.html +60 -30
  91. package/docs-dev/sass/components/button-verbose/index.html +82 -38
  92. package/docs-dev/sass/components/callout/index.html +60 -30
  93. package/docs-dev/sass/components/captioned-figure/index.html +60 -30
  94. package/docs-dev/sass/components/card/index.html +61 -31
  95. package/docs-dev/sass/components/card-grid/index.html +60 -30
  96. package/docs-dev/sass/components/css-icon/index.html +60 -30
  97. package/docs-dev/sass/components/data-grid/index.html +80 -43
  98. package/docs-dev/sass/components/data-table/index.html +60 -30
  99. package/docs-dev/sass/components/fill-context/index.html +60 -30
  100. package/docs-dev/sass/components/flipcard/index.html +60 -30
  101. package/docs-dev/sass/components/flipcard-grid/index.html +60 -30
  102. package/docs-dev/sass/components/form-theme/index.html +60 -30
  103. package/docs-dev/sass/components/hero/index.html +60 -30
  104. package/docs-dev/sass/components/horizontal-rule/index.html +60 -30
  105. package/docs-dev/sass/components/image-grid/index.html +60 -30
  106. package/docs-dev/sass/components/index/index.html +60 -30
  107. package/docs-dev/sass/components/index.html +60 -30
  108. package/docs-dev/sass/components/links/index.html +60 -30
  109. package/docs-dev/sass/components/list-inline/index.html +60 -30
  110. package/docs-dev/sass/components/list-lines/index.html +60 -30
  111. package/docs-dev/sass/components/list-ordered/index.html +60 -30
  112. package/docs-dev/sass/components/list-unordered/index.html +60 -30
  113. package/docs-dev/sass/components/menu-stack/index.html +60 -30
  114. package/docs-dev/sass/components/modal/index.html +61 -31
  115. package/docs-dev/sass/components/nav-strip/index.html +60 -30
  116. package/docs-dev/sass/components/overlay-section/index.html +60 -30
  117. package/docs-dev/sass/components/pager/index.html +60 -30
  118. package/docs-dev/sass/components/placeholder-block/index.html +60 -30
  119. package/docs-dev/sass/components/popover/index.html +60 -30
  120. package/docs-dev/sass/components/pull-quote/index.html +60 -30
  121. package/docs-dev/sass/components/ratio-box/index.html +60 -30
  122. package/docs-dev/sass/components/rule/index.html +60 -30
  123. package/docs-dev/sass/components/scroll-slider/index.html +60 -30
  124. package/docs-dev/sass/components/skip-link/index.html +60 -30
  125. package/docs-dev/sass/components/slider/index.html +60 -30
  126. package/docs-dev/sass/components/spoke-spinner/index.html +60 -30
  127. package/docs-dev/sass/components/sticky-list/index.html +60 -30
  128. package/docs-dev/sass/components/tabs/index.html +60 -30
  129. package/docs-dev/sass/components/tag/index.html +60 -30
  130. package/docs-dev/sass/components/tile-button/index.html +60 -30
  131. package/docs-dev/sass/components/tile-grid/index.html +60 -30
  132. package/docs-dev/sass/components/tile-grid-overlay/index.html +60 -30
  133. package/docs-dev/sass/components/vignette/index.html +60 -30
  134. package/docs-dev/sass/components/wysiwyg/index.html +60 -30
  135. package/docs-dev/sass/core/breakpoint/index.html +106 -62
  136. package/docs-dev/sass/core/button/index.html +60 -30
  137. package/docs-dev/sass/core/color/index.html +60 -30
  138. package/docs-dev/sass/core/cssvar/index.html +60 -30
  139. package/docs-dev/sass/core/element/index.html +60 -30
  140. package/docs-dev/sass/core/index.html +60 -30
  141. package/docs-dev/sass/core/layout/index.html +60 -30
  142. package/docs-dev/sass/core/path/index.html +60 -30
  143. package/docs-dev/sass/core/selector/index.html +60 -30
  144. package/docs-dev/sass/core/typography/index.html +60 -30
  145. package/docs-dev/sass/core/units/index.html +60 -30
  146. package/docs-dev/sass/core/utils/index.html +175 -123
  147. package/docs-dev/sass/helpers/color/index.html +60 -30
  148. package/docs-dev/sass/helpers/display/index.html +61 -31
  149. package/docs-dev/sass/helpers/index/index.html +60 -30
  150. package/docs-dev/sass/helpers/index.html +60 -30
  151. package/docs-dev/sass/helpers/print/index.html +60 -0
  152. package/docs-dev/sass/helpers/typography/index.html +60 -30
  153. package/docs-dev/sass/helpers/units/index.html +60 -30
  154. package/docs-dev/sass/helpers/utilities/index.html +62 -32
  155. package/docs-dev/sass/index.html +60 -30
  156. package/js/ui/scrollpoint.js +1 -1
  157. package/package.json +1 -1
  158. package/scss/helpers/_display.scss +15 -18
  159. package/scss/helpers/_print.scss +12 -7
  160. package/scss/helpers/_utilities.scss +42 -32
@@ -181,6 +181,21 @@
181
181
  </li>
182
182
 
183
183
 
184
+ <li class="nav-tree__item ">
185
+
186
+ <a class="nav-tree__link " href="/frontend/demos/breakpoints-manager/">
187
+
188
+
189
+ <span class="nav-tree__text">
190
+ Breakpoint Manager
191
+ </span>
192
+
193
+ </a>
194
+
195
+
196
+ </li>
197
+
198
+
184
199
  <li class="nav-tree__item ">
185
200
 
186
201
  <a class="nav-tree__link " href="/frontend/demos/button/">
@@ -1973,21 +1988,6 @@
1973
1988
  </li>
1974
1989
 
1975
1990
 
1976
- <li class="nav-tree__item ">
1977
-
1978
- <a class="nav-tree__link " href="/frontend/sass/helpers/print/">
1979
-
1980
-
1981
- <span class="nav-tree__text">
1982
- Print
1983
- </span>
1984
-
1985
- </a>
1986
-
1987
-
1988
- </li>
1989
-
1990
-
1991
1991
  <li class="nav-tree__item ">
1992
1992
 
1993
1993
  <a class="nav-tree__link " href="/frontend/sass/helpers/typography/">
@@ -2453,6 +2453,21 @@
2453
2453
  </li>
2454
2454
 
2455
2455
 
2456
+ <li class="nav-tree__item ">
2457
+
2458
+ <a class="nav-tree__link " href="/frontend/javascript/utils-css/">
2459
+
2460
+
2461
+ <span class="nav-tree__text">
2462
+ utils/css
2463
+ </span>
2464
+
2465
+ </a>
2466
+
2467
+
2468
+ </li>
2469
+
2470
+
2456
2471
  <li class="nav-tree__item ">
2457
2472
 
2458
2473
  <a class="nav-tree__link " href="/frontend/javascript/utils-dom/">
@@ -2682,6 +2697,21 @@
2682
2697
  </li>
2683
2698
 
2684
2699
 
2700
+ <li class="nav-tree__item ">
2701
+
2702
+ <a class="nav-tree__link " href="/frontend/demos/breakpoints-manager/">
2703
+
2704
+
2705
+ <span class="nav-tree__text">
2706
+ Breakpoint Manager
2707
+ </span>
2708
+
2709
+ </a>
2710
+
2711
+
2712
+ </li>
2713
+
2714
+
2685
2715
  <li class="nav-tree__item ">
2686
2716
 
2687
2717
  <a class="nav-tree__link " href="/frontend/demos/button/">
@@ -4474,21 +4504,6 @@
4474
4504
  </li>
4475
4505
 
4476
4506
 
4477
- <li class="nav-tree__item ">
4478
-
4479
- <a class="nav-tree__link " href="/frontend/sass/helpers/print/">
4480
-
4481
-
4482
- <span class="nav-tree__text">
4483
- Print
4484
- </span>
4485
-
4486
- </a>
4487
-
4488
-
4489
- </li>
4490
-
4491
-
4492
4507
  <li class="nav-tree__item ">
4493
4508
 
4494
4509
  <a class="nav-tree__link " href="/frontend/sass/helpers/typography/">
@@ -4954,6 +4969,21 @@
4954
4969
  </li>
4955
4970
 
4956
4971
 
4972
+ <li class="nav-tree__item ">
4973
+
4974
+ <a class="nav-tree__link " href="/frontend/javascript/utils-css/">
4975
+
4976
+
4977
+ <span class="nav-tree__text">
4978
+ utils/css
4979
+ </span>
4980
+
4981
+ </a>
4982
+
4983
+
4984
+ </li>
4985
+
4986
+
4957
4987
  <li class="nav-tree__item ">
4958
4988
 
4959
4989
  <a class="nav-tree__link " href="/frontend/javascript/utils-dom/">
@@ -5091,11 +5121,17 @@
5091
5121
  <li><a href="#settings.updatesetting(key%2C-value)">settings.updateSetting(key, value)</a>
5092
5122
  </li>
5093
5123
 
5094
- <li><a href="#settings.wrapsettingstring(key)-%E2%87%92-object">settings.wrapSettingString(key) ⇒ object</a>
5124
+ <li><a href="#settings.wrapsettingstring(key%2C-transform)-%E2%87%92-object">settings.wrapSettingString(key, transform) ⇒ Object</a>
5095
5125
  </li>
5096
5126
 
5097
5127
  <li><a href="#settings.configureicons()">settings.configureIcons()</a>
5098
5128
  </li>
5129
+
5130
+ <li><a href="#settings~defaults-%3A-defaults">settings~defaults : Defaults</a>
5131
+ </li>
5132
+
5133
+ <li><a href="#settings~defaults-%3A-object">settings~Defaults : object</a>
5134
+ </li>
5099
5135
  </ol>
5100
5136
  </div>
5101
5137
  </div>
@@ -5113,15 +5149,25 @@
5113
5149
  <ul>
5114
5150
  <li><a href="#module_settings">settings</a>
5115
5151
  <ul>
5152
+ <li><em>static</em>
5153
+ <ul>
5116
5154
  <li><a href="#module_settings.getDefaultSettings">.getDefaultSettings()</a> ⇒ <code>object</code></li>
5117
5155
  <li><a href="#module_settings.updateSettings">.updateSettings(changes)</a></li>
5118
5156
  <li><a href="#module_settings.getSettings">.getSettings()</a> ⇒ <code>object</code></li>
5119
5157
  <li><a href="#module_settings.getSetting">.getSetting(key)</a> ⇒ <code>*</code></li>
5120
5158
  <li><a href="#module_settings.updateSetting">.updateSetting(key, value)</a></li>
5121
- <li><a href="#module_settings.wrapSettingString">.wrapSettingString(key)</a> ⇒ <code>object</code></li>
5159
+ <li><a href="#module_settings.wrapSettingString">.wrapSettingString(key, transform)</a> ⇒ <code>Object</code></li>
5122
5160
  <li><a href="#module_settings.configureIcons">.configureIcons()</a></li>
5123
5161
  </ul>
5124
5162
  </li>
5163
+ <li><em>inner</em>
5164
+ <ul>
5165
+ <li><a href="#module_settings..defaults">~defaults</a> : <code>Defaults</code></li>
5166
+ <li><a href="#module_settings..Defaults">~Defaults</a> : <code>object</code></li>
5167
+ </ul>
5168
+ </li>
5169
+ </ul>
5170
+ </li>
5125
5171
  </ul>
5126
5172
  <p><a name="module_settings.getDefaultSettings"></a></p>
5127
5173
  <h2 id="settings.getdefaultsettings()-%E2%87%92-object" tabindex="-1">settings.getDefaultSettings() ⇒ <code>object</code></h2>
@@ -5200,13 +5246,14 @@
5200
5246
  </tbody>
5201
5247
  </table>
5202
5248
  <p><a name="module_settings.wrapSettingString"></a></p>
5203
- <h2 id="settings.wrapsettingstring(key)-%E2%87%92-object" tabindex="-1">settings.wrapSettingString(key) ⇒ <code>object</code></h2>
5249
+ <h2 id="settings.wrapsettingstring(key%2C-transform)-%E2%87%92-object" tabindex="-1">settings.wrapSettingString(key, transform) ⇒ <code>Object</code></h2>
5204
5250
  <p>Creates a wrapped string representation of a configuration setting.
5205
5251
  This function returns an object with a <code>toString()</code> method that, when called,
5206
5252
  retrieves the current value of the specified setting. This allows the setting
5207
5253
  to be used as a string literal, dynamically retrieving its value.</p>
5208
5254
  <p><strong>Kind</strong>: static method of <a href="#module_settings"><code>settings</code></a><br>
5209
- <strong>Returns</strong>: <code>object</code> - An object with a <code>toString()</code> method that returns the setting value.</p>
5255
+ <strong>Returns</strong>: <code>Object</code> - An object with a <code>toString()</code> method that returns the
5256
+ (optionally transformed) setting value as a string.</p>
5210
5257
  <table>
5211
5258
  <thead>
5212
5259
  <tr>
@@ -5218,15 +5265,64 @@ to be used as a string literal, dynamically retrieving its value.</p>
5218
5265
  <tbody>
5219
5266
  <tr>
5220
5267
  <td>key</td>
5221
- <td><code>string</code></td>
5268
+ <td><code>String</code></td>
5222
5269
  <td>The key of the setting to wrap.</td>
5223
5270
  </tr>
5271
+ <tr>
5272
+ <td>transform</td>
5273
+ <td><code>function</code></td>
5274
+ <td>Optional function to transform the setting's value when its string representation is requested.</td>
5275
+ </tr>
5224
5276
  </tbody>
5225
5277
  </table>
5226
5278
  <p><a name="module_settings.configureIcons"></a></p>
5227
5279
  <h2 id="settings.configureicons()" tabindex="-1">settings.configureIcons()</h2>
5228
5280
  <p>Sets icon settings to Font Awesome icons</p>
5229
- <p><strong>Kind</strong>: static method of <a href="#module_settings"><code>settings</code></a></p>
5281
+ <p><strong>Kind</strong>: static method of <a href="#module_settings"><code>settings</code></a><br>
5282
+ <a name="module_settings..defaults"></a></p>
5283
+ <h2 id="settings~defaults-%3A-defaults" tabindex="-1">settings~defaults : <code>Defaults</code></h2>
5284
+ <p><strong>Kind</strong>: inner constant of <a href="#module_settings"><code>settings</code></a><br>
5285
+ <a name="module_settings..Defaults"></a></p>
5286
+ <h2 id="settings~defaults-%3A-object" tabindex="-1">settings~Defaults : <code>object</code></h2>
5287
+ <p>Default settings</p>
5288
+ <p><strong>Kind</strong>: inner typedef of <a href="#module_settings"><code>settings</code></a><br>
5289
+ <strong>Properties</strong></p>
5290
+ <table>
5291
+ <thead>
5292
+ <tr>
5293
+ <th>Name</th>
5294
+ <th>Type</th>
5295
+ <th>Description</th>
5296
+ </tr>
5297
+ </thead>
5298
+ <tbody>
5299
+ <tr>
5300
+ <td>iconClassClose</td>
5301
+ <td><code>string</code></td>
5302
+ <td>The CSS class string for the close icon</td>
5303
+ </tr>
5304
+ <tr>
5305
+ <td>iconClassDragX</td>
5306
+ <td><code>string</code></td>
5307
+ <td>The CSS class string for the drag X icon</td>
5308
+ </tr>
5309
+ <tr>
5310
+ <td>iconClassPrevious</td>
5311
+ <td><code>string</code></td>
5312
+ <td>The CSS class string for the previous icon</td>
5313
+ </tr>
5314
+ <tr>
5315
+ <td>iconClassNext</td>
5316
+ <td><code>string</code></td>
5317
+ <td>The CSS class string for the next icon</td>
5318
+ </tr>
5319
+ <tr>
5320
+ <td>cssvarPrefix</td>
5321
+ <td><code>string</code></td>
5322
+ <td>The prefix to use for CSS custom properties</td>
5323
+ </tr>
5324
+ </tbody>
5325
+ </table>
5230
5326
 
5231
5327
  </div>
5232
5328
  </div>
@@ -181,6 +181,21 @@
181
181
  </li>
182
182
 
183
183
 
184
+ <li class="nav-tree__item ">
185
+
186
+ <a class="nav-tree__link " href="/frontend/demos/breakpoints-manager/">
187
+
188
+
189
+ <span class="nav-tree__text">
190
+ Breakpoint Manager
191
+ </span>
192
+
193
+ </a>
194
+
195
+
196
+ </li>
197
+
198
+
184
199
  <li class="nav-tree__item ">
185
200
 
186
201
  <a class="nav-tree__link " href="/frontend/demos/button/">
@@ -1973,21 +1988,6 @@
1973
1988
  </li>
1974
1989
 
1975
1990
 
1976
- <li class="nav-tree__item ">
1977
-
1978
- <a class="nav-tree__link " href="/frontend/sass/helpers/print/">
1979
-
1980
-
1981
- <span class="nav-tree__text">
1982
- Print
1983
- </span>
1984
-
1985
- </a>
1986
-
1987
-
1988
- </li>
1989
-
1990
-
1991
1991
  <li class="nav-tree__item ">
1992
1992
 
1993
1993
  <a class="nav-tree__link " href="/frontend/sass/helpers/typography/">
@@ -2453,6 +2453,21 @@
2453
2453
  </li>
2454
2454
 
2455
2455
 
2456
+ <li class="nav-tree__item ">
2457
+
2458
+ <a class="nav-tree__link " href="/frontend/javascript/utils-css/">
2459
+
2460
+
2461
+ <span class="nav-tree__text">
2462
+ utils/css
2463
+ </span>
2464
+
2465
+ </a>
2466
+
2467
+
2468
+ </li>
2469
+
2470
+
2456
2471
  <li class="nav-tree__item ">
2457
2472
 
2458
2473
  <a class="nav-tree__link " href="/frontend/javascript/utils-dom/">
@@ -2682,6 +2697,21 @@
2682
2697
  </li>
2683
2698
 
2684
2699
 
2700
+ <li class="nav-tree__item ">
2701
+
2702
+ <a class="nav-tree__link " href="/frontend/demos/breakpoints-manager/">
2703
+
2704
+
2705
+ <span class="nav-tree__text">
2706
+ Breakpoint Manager
2707
+ </span>
2708
+
2709
+ </a>
2710
+
2711
+
2712
+ </li>
2713
+
2714
+
2685
2715
  <li class="nav-tree__item ">
2686
2716
 
2687
2717
  <a class="nav-tree__link " href="/frontend/demos/button/">
@@ -4474,21 +4504,6 @@
4474
4504
  </li>
4475
4505
 
4476
4506
 
4477
- <li class="nav-tree__item ">
4478
-
4479
- <a class="nav-tree__link " href="/frontend/sass/helpers/print/">
4480
-
4481
-
4482
- <span class="nav-tree__text">
4483
- Print
4484
- </span>
4485
-
4486
- </a>
4487
-
4488
-
4489
- </li>
4490
-
4491
-
4492
4507
  <li class="nav-tree__item ">
4493
4508
 
4494
4509
  <a class="nav-tree__link " href="/frontend/sass/helpers/typography/">
@@ -4954,6 +4969,21 @@
4954
4969
  </li>
4955
4970
 
4956
4971
 
4972
+ <li class="nav-tree__item ">
4973
+
4974
+ <a class="nav-tree__link " href="/frontend/javascript/utils-css/">
4975
+
4976
+
4977
+ <span class="nav-tree__text">
4978
+ utils/css
4979
+ </span>
4980
+
4981
+ </a>
4982
+
4983
+
4984
+ </li>
4985
+
4986
+
4957
4987
  <li class="nav-tree__item ">
4958
4988
 
4959
4989
  <a class="nav-tree__link " href="/frontend/javascript/utils-dom/">
@@ -5089,7 +5119,7 @@
5089
5119
  <li><a href="#breakpointmanager.removeonchange(callback)">breakpointManager.removeOnChange(callback)</a>
5090
5120
  </li>
5091
5121
 
5092
- <li><a href="#breakpointmanager.getbreakpointinpsuedo()">breakpointManager.getBreakpointInPsuedo()</a>
5122
+ <li><a href="#breakpointmanager.getbreakpointinpseudo()">breakpointManager.getBreakpointInPseudo()</a>
5093
5123
  </li>
5094
5124
 
5095
5125
  <li><a href="#breakpointmanager.getbreakpointinproperty()">breakpointManager.getBreakpointInProperty()</a>
@@ -5170,7 +5200,7 @@
5170
5200
  <li><a href="#new_module_ui/breakpoints.BreakpointManager_new">new exports.BreakpointManager(config)</a></li>
5171
5201
  <li><a href="#module_ui/breakpoints.BreakpointManager+onChange">.onChange(callback)</a></li>
5172
5202
  <li><a href="#module_ui/breakpoints.BreakpointManager+removeOnChange">.removeOnChange(callback)</a></li>
5173
- <li><a href="#module_ui/breakpoints.BreakpointManager+getBreakpointInPsuedo">.getBreakpointInPsuedo()</a></li>
5203
+ <li><a href="#module_ui/breakpoints.BreakpointManager+getBreakpointInPseudo">.getBreakpointInPseudo()</a></li>
5174
5204
  <li><a href="#module_ui/breakpoints.BreakpointManager+getBreakpointInProperty">.getBreakpointInProperty()</a></li>
5175
5205
  <li><a href="#module_ui/breakpoints.BreakpointManager+getBreakpoint">.getBreakpoint()</a></li>
5176
5206
  <li><a href="#module_ui/breakpoints.BreakpointManager+update">.update()</a></li>
@@ -5207,7 +5237,7 @@
5207
5237
  <p><a name="module_ui/breakpoints.BreakpointManager"></a></p>
5208
5238
  <h2 id="ui%2Fbreakpoints.breakpointmanager" tabindex="-1">ui/breakpoints.BreakpointManager</h2>
5209
5239
  <p>Class that provides method for retrieving and acting on breakpoints passed
5210
- from CSS (using element psuedo content prop)</p>
5240
+ from CSS (using element pseudo content prop)</p>
5211
5241
  <p><strong>Kind</strong>: static class of <a href="#module_ui/breakpoints"><code>ui/breakpoints</code></a></p>
5212
5242
  <ul>
5213
5243
  <li><a href="#module_ui/breakpoints.BreakpointManager">.BreakpointManager</a>
@@ -5215,7 +5245,7 @@ from CSS (using element psuedo content prop)</p>
5215
5245
  <li><a href="#new_module_ui/breakpoints.BreakpointManager_new">new exports.BreakpointManager(config)</a></li>
5216
5246
  <li><a href="#module_ui/breakpoints.BreakpointManager+onChange">.onChange(callback)</a></li>
5217
5247
  <li><a href="#module_ui/breakpoints.BreakpointManager+removeOnChange">.removeOnChange(callback)</a></li>
5218
- <li><a href="#module_ui/breakpoints.BreakpointManager+getBreakpointInPsuedo">.getBreakpointInPsuedo()</a></li>
5248
+ <li><a href="#module_ui/breakpoints.BreakpointManager+getBreakpointInPseudo">.getBreakpointInPseudo()</a></li>
5219
5249
  <li><a href="#module_ui/breakpoints.BreakpointManager+getBreakpointInProperty">.getBreakpointInProperty()</a></li>
5220
5250
  <li><a href="#module_ui/breakpoints.BreakpointManager+getBreakpoint">.getBreakpoint()</a></li>
5221
5251
  <li><a href="#module_ui/breakpoints.BreakpointManager+update">.update()</a></li>
@@ -5237,7 +5267,7 @@ from CSS (using element psuedo content prop)</p>
5237
5267
  <tr>
5238
5268
  <td>config</td>
5239
5269
  <td><code>Object</code></td>
5240
- <td>Configruation object</td>
5270
+ <td>Configuration object</td>
5241
5271
  </tr>
5242
5272
  <tr>
5243
5273
  <td>config.order</td>
@@ -5250,28 +5280,28 @@ from CSS (using element psuedo content prop)</p>
5250
5280
  <td>Property to grab breakpoint from (default is --breakpoint)</td>
5251
5281
  </tr>
5252
5282
  <tr>
5253
- <td>config.valueFromPsuedo</td>
5283
+ <td>config.valueFromPseudo</td>
5254
5284
  <td><code>Array</code></td>
5255
- <td>Use the legacy method of grabbing breakpoint from psuedo element, default uses custom property</td>
5285
+ <td>Use the legacy method of grabbing breakpoint from pseudo element, default uses custom property</td>
5256
5286
  </tr>
5257
5287
  <tr>
5258
5288
  <td>config.element</td>
5259
5289
  <td><code>Node</code></td>
5260
- <td>The element to retrieve active breakpoint from stylesheet. (default is html) For using the old psuedo method, adjust this to document.body</td>
5290
+ <td>The element to retrieve active breakpoint from stylesheet. (default is html) For using the old pseudo method, adjust this to document.body</td>
5261
5291
  </tr>
5262
5292
  <tr>
5263
- <td>config.psuedoSelector</td>
5293
+ <td>config.pseudoSelector</td>
5264
5294
  <td><code>String</code></td>
5265
- <td>Change psuedo selector used to get the breakpoint from the psuedo's content property</td>
5295
+ <td>Change pseudo selector used to get the breakpoint from the pseudo's content property</td>
5266
5296
  </tr>
5267
5297
  </tbody>
5268
5298
  </table>
5269
5299
  <p><a name="module_ui/breakpoints.BreakpointManager+onChange"></a></p>
5270
5300
  <h3 id="breakpointmanager.onchange(callback)" tabindex="-1">breakpointManager.onChange(callback)</h3>
5271
- <p>Add a callback for everytime a breakpoint changes</p>
5301
+ <p>Add a callback for every time a breakpoint changes</p>
5272
5302
  <ul>
5273
5303
  <li>Not recommended, possibly use to watch for changes, etc</li>
5274
- <li>For more control use intance.at(name) with breakpoint methods</li>
5304
+ <li>For more control use instance.at(name) with breakpoint methods</li>
5275
5305
  </ul>
5276
5306
  <p><strong>Kind</strong>: instance method of <a href="#module_ui/breakpoints.BreakpointManager"><code>BreakpointManager</code></a></p>
5277
5307
  <table>
@@ -5310,9 +5340,9 @@ from CSS (using element psuedo content prop)</p>
5310
5340
  </tr>
5311
5341
  </tbody>
5312
5342
  </table>
5313
- <p><a name="module_ui/breakpoints.BreakpointManager+getBreakpointInPsuedo"></a></p>
5314
- <h3 id="breakpointmanager.getbreakpointinpsuedo()" tabindex="-1">breakpointManager.getBreakpointInPsuedo()</h3>
5315
- <p>Get breakpoint from a psuedo element</p>
5343
+ <p><a name="module_ui/breakpoints.BreakpointManager+getBreakpointInPseudo"></a></p>
5344
+ <h3 id="breakpointmanager.getbreakpointinpseudo()" tabindex="-1">breakpointManager.getBreakpointInPseudo()</h3>
5345
+ <p>Get breakpoint from a pseudo element</p>
5316
5346
  <p><strong>Kind</strong>: instance method of <a href="#module_ui/breakpoints.BreakpointManager"><code>BreakpointManager</code></a><br>
5317
5347
  <a name="module_ui/breakpoints.BreakpointManager+getBreakpointInProperty"></a></p>
5318
5348
  <h3 id="breakpointmanager.getbreakpointinproperty()" tabindex="-1">breakpointManager.getBreakpointInProperty()</h3>
@@ -181,6 +181,21 @@
181
181
  </li>
182
182
 
183
183
 
184
+ <li class="nav-tree__item ">
185
+
186
+ <a class="nav-tree__link " href="/frontend/demos/breakpoints-manager/">
187
+
188
+
189
+ <span class="nav-tree__text">
190
+ Breakpoint Manager
191
+ </span>
192
+
193
+ </a>
194
+
195
+
196
+ </li>
197
+
198
+
184
199
  <li class="nav-tree__item ">
185
200
 
186
201
  <a class="nav-tree__link " href="/frontend/demos/button/">
@@ -1973,21 +1988,6 @@
1973
1988
  </li>
1974
1989
 
1975
1990
 
1976
- <li class="nav-tree__item ">
1977
-
1978
- <a class="nav-tree__link " href="/frontend/sass/helpers/print/">
1979
-
1980
-
1981
- <span class="nav-tree__text">
1982
- Print
1983
- </span>
1984
-
1985
- </a>
1986
-
1987
-
1988
- </li>
1989
-
1990
-
1991
1991
  <li class="nav-tree__item ">
1992
1992
 
1993
1993
  <a class="nav-tree__link " href="/frontend/sass/helpers/typography/">
@@ -2453,6 +2453,21 @@
2453
2453
  </li>
2454
2454
 
2455
2455
 
2456
+ <li class="nav-tree__item ">
2457
+
2458
+ <a class="nav-tree__link " href="/frontend/javascript/utils-css/">
2459
+
2460
+
2461
+ <span class="nav-tree__text">
2462
+ utils/css
2463
+ </span>
2464
+
2465
+ </a>
2466
+
2467
+
2468
+ </li>
2469
+
2470
+
2456
2471
  <li class="nav-tree__item ">
2457
2472
 
2458
2473
  <a class="nav-tree__link " href="/frontend/javascript/utils-dom/">
@@ -2682,6 +2697,21 @@
2682
2697
  </li>
2683
2698
 
2684
2699
 
2700
+ <li class="nav-tree__item ">
2701
+
2702
+ <a class="nav-tree__link " href="/frontend/demos/breakpoints-manager/">
2703
+
2704
+
2705
+ <span class="nav-tree__text">
2706
+ Breakpoint Manager
2707
+ </span>
2708
+
2709
+ </a>
2710
+
2711
+
2712
+ </li>
2713
+
2714
+
2685
2715
  <li class="nav-tree__item ">
2686
2716
 
2687
2717
  <a class="nav-tree__link " href="/frontend/demos/button/">
@@ -4474,21 +4504,6 @@
4474
4504
  </li>
4475
4505
 
4476
4506
 
4477
- <li class="nav-tree__item ">
4478
-
4479
- <a class="nav-tree__link " href="/frontend/sass/helpers/print/">
4480
-
4481
-
4482
- <span class="nav-tree__text">
4483
- Print
4484
- </span>
4485
-
4486
- </a>
4487
-
4488
-
4489
- </li>
4490
-
4491
-
4492
4507
  <li class="nav-tree__item ">
4493
4508
 
4494
4509
  <a class="nav-tree__link " href="/frontend/sass/helpers/typography/">
@@ -4954,6 +4969,21 @@
4954
4969
  </li>
4955
4970
 
4956
4971
 
4972
+ <li class="nav-tree__item ">
4973
+
4974
+ <a class="nav-tree__link " href="/frontend/javascript/utils-css/">
4975
+
4976
+
4977
+ <span class="nav-tree__text">
4978
+ utils/css
4979
+ </span>
4980
+
4981
+ </a>
4982
+
4983
+
4984
+ </li>
4985
+
4986
+
4957
4987
  <li class="nav-tree__item ">
4958
4988
 
4959
4989
  <a class="nav-tree__link " href="/frontend/javascript/utils-dom/">