@frankenstyle/uikit 0.0.1

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 (701) hide show
  1. package/.prettierignore +15 -0
  2. package/.prettierrc.json +12 -0
  3. package/BACKERS.md +5 -0
  4. package/CHANGELOG.md +3759 -0
  5. package/CONTRIBUTING.md +96 -0
  6. package/LICENSE.md +7 -0
  7. package/README.md +65 -0
  8. package/build/build.js +95 -0
  9. package/build/icons.js +35 -0
  10. package/build/less.js +95 -0
  11. package/build/package.json +4 -0
  12. package/build/prefix.js +76 -0
  13. package/build/publishDev.js +33 -0
  14. package/build/release.js +123 -0
  15. package/build/scope.js +106 -0
  16. package/build/scss/mixin.scss +32 -0
  17. package/build/scss.js +252 -0
  18. package/build/util.js +288 -0
  19. package/build/wrapper/component.js +7 -0
  20. package/build/wrapper/icons.js +13 -0
  21. package/composer.json +17 -0
  22. package/dist/css/uikit-rtl.css +13333 -0
  23. package/dist/css/uikit-rtl.min.css +1 -0
  24. package/dist/css/uikit.css +13333 -0
  25. package/dist/css/uikit.min.css +1 -0
  26. package/dist/js/components/.gitkeep +0 -0
  27. package/dist/js/components/countdown.js +112 -0
  28. package/dist/js/components/countdown.min.js +1 -0
  29. package/dist/js/components/filter.js +527 -0
  30. package/dist/js/components/filter.min.js +1 -0
  31. package/dist/js/components/lightbox-panel.js +1695 -0
  32. package/dist/js/components/lightbox-panel.min.js +1 -0
  33. package/dist/js/components/lightbox.js +1783 -0
  34. package/dist/js/components/lightbox.min.js +1 -0
  35. package/dist/js/components/notification.js +127 -0
  36. package/dist/js/components/notification.min.js +1 -0
  37. package/dist/js/components/parallax.js +726 -0
  38. package/dist/js/components/parallax.min.js +1 -0
  39. package/dist/js/components/slider-parallax.js +637 -0
  40. package/dist/js/components/slider-parallax.min.js +1 -0
  41. package/dist/js/components/slider.js +1731 -0
  42. package/dist/js/components/slider.min.js +1 -0
  43. package/dist/js/components/slideshow-parallax.js +637 -0
  44. package/dist/js/components/slideshow-parallax.min.js +1 -0
  45. package/dist/js/components/slideshow.js +1555 -0
  46. package/dist/js/components/slideshow.min.js +1 -0
  47. package/dist/js/components/sortable.js +680 -0
  48. package/dist/js/components/sortable.min.js +1 -0
  49. package/dist/js/components/tooltip.js +446 -0
  50. package/dist/js/components/tooltip.min.js +1 -0
  51. package/dist/js/components/upload.js +235 -0
  52. package/dist/js/components/upload.min.js +1 -0
  53. package/dist/js/uikit-core.js +6726 -0
  54. package/dist/js/uikit-core.min.js +1 -0
  55. package/dist/js/uikit-icons.js +184 -0
  56. package/dist/js/uikit-icons.min.js +1 -0
  57. package/dist/js/uikit.js +10077 -0
  58. package/dist/js/uikit.min.js +1 -0
  59. package/eslint.config.mjs +35 -0
  60. package/jsconfig.json +9 -0
  61. package/package.json +66 -0
  62. package/src/images/backgrounds/accordion-close.svg +4 -0
  63. package/src/images/backgrounds/accordion-open.svg +3 -0
  64. package/src/images/backgrounds/divider-icon.svg +3 -0
  65. package/src/images/backgrounds/form-checkbox-indeterminate.svg +3 -0
  66. package/src/images/backgrounds/form-checkbox.svg +3 -0
  67. package/src/images/backgrounds/form-datalist.svg +3 -0
  68. package/src/images/backgrounds/form-radio.svg +3 -0
  69. package/src/images/backgrounds/form-select.svg +4 -0
  70. package/src/images/backgrounds/list-bullet.svg +3 -0
  71. package/src/images/components/close-icon.svg +1 -0
  72. package/src/images/components/close-large.svg +1 -0
  73. package/src/images/components/drop-parent-icon.svg +1 -0
  74. package/src/images/components/marker.svg +1 -0
  75. package/src/images/components/nav-parent-icon-large.svg +1 -0
  76. package/src/images/components/nav-parent-icon.svg +1 -0
  77. package/src/images/components/navbar-parent-icon.svg +1 -0
  78. package/src/images/components/navbar-toggle-icon.svg +34 -0
  79. package/src/images/components/overlay-icon.svg +1 -0
  80. package/src/images/components/pagination-next.svg +1 -0
  81. package/src/images/components/pagination-previous.svg +1 -0
  82. package/src/images/components/search-icon.svg +1 -0
  83. package/src/images/components/search-large.svg +1 -0
  84. package/src/images/components/search-medium.svg +1 -0
  85. package/src/images/components/slidenav-next-large.svg +1 -0
  86. package/src/images/components/slidenav-next.svg +1 -0
  87. package/src/images/components/slidenav-previous-large.svg +1 -0
  88. package/src/images/components/slidenav-previous.svg +1 -0
  89. package/src/images/components/spinner.svg +3 -0
  90. package/src/images/components/totop.svg +1 -0
  91. package/src/images/icons/500px.svg +30 -0
  92. package/src/images/icons/album.svg +5 -0
  93. package/src/images/icons/android-robot.svg +6 -0
  94. package/src/images/icons/android.svg +3 -0
  95. package/src/images/icons/apple.svg +3 -0
  96. package/src/images/icons/arrow-down-arrow-up.svg +6 -0
  97. package/src/images/icons/arrow-down.svg +4 -0
  98. package/src/images/icons/arrow-left.svg +4 -0
  99. package/src/images/icons/arrow-right.svg +4 -0
  100. package/src/images/icons/arrow-up-right.svg +4 -0
  101. package/src/images/icons/arrow-up.svg +4 -0
  102. package/src/images/icons/bag.svg +4 -0
  103. package/src/images/icons/ban.svg +4 -0
  104. package/src/images/icons/behance.svg +5 -0
  105. package/src/images/icons/bell.svg +4 -0
  106. package/src/images/icons/bluesky.svg +3 -0
  107. package/src/images/icons/bold.svg +3 -0
  108. package/src/images/icons/bolt.svg +3 -0
  109. package/src/images/icons/bookmark.svg +3 -0
  110. package/src/images/icons/calendar.svg +5 -0
  111. package/src/images/icons/camera.svg +4 -0
  112. package/src/images/icons/cart.svg +5 -0
  113. package/src/images/icons/check.svg +3 -0
  114. package/src/images/icons/chevron-double-left.svg +4 -0
  115. package/src/images/icons/chevron-double-right.svg +4 -0
  116. package/src/images/icons/chevron-down.svg +3 -0
  117. package/src/images/icons/chevron-left.svg +3 -0
  118. package/src/images/icons/chevron-right.svg +3 -0
  119. package/src/images/icons/chevron-up.svg +3 -0
  120. package/src/images/icons/clock.svg +5 -0
  121. package/src/images/icons/close-circle.svg +5 -0
  122. package/src/images/icons/close.svg +4 -0
  123. package/src/images/icons/cloud-download.svg +5 -0
  124. package/src/images/icons/cloud-upload.svg +5 -0
  125. package/src/images/icons/code.svg +4 -0
  126. package/src/images/icons/cog.svg +4 -0
  127. package/src/images/icons/comment.svg +3 -0
  128. package/src/images/icons/commenting.svg +6 -0
  129. package/src/images/icons/comments.svg +4 -0
  130. package/src/images/icons/copy.svg +4 -0
  131. package/src/images/icons/credit-card.svg +4 -0
  132. package/src/images/icons/crosshairs.svg +7 -0
  133. package/src/images/icons/database.svg +6 -0
  134. package/src/images/icons/desktop.svg +6 -0
  135. package/src/images/icons/discord.svg +3 -0
  136. package/src/images/icons/download.svg +5 -0
  137. package/src/images/icons/dribbble.svg +6 -0
  138. package/src/images/icons/etsy.svg +3 -0
  139. package/src/images/icons/expand.svg +6 -0
  140. package/src/images/icons/eye-slash.svg +5 -0
  141. package/src/images/icons/eye.svg +4 -0
  142. package/src/images/icons/facebook.svg +3 -0
  143. package/src/images/icons/file-edit.svg +4 -0
  144. package/src/images/icons/file-pdf.svg +4 -0
  145. package/src/images/icons/file-text.svg +7 -0
  146. package/src/images/icons/file.svg +3 -0
  147. package/src/images/icons/flickr.svg +4 -0
  148. package/src/images/icons/folder.svg +3 -0
  149. package/src/images/icons/forward.svg +3 -0
  150. package/src/images/icons/foursquare.svg +3 -0
  151. package/src/images/icons/future.svg +6 -0
  152. package/src/images/icons/git-branch.svg +6 -0
  153. package/src/images/icons/git-fork.svg +6 -0
  154. package/src/images/icons/github-alt.svg +3 -0
  155. package/src/images/icons/github.svg +3 -0
  156. package/src/images/icons/gitter.svg +6 -0
  157. package/src/images/icons/google.svg +3 -0
  158. package/src/images/icons/grid.svg +11 -0
  159. package/src/images/icons/happy.svg +6 -0
  160. package/src/images/icons/hashtag.svg +3 -0
  161. package/src/images/icons/heart.svg +3 -0
  162. package/src/images/icons/history.svg +6 -0
  163. package/src/images/icons/home.svg +5 -0
  164. package/src/images/icons/image.svg +6 -0
  165. package/src/images/icons/info.svg +4 -0
  166. package/src/images/icons/instagram.svg +5 -0
  167. package/src/images/icons/italic.svg +3 -0
  168. package/src/images/icons/joomla.svg +6 -0
  169. package/src/images/icons/laptop.svg +4 -0
  170. package/src/images/icons/lifesaver.svg +12 -0
  171. package/src/images/icons/link-external.svg +5 -0
  172. package/src/images/icons/link.svg +5 -0
  173. package/src/images/icons/linkedin.svg +4 -0
  174. package/src/images/icons/list.svg +8 -0
  175. package/src/images/icons/location.svg +4 -0
  176. package/src/images/icons/lock.svg +4 -0
  177. package/src/images/icons/mail.svg +4 -0
  178. package/src/images/icons/mastodon.svg +3 -0
  179. package/src/images/icons/menu.svg +5 -0
  180. package/src/images/icons/microphone.svg +6 -0
  181. package/src/images/icons/microsoft.svg +3 -0
  182. package/src/images/icons/minus-circle.svg +4 -0
  183. package/src/images/icons/minus.svg +3 -0
  184. package/src/images/icons/more-vertical.svg +5 -0
  185. package/src/images/icons/more.svg +5 -0
  186. package/src/images/icons/move.svg +8 -0
  187. package/src/images/icons/nut.svg +4 -0
  188. package/src/images/icons/paint-bucket.svg +6 -0
  189. package/src/images/icons/pencil.svg +4 -0
  190. package/src/images/icons/phone-landscape.svg +4 -0
  191. package/src/images/icons/phone.svg +4 -0
  192. package/src/images/icons/pinterest.svg +3 -0
  193. package/src/images/icons/play-circle.svg +4 -0
  194. package/src/images/icons/play.svg +3 -0
  195. package/src/images/icons/plus-circle.svg +5 -0
  196. package/src/images/icons/plus.svg +4 -0
  197. package/src/images/icons/print.svg +7 -0
  198. package/src/images/icons/pull.svg +5 -0
  199. package/src/images/icons/push.svg +5 -0
  200. package/src/images/icons/question.svg +5 -0
  201. package/src/images/icons/quote-right.svg +4 -0
  202. package/src/images/icons/receiver.svg +3 -0
  203. package/src/images/icons/reddit.svg +6 -0
  204. package/src/images/icons/refresh.svg +4 -0
  205. package/src/images/icons/reply.svg +3 -0
  206. package/src/images/icons/rss.svg +5 -0
  207. package/src/images/icons/search.svg +4 -0
  208. package/src/images/icons/server.svg +15 -0
  209. package/src/images/icons/settings.svg +11 -0
  210. package/src/images/icons/shrink.svg +6 -0
  211. package/src/images/icons/sign-in.svg +5 -0
  212. package/src/images/icons/sign-out.svg +5 -0
  213. package/src/images/icons/signal.svg +3 -0
  214. package/src/images/icons/social.svg +7 -0
  215. package/src/images/icons/sorting.svg +6 -0
  216. package/src/images/icons/soundcloud.svg +6 -0
  217. package/src/images/icons/star.svg +3 -0
  218. package/src/images/icons/strikethrough.svg +4 -0
  219. package/src/images/icons/table.svg +6 -0
  220. package/src/images/icons/tablet-landscape.svg +4 -0
  221. package/src/images/icons/tablet.svg +4 -0
  222. package/src/images/icons/tag.svg +4 -0
  223. package/src/images/icons/telegram.svg +3 -0
  224. package/src/images/icons/threads.svg +3 -0
  225. package/src/images/icons/thumbnails.svg +6 -0
  226. package/src/images/icons/tiktok.svg +3 -0
  227. package/src/images/icons/trash.svg +7 -0
  228. package/src/images/icons/triangle-down.svg +3 -0
  229. package/src/images/icons/triangle-left.svg +3 -0
  230. package/src/images/icons/triangle-right.svg +3 -0
  231. package/src/images/icons/triangle-up.svg +3 -0
  232. package/src/images/icons/tripadvisor.svg +19 -0
  233. package/src/images/icons/tumblr.svg +3 -0
  234. package/src/images/icons/tv.svg +4 -0
  235. package/src/images/icons/twitch.svg +5 -0
  236. package/src/images/icons/twitter.svg +3 -0
  237. package/src/images/icons/uikit.svg +4 -0
  238. package/src/images/icons/unlock.svg +4 -0
  239. package/src/images/icons/upload.svg +5 -0
  240. package/src/images/icons/user.svg +4 -0
  241. package/src/images/icons/users.svg +5 -0
  242. package/src/images/icons/video-camera.svg +3 -0
  243. package/src/images/icons/vimeo.svg +3 -0
  244. package/src/images/icons/warning.svg +5 -0
  245. package/src/images/icons/whatsapp.svg +3 -0
  246. package/src/images/icons/wordpress.svg +3 -0
  247. package/src/images/icons/world.svg +7 -0
  248. package/src/images/icons/x.svg +3 -0
  249. package/src/images/icons/xing.svg +4 -0
  250. package/src/images/icons/yelp.svg +15 -0
  251. package/src/images/icons/yootheme.svg +3 -0
  252. package/src/images/icons/youtube.svg +3 -0
  253. package/src/js/api/app.js +12 -0
  254. package/src/js/api/boot.js +84 -0
  255. package/src/js/api/component.js +84 -0
  256. package/src/js/api/computed.js +80 -0
  257. package/src/js/api/events.js +33 -0
  258. package/src/js/api/global.js +74 -0
  259. package/src/js/api/hooks.js +51 -0
  260. package/src/js/api/index.js +8 -0
  261. package/src/js/api/instance.js +66 -0
  262. package/src/js/api/log.js +10 -0
  263. package/src/js/api/observables.js +132 -0
  264. package/src/js/api/observer.js +64 -0
  265. package/src/js/api/options.js +180 -0
  266. package/src/js/api/props.js +107 -0
  267. package/src/js/api/state.js +65 -0
  268. package/src/js/api/update.js +66 -0
  269. package/src/js/api/watch.js +30 -0
  270. package/src/js/components/countdown.js +113 -0
  271. package/src/js/components/filter.js +211 -0
  272. package/src/js/components/index.js +13 -0
  273. package/src/js/components/internal/lightbox-animations.js +40 -0
  274. package/src/js/components/internal/slider-preload.js +14 -0
  275. package/src/js/components/internal/slider-transitioner.js +186 -0
  276. package/src/js/components/internal/slideshow-animations.js +100 -0
  277. package/src/js/components/lightbox-panel.js +482 -0
  278. package/src/js/components/lightbox.js +136 -0
  279. package/src/js/components/notification.js +134 -0
  280. package/src/js/components/parallax.js +86 -0
  281. package/src/js/components/slider-parallax.js +81 -0
  282. package/src/js/components/slider.js +388 -0
  283. package/src/js/components/slideshow-parallax.js +1 -0
  284. package/src/js/components/slideshow.js +44 -0
  285. package/src/js/components/sortable.js +448 -0
  286. package/src/js/components/tooltip.js +183 -0
  287. package/src/js/components/upload.js +248 -0
  288. package/src/js/core/accordion.js +244 -0
  289. package/src/js/core/alert.js +59 -0
  290. package/src/js/core/cover.js +57 -0
  291. package/src/js/core/drop.js +514 -0
  292. package/src/js/core/dropnav.js +449 -0
  293. package/src/js/core/form-custom.js +74 -0
  294. package/src/js/core/grid.js +210 -0
  295. package/src/js/core/height-match.js +79 -0
  296. package/src/js/core/height-placeholder.js +35 -0
  297. package/src/js/core/height-viewport.js +98 -0
  298. package/src/js/core/icon.js +285 -0
  299. package/src/js/core/img.js +157 -0
  300. package/src/js/core/index.js +49 -0
  301. package/src/js/core/inverse.js +173 -0
  302. package/src/js/core/leader.js +52 -0
  303. package/src/js/core/margin.js +125 -0
  304. package/src/js/core/modal.js +179 -0
  305. package/src/js/core/nav.js +11 -0
  306. package/src/js/core/navbar.js +96 -0
  307. package/src/js/core/offcanvas.js +178 -0
  308. package/src/js/core/overflow-auto.js +50 -0
  309. package/src/js/core/overflow-fade.js +67 -0
  310. package/src/js/core/responsive.js +10 -0
  311. package/src/js/core/scroll.js +71 -0
  312. package/src/js/core/scrollspy-nav.js +112 -0
  313. package/src/js/core/scrollspy.js +141 -0
  314. package/src/js/core/sticky.js +509 -0
  315. package/src/js/core/svg.js +101 -0
  316. package/src/js/core/switcher.js +246 -0
  317. package/src/js/core/tab.js +31 -0
  318. package/src/js/core/toggle.js +225 -0
  319. package/src/js/core/video.js +128 -0
  320. package/src/js/mixin/animate.js +34 -0
  321. package/src/js/mixin/class.js +7 -0
  322. package/src/js/mixin/container.js +17 -0
  323. package/src/js/mixin/event.js +5 -0
  324. package/src/js/mixin/i18n.js +21 -0
  325. package/src/js/mixin/internal/animate-fade.js +141 -0
  326. package/src/js/mixin/internal/animate-slide.js +163 -0
  327. package/src/js/mixin/internal/slideshow-animations.js +28 -0
  328. package/src/js/mixin/internal/slideshow-transitioner.js +73 -0
  329. package/src/js/mixin/media.js +53 -0
  330. package/src/js/mixin/modal.js +313 -0
  331. package/src/js/mixin/parallax.js +408 -0
  332. package/src/js/mixin/position.js +113 -0
  333. package/src/js/mixin/slider-autoplay.js +71 -0
  334. package/src/js/mixin/slider-drag.js +236 -0
  335. package/src/js/mixin/slider-nav.js +248 -0
  336. package/src/js/mixin/slider-parallax.js +147 -0
  337. package/src/js/mixin/slider-reactive.js +19 -0
  338. package/src/js/mixin/slider.js +228 -0
  339. package/src/js/mixin/slideshow.js +46 -0
  340. package/src/js/mixin/svg.js +121 -0
  341. package/src/js/mixin/togglable.js +258 -0
  342. package/src/js/uikit-core.js +11 -0
  343. package/src/js/uikit.js +7 -0
  344. package/src/js/util/animation.js +122 -0
  345. package/src/js/util/attr.js +42 -0
  346. package/src/js/util/await.js +7 -0
  347. package/src/js/util/class.js +53 -0
  348. package/src/js/util/dimensions.js +220 -0
  349. package/src/js/util/dom.js +118 -0
  350. package/src/js/util/env.js +12 -0
  351. package/src/js/util/event.js +142 -0
  352. package/src/js/util/fastdom.js +62 -0
  353. package/src/js/util/filter.js +91 -0
  354. package/src/js/util/index.js +17 -0
  355. package/src/js/util/keys.js +11 -0
  356. package/src/js/util/lang.js +280 -0
  357. package/src/js/util/mouse.js +80 -0
  358. package/src/js/util/observer.js +49 -0
  359. package/src/js/util/player.js +98 -0
  360. package/src/js/util/position.js +235 -0
  361. package/src/js/util/scroll.js +64 -0
  362. package/src/js/util/selector.js +143 -0
  363. package/src/js/util/style.js +96 -0
  364. package/src/js/util/svg.js +10 -0
  365. package/src/js/util/viewport.js +251 -0
  366. package/src/less/components/_import.less +96 -0
  367. package/src/less/components/accordion.less +122 -0
  368. package/src/less/components/alert.less +146 -0
  369. package/src/less/components/align.less +142 -0
  370. package/src/less/components/animation.less +283 -0
  371. package/src/less/components/article.less +110 -0
  372. package/src/less/components/background.less +140 -0
  373. package/src/less/components/badge.less +90 -0
  374. package/src/less/components/base.less +740 -0
  375. package/src/less/components/breadcrumb.less +157 -0
  376. package/src/less/components/button.less +540 -0
  377. package/src/less/components/card.less +441 -0
  378. package/src/less/components/close.less +67 -0
  379. package/src/less/components/column.less +143 -0
  380. package/src/less/components/comment.less +160 -0
  381. package/src/less/components/container.less +185 -0
  382. package/src/less/components/countdown.less +112 -0
  383. package/src/less/components/cover.less +76 -0
  384. package/src/less/components/description-list.less +71 -0
  385. package/src/less/components/divider.less +176 -0
  386. package/src/less/components/dotnav.less +177 -0
  387. package/src/less/components/drop.less +78 -0
  388. package/src/less/components/dropbar.less +131 -0
  389. package/src/less/components/dropdown.less +213 -0
  390. package/src/less/components/dropnav.less +43 -0
  391. package/src/less/components/flex.less +308 -0
  392. package/src/less/components/form-range.less +191 -0
  393. package/src/less/components/form.less +930 -0
  394. package/src/less/components/grid.less +419 -0
  395. package/src/less/components/heading.less +289 -0
  396. package/src/less/components/height.less +57 -0
  397. package/src/less/components/icon.less +313 -0
  398. package/src/less/components/iconnav.less +163 -0
  399. package/src/less/components/inverse.less +64 -0
  400. package/src/less/components/label.less +110 -0
  401. package/src/less/components/leader.less +75 -0
  402. package/src/less/components/lightbox.less +215 -0
  403. package/src/less/components/link.less +167 -0
  404. package/src/less/components/list.less +245 -0
  405. package/src/less/components/margin.less +263 -0
  406. package/src/less/components/marker.less +74 -0
  407. package/src/less/components/mixin.less +20 -0
  408. package/src/less/components/modal.less +366 -0
  409. package/src/less/components/nav.less +755 -0
  410. package/src/less/components/navbar.less +681 -0
  411. package/src/less/components/notification.less +191 -0
  412. package/src/less/components/offcanvas.less +329 -0
  413. package/src/less/components/overlay.less +92 -0
  414. package/src/less/components/padding.less +81 -0
  415. package/src/less/components/pagination.less +159 -0
  416. package/src/less/components/placeholder.less +45 -0
  417. package/src/less/components/position.less +241 -0
  418. package/src/less/components/print.less +61 -0
  419. package/src/less/components/progress.less +83 -0
  420. package/src/less/components/search.less +488 -0
  421. package/src/less/components/section.less +257 -0
  422. package/src/less/components/slidenav.less +137 -0
  423. package/src/less/components/slider.less +123 -0
  424. package/src/less/components/slideshow.less +93 -0
  425. package/src/less/components/sortable.less +90 -0
  426. package/src/less/components/spinner.less +74 -0
  427. package/src/less/components/sticky.less +65 -0
  428. package/src/less/components/subnav.less +317 -0
  429. package/src/less/components/svg.less +36 -0
  430. package/src/less/components/switcher.less +47 -0
  431. package/src/less/components/tab.less +222 -0
  432. package/src/less/components/table.less +352 -0
  433. package/src/less/components/text.less +296 -0
  434. package/src/less/components/thumbnav.less +133 -0
  435. package/src/less/components/tile.less +247 -0
  436. package/src/less/components/tooltip.less +79 -0
  437. package/src/less/components/totop.less +86 -0
  438. package/src/less/components/transition.less +172 -0
  439. package/src/less/components/utility.less +584 -0
  440. package/src/less/components/variables.less +123 -0
  441. package/src/less/components/visibility.less +164 -0
  442. package/src/less/components/width.less +489 -0
  443. package/src/less/theme/_import.less +82 -0
  444. package/src/less/theme/accordion.less +82 -0
  445. package/src/less/theme/alert.less +76 -0
  446. package/src/less/theme/align.less +14 -0
  447. package/src/less/theme/animation.less +14 -0
  448. package/src/less/theme/article.less +60 -0
  449. package/src/less/theme/background.less +14 -0
  450. package/src/less/theme/badge.less +29 -0
  451. package/src/less/theme/base.less +134 -0
  452. package/src/less/theme/breadcrumb.less +45 -0
  453. package/src/less/theme/button.less +212 -0
  454. package/src/less/theme/card.less +236 -0
  455. package/src/less/theme/close.less +32 -0
  456. package/src/less/theme/column.less +14 -0
  457. package/src/less/theme/comment.less +72 -0
  458. package/src/less/theme/container.less +14 -0
  459. package/src/less/theme/countdown.less +53 -0
  460. package/src/less/theme/description-list.less +36 -0
  461. package/src/less/theme/divider.less +49 -0
  462. package/src/less/theme/dotnav.less +57 -0
  463. package/src/less/theme/drop.less +14 -0
  464. package/src/less/theme/dropbar.less +44 -0
  465. package/src/less/theme/dropdown.less +59 -0
  466. package/src/less/theme/form-range.less +57 -0
  467. package/src/less/theme/form.less +154 -0
  468. package/src/less/theme/grid.less +28 -0
  469. package/src/less/theme/heading.less +71 -0
  470. package/src/less/theme/height.less +14 -0
  471. package/src/less/theme/icon.less +67 -0
  472. package/src/less/theme/iconnav.less +44 -0
  473. package/src/less/theme/inverse.less +14 -0
  474. package/src/less/theme/label.less +46 -0
  475. package/src/less/theme/leader.less +26 -0
  476. package/src/less/theme/lightbox.less +32 -0
  477. package/src/less/theme/link.less +55 -0
  478. package/src/less/theme/list.less +50 -0
  479. package/src/less/theme/margin.less +14 -0
  480. package/src/less/theme/marker.less +31 -0
  481. package/src/less/theme/modal.less +102 -0
  482. package/src/less/theme/nav.less +142 -0
  483. package/src/less/theme/navbar.less +179 -0
  484. package/src/less/theme/notification.less +44 -0
  485. package/src/less/theme/offcanvas.less +32 -0
  486. package/src/less/theme/overlay.less +33 -0
  487. package/src/less/theme/padding.less +14 -0
  488. package/src/less/theme/pagination.less +41 -0
  489. package/src/less/theme/placeholder.less +29 -0
  490. package/src/less/theme/position.less +14 -0
  491. package/src/less/theme/progress.less +27 -0
  492. package/src/less/theme/search.less +121 -0
  493. package/src/less/theme/section.less +32 -0
  494. package/src/less/theme/slidenav.less +52 -0
  495. package/src/less/theme/slider.less +14 -0
  496. package/src/less/theme/sortable.less +38 -0
  497. package/src/less/theme/spinner.less +14 -0
  498. package/src/less/theme/sticky.less +14 -0
  499. package/src/less/theme/subnav.less +79 -0
  500. package/src/less/theme/tab.less +138 -0
  501. package/src/less/theme/table.less +86 -0
  502. package/src/less/theme/text.less +61 -0
  503. package/src/less/theme/thumbnav.less +65 -0
  504. package/src/less/theme/tile.less +52 -0
  505. package/src/less/theme/tooltip.less +20 -0
  506. package/src/less/theme/totop.less +32 -0
  507. package/src/less/theme/transition.less +14 -0
  508. package/src/less/theme/utility.less +52 -0
  509. package/src/less/theme/variables.less +36 -0
  510. package/src/less/theme/width.less +14 -0
  511. package/src/less/uikit.less +5 -0
  512. package/src/less/uikit.theme.less +11 -0
  513. package/src/scss/components/_import.scss +96 -0
  514. package/src/scss/components/accordion.scss +100 -0
  515. package/src/scss/components/alert.scss +133 -0
  516. package/src/scss/components/align.scss +141 -0
  517. package/src/scss/components/animation.scss +278 -0
  518. package/src/scss/components/article.scss +93 -0
  519. package/src/scss/components/background.scss +138 -0
  520. package/src/scss/components/badge.scss +71 -0
  521. package/src/scss/components/base.scss +561 -0
  522. package/src/scss/components/breadcrumb.scss +115 -0
  523. package/src/scss/components/button.scss +374 -0
  524. package/src/scss/components/card.scss +379 -0
  525. package/src/scss/components/close.scss +53 -0
  526. package/src/scss/components/column.scss +136 -0
  527. package/src/scss/components/comment.scss +153 -0
  528. package/src/scss/components/container.scss +180 -0
  529. package/src/scss/components/countdown.scss +93 -0
  530. package/src/scss/components/cover.scss +78 -0
  531. package/src/scss/components/description-list.scss +68 -0
  532. package/src/scss/components/divider.scss +137 -0
  533. package/src/scss/components/dotnav.scss +144 -0
  534. package/src/scss/components/drop.scss +75 -0
  535. package/src/scss/components/dropbar.scss +123 -0
  536. package/src/scss/components/dropdown.scss +192 -0
  537. package/src/scss/components/dropnav.scss +44 -0
  538. package/src/scss/components/flex.scss +310 -0
  539. package/src/scss/components/form-range.scss +147 -0
  540. package/src/scss/components/form.scss +771 -0
  541. package/src/scss/components/grid.scss +394 -0
  542. package/src/scss/components/heading.scss +227 -0
  543. package/src/scss/components/height.scss +56 -0
  544. package/src/scss/components/icon.scss +228 -0
  545. package/src/scss/components/iconnav.scss +140 -0
  546. package/src/scss/components/inverse.scss +51 -0
  547. package/src/scss/components/label.scss +90 -0
  548. package/src/scss/components/leader.scss +69 -0
  549. package/src/scss/components/lightbox.scss +205 -0
  550. package/src/scss/components/link.scss +131 -0
  551. package/src/scss/components/list.scss +199 -0
  552. package/src/scss/components/margin.scss +257 -0
  553. package/src/scss/components/marker.scss +56 -0
  554. package/src/scss/components/mixin.scss +34 -0
  555. package/src/scss/components/modal.scss +336 -0
  556. package/src/scss/components/nav.scss +533 -0
  557. package/src/scss/components/navbar.scss +579 -0
  558. package/src/scss/components/notification.scss +178 -0
  559. package/src/scss/components/offcanvas.scss +318 -0
  560. package/src/scss/components/overlay.scss +88 -0
  561. package/src/scss/components/padding.scss +78 -0
  562. package/src/scss/components/pagination.scss +127 -0
  563. package/src/scss/components/placeholder.scss +43 -0
  564. package/src/scss/components/position.scss +240 -0
  565. package/src/scss/components/print.scss +63 -0
  566. package/src/scss/components/progress.scss +81 -0
  567. package/src/scss/components/search.scss +367 -0
  568. package/src/scss/components/section.scss +243 -0
  569. package/src/scss/components/slidenav.scss +112 -0
  570. package/src/scss/components/slider.scss +121 -0
  571. package/src/scss/components/slideshow.scss +95 -0
  572. package/src/scss/components/sortable.scss +89 -0
  573. package/src/scss/components/spinner.scss +73 -0
  574. package/src/scss/components/sticky.scss +64 -0
  575. package/src/scss/components/subnav.scss +222 -0
  576. package/src/scss/components/svg.scss +38 -0
  577. package/src/scss/components/switcher.scss +49 -0
  578. package/src/scss/components/tab.scss +186 -0
  579. package/src/scss/components/table.scss +293 -0
  580. package/src/scss/components/text.scss +256 -0
  581. package/src/scss/components/thumbnav.scss +119 -0
  582. package/src/scss/components/tile.scss +230 -0
  583. package/src/scss/components/tooltip.scss +72 -0
  584. package/src/scss/components/totop.scss +64 -0
  585. package/src/scss/components/transition.scss +169 -0
  586. package/src/scss/components/utility.scss +545 -0
  587. package/src/scss/components/variables.scss +84 -0
  588. package/src/scss/components/visibility.scss +166 -0
  589. package/src/scss/components/width.scss +487 -0
  590. package/src/scss/mixins-theme.scss +2298 -0
  591. package/src/scss/mixins.scss +1896 -0
  592. package/src/scss/uikit-theme.scss +8 -0
  593. package/src/scss/uikit.scss +5 -0
  594. package/src/scss/variables-theme.scss +1325 -0
  595. package/src/scss/variables.scss +1190 -0
  596. package/tests/accordion.html +214 -0
  597. package/tests/alert.html +124 -0
  598. package/tests/align.html +133 -0
  599. package/tests/animation.html +252 -0
  600. package/tests/article.html +167 -0
  601. package/tests/background.html +67 -0
  602. package/tests/badge.html +93 -0
  603. package/tests/base.html +244 -0
  604. package/tests/breadcrumb.html +64 -0
  605. package/tests/button.html +257 -0
  606. package/tests/card.html +630 -0
  607. package/tests/close.html +74 -0
  608. package/tests/column.html +71 -0
  609. package/tests/comment.html +209 -0
  610. package/tests/container.html +266 -0
  611. package/tests/countdown.html +716 -0
  612. package/tests/cover.html +167 -0
  613. package/tests/description-list.html +51 -0
  614. package/tests/divider.html +89 -0
  615. package/tests/dotnav.html +139 -0
  616. package/tests/drop.html +782 -0
  617. package/tests/dropbar.html +551 -0
  618. package/tests/dropdown.html +286 -0
  619. package/tests/dropnav.html +856 -0
  620. package/tests/filter.html +287 -0
  621. package/tests/flex.html +182 -0
  622. package/tests/form.html +675 -0
  623. package/tests/grid-masonry.html +80 -0
  624. package/tests/grid-parallax.html +171 -0
  625. package/tests/grid.html +679 -0
  626. package/tests/heading.html +337 -0
  627. package/tests/height-expand.html +32 -0
  628. package/tests/height-viewport.html +253 -0
  629. package/tests/height.html +160 -0
  630. package/tests/icon.html +907 -0
  631. package/tests/iconnav.html +40 -0
  632. package/tests/image.html +642 -0
  633. package/tests/images/avatar.jpg +0 -0
  634. package/tests/images/dark.jpg +0 -0
  635. package/tests/images/icons.svg +24 -0
  636. package/tests/images/image-type.avif +0 -0
  637. package/tests/images/image-type.jpeg +0 -0
  638. package/tests/images/image-type.webp +0 -0
  639. package/tests/images/light.jpg +0 -0
  640. package/tests/images/photo.jpg +0 -0
  641. package/tests/images/photo2.jpg +0 -0
  642. package/tests/images/photo3.jpg +0 -0
  643. package/tests/images/size-h.jpg +0 -0
  644. package/tests/images/size-v.jpg +0 -0
  645. package/tests/images/size1.jpg +0 -0
  646. package/tests/images/size2.jpg +0 -0
  647. package/tests/images/slider1.jpg +0 -0
  648. package/tests/images/slider2.jpg +0 -0
  649. package/tests/images/slider3.jpg +0 -0
  650. package/tests/images/slider4.jpg +0 -0
  651. package/tests/images/slider5.jpg +0 -0
  652. package/tests/index.html +905 -0
  653. package/tests/js/index.js +171 -0
  654. package/tests/label.html +28 -0
  655. package/tests/leader.html +67 -0
  656. package/tests/lightbox.html +689 -0
  657. package/tests/link.html +121 -0
  658. package/tests/list.html +490 -0
  659. package/tests/margin.html +208 -0
  660. package/tests/marker.html +87 -0
  661. package/tests/modal.html +497 -0
  662. package/tests/nav.html +487 -0
  663. package/tests/navbar.html +2746 -0
  664. package/tests/notification.html +137 -0
  665. package/tests/offcanvas.html +780 -0
  666. package/tests/overlay.html +102 -0
  667. package/tests/padding.html +52 -0
  668. package/tests/pagination.html +140 -0
  669. package/tests/parallax.html +298 -0
  670. package/tests/placeholder.html +33 -0
  671. package/tests/position.html +436 -0
  672. package/tests/progress.html +59 -0
  673. package/tests/scroll.html +118 -0
  674. package/tests/scrollspy.html +593 -0
  675. package/tests/search.html +535 -0
  676. package/tests/section.html +384 -0
  677. package/tests/slidenav.html +333 -0
  678. package/tests/slider.html +661 -0
  679. package/tests/slideshow.html +565 -0
  680. package/tests/sortable.html +300 -0
  681. package/tests/spinner.html +25 -0
  682. package/tests/sticky-navbar.html +1421 -0
  683. package/tests/sticky-parallax.html +279 -0
  684. package/tests/sticky.html +429 -0
  685. package/tests/subnav.html +282 -0
  686. package/tests/svg.html +78 -0
  687. package/tests/switcher.html +394 -0
  688. package/tests/tab.html +266 -0
  689. package/tests/table.html +329 -0
  690. package/tests/text.html +155 -0
  691. package/tests/thumbnav.html +64 -0
  692. package/tests/tile.html +226 -0
  693. package/tests/toggle.html +186 -0
  694. package/tests/tooltip.html +126 -0
  695. package/tests/totop.html +68 -0
  696. package/tests/transition.html +246 -0
  697. package/tests/upload.html +290 -0
  698. package/tests/utility.html +644 -0
  699. package/tests/video.html +206 -0
  700. package/tests/visibility.html +112 -0
  701. package/tests/width.html +130 -0
package/tests/grid.html ADDED
@@ -0,0 +1,679 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-gb" dir="ltr">
3
+
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1">
7
+ <title>Grid - UIkit tests</title>
8
+ <script src="js/test.js"></script>
9
+ <style>
10
+
11
+ .uk-panel {
12
+ padding: 10px;
13
+ text-align: center;
14
+ }
15
+
16
+ :nth-child(10n-9) > .uk-panel { background: rgba(0,0,0,0.1); }
17
+ :nth-child(10n-8) > .uk-panel { background: rgba(0,0,0,0.15); }
18
+ :nth-child(10n-7) > .uk-panel { background: rgba(0,0,0,0.2); }
19
+ :nth-child(10n-6) > .uk-panel { background: rgba(0,0,0,0.25); }
20
+ :nth-child(10n-5) > .uk-panel { background: rgba(0,0,0,0.3); }
21
+ :nth-child(10n-4) > .uk-panel { background: rgba(0,0,0,0.35); }
22
+ :nth-child(10n-3) > .uk-panel { background: rgba(0,0,0,0.40); }
23
+ :nth-child(10n-2) > .uk-panel { background: rgba(0,0,0,0.45); }
24
+ :nth-child(10n-1) > .uk-panel { background: rgba(0,0,0,0.50); }
25
+ :nth-child(10n) > .uk-panel { background: rgba(0,0,0,0.55); }
26
+
27
+ </style>
28
+ </head>
29
+
30
+ <body>
31
+
32
+ <div class="uk-container">
33
+
34
+ <h1>Grid</h1>
35
+
36
+ <div class="uk-child-width-1-2" uk-grid>
37
+ <div><div class="uk-panel">1-2</div></div>
38
+ <div><div class="uk-panel">1-2</div></div>
39
+ </div>
40
+
41
+ <div class="uk-child-width-1-2@m uk-grid-match" uk-grid>
42
+ <div><div class="uk-panel">1-2-M</div></div>
43
+ <div>
44
+ <div class="uk-child-width-1-2@l" uk-grid>
45
+ <div><div class="uk-panel">1-2-L</div></div>
46
+ <div><div class="uk-panel">1-2-L</div></div>
47
+ </div>
48
+ </div>
49
+ </div>
50
+
51
+ <div class="uk-child-width-1-4@m uk-grid-match" uk-grid>
52
+ <div><div class="uk-panel">1-4-M<br>…<br>…</div></div>
53
+ <div><div class="uk-panel">1-4-M</div></div>
54
+ <div class="uk-width-1-2@m">
55
+ <div class="uk-child-width-1-2@l uk-grid-match" uk-grid>
56
+ <div><div class="uk-panel">1-2-L<br>…</div></div>
57
+ <div><div class="uk-panel">1-2-L</div></div>
58
+ </div>
59
+ </div>
60
+ </div>
61
+
62
+ <div class="uk-child-width-1-2@m uk-grid-match" uk-grid>
63
+ <div><div class="uk-panel">1-2-M</div></div>
64
+ <div>
65
+ <div class="uk-panel">1-2-M</div>
66
+ <div class="uk-panel uk-margin-medium">1-2-M</div>
67
+ </div>
68
+ </div>
69
+
70
+ <div uk-grid>
71
+ <div class="uk-width-1-2@m"><div class="uk-panel">1-2-M</div></div>
72
+ <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
73
+ <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
74
+ <div class="uk-width-1-5@m"><div class="uk-panel">1-5-M</div></div>
75
+ <div class="uk-width-1-5@m"><div class="uk-panel">1-5-M</div></div>
76
+ <div class="uk-width-3-5@m"><div class="uk-panel">3-5-M</div></div>
77
+ </div>
78
+
79
+ <div uk-grid>
80
+ <div class="uk-width-auto@m"><div class="uk-panel">Auto-M</div></div>
81
+ <div class="uk-width-1-3@m"><div class="uk-panel">1-3-M</div></div>
82
+ <div class="uk-width-expand@m"><div class="uk-panel">Expand-M</div></div>
83
+ </div>
84
+
85
+ <h3>Divider</h3>
86
+
87
+ <div class="uk-grid-divider uk-child-width-1-2" uk-grid>
88
+ <div><div class="uk-panel">1-2</div></div>
89
+ <div><div class="uk-panel">1-2</div></div>
90
+ </div>
91
+
92
+ <div class="uk-grid-divider uk-child-width-1-2@m uk-grid-match" uk-grid>
93
+ <div><div class="uk-panel">1-2-M</div></div>
94
+ <div>
95
+ <div class="uk-grid-divider uk-child-width-1-2@l" uk-grid>
96
+ <div><div class="uk-panel">1-2-L</div></div>
97
+ <div><div class="uk-panel">1-2-L</div></div>
98
+ </div>
99
+ </div>
100
+ </div>
101
+
102
+ <div class="uk-grid-divider uk-child-width-1-4@m uk-grid-match" uk-grid>
103
+ <div><div class="uk-panel">1-4-M<br>…<br>…</div></div>
104
+ <div><div class="uk-panel">1-4-M</div></div>
105
+ <div class="uk-width-1-2@m">
106
+ <div class="uk-grid-divider uk-child-width-1-2@l uk-grid-match" uk-grid>
107
+ <div><div class="uk-panel">1-2-L<br>…</div></div>
108
+ <div><div class="uk-panel">1-2-L</div></div>
109
+ </div>
110
+ </div>
111
+ </div>
112
+
113
+ <div class="uk-grid-divider uk-child-width-1-2@m uk-grid-match" uk-grid>
114
+ <div><div class="uk-panel">1-2-M</div></div>
115
+ <div>
116
+ <div class="uk-panel">1-2-M</div>
117
+ <div class="uk-panel uk-margin-medium">1-2-M</div>
118
+ </div>
119
+ </div>
120
+
121
+ <div class="uk-grid-divider" uk-grid>
122
+ <div class="uk-width-1-2@m"><div class="uk-panel">1-2-M</div></div>
123
+ <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
124
+ <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
125
+ <div class="uk-width-1-5@m"><div class="uk-panel">1-5-M</div></div>
126
+ <div class="uk-width-1-5@m"><div class="uk-panel">1-5-M</div></div>
127
+ <div class="uk-width-3-5@m"><div class="uk-panel">3-5-M</div></div>
128
+ </div>
129
+
130
+ <div class="uk-grid-divider" uk-grid>
131
+ <div class="uk-width-auto@m"><div class="uk-panel">Auto-M</div></div>
132
+ <div class="uk-width-1-3@m"><div class="uk-panel">1-3-M</div></div>
133
+ <div class="uk-width-expand@m"><div class="uk-panel">Expand-M</div></div>
134
+ </div>
135
+
136
+ <h2>Small</h2>
137
+
138
+ <div class="uk-grid-small uk-child-width-1-2" uk-grid>
139
+ <div><div class="uk-panel">1-2</div></div>
140
+ <div><div class="uk-panel">1-2</div></div>
141
+ </div>
142
+
143
+ <div class="uk-grid-small uk-child-width-1-2@m uk-grid-match" uk-grid>
144
+ <div><div class="uk-panel">1-2-M</div></div>
145
+ <div>
146
+ <div class="uk-grid-small uk-child-width-1-2@l" uk-grid>
147
+ <div><div class="uk-panel">1-2-L</div></div>
148
+ <div><div class="uk-panel">1-2-L</div></div>
149
+ </div>
150
+ </div>
151
+ </div>
152
+
153
+ <div class="uk-grid-small uk-child-width-1-4@m uk-grid-match" uk-grid>
154
+ <div><div class="uk-panel">1-4-M<br>…<br>…</div></div>
155
+ <div><div class="uk-panel">1-4-M</div></div>
156
+ <div class="uk-width-1-2@m">
157
+ <div class="uk-grid-small uk-child-width-1-2@l uk-grid-match" uk-grid>
158
+ <div><div class="uk-panel">1-2-L<br>…</div></div>
159
+ <div><div class="uk-panel">1-2-L</div></div>
160
+ </div>
161
+ </div>
162
+ </div>
163
+
164
+ <div class="uk-grid-small uk-child-width-1-2@m uk-grid-match" uk-grid>
165
+ <div><div class="uk-panel">1-2-M</div></div>
166
+ <div>
167
+ <div class="uk-panel">1-2-M</div>
168
+ <div class="uk-panel uk-margin">1-2-M</div>
169
+ </div>
170
+ </div>
171
+
172
+ <div class="uk-grid-small" uk-grid>
173
+ <div class="uk-width-1-2@m"><div class="uk-panel">1-2-M</div></div>
174
+ <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
175
+ <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
176
+ <div class="uk-width-1-5@m"><div class="uk-panel">1-5-M</div></div>
177
+ <div class="uk-width-1-5@m"><div class="uk-panel">1-5-M</div></div>
178
+ <div class="uk-width-3-5@m"><div class="uk-panel">3-5-M</div></div>
179
+ </div>
180
+
181
+ <div class="uk-grid-small" uk-grid>
182
+ <div class="uk-width-auto@m"><div class="uk-panel">Auto-M</div></div>
183
+ <div class="uk-width-1-3@m"><div class="uk-panel">1-3-M</div></div>
184
+ <div class="uk-width-expand@m"><div class="uk-panel">Expand-M</div></div>
185
+ </div>
186
+
187
+ <h3>Divider</h3>
188
+
189
+ <div class="uk-grid-small uk-grid-divider uk-child-width-1-2" uk-grid>
190
+ <div><div class="uk-panel">1-2</div></div>
191
+ <div><div class="uk-panel">1-2</div></div>
192
+ </div>
193
+
194
+ <div class="uk-grid-small uk-grid-divider uk-child-width-1-2@m uk-grid-match" uk-grid>
195
+ <div><div class="uk-panel">1-2-M</div></div>
196
+ <div>
197
+ <div class="uk-grid-small uk-grid-divider uk-child-width-1-2@l" uk-grid>
198
+ <div><div class="uk-panel">1-2-L</div></div>
199
+ <div><div class="uk-panel">1-2-L</div></div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+
204
+ <div class="uk-grid-small uk-grid-divider uk-child-width-1-4@m uk-grid-match" uk-grid>
205
+ <div><div class="uk-panel">1-4-M<br>…<br>…</div></div>
206
+ <div><div class="uk-panel">1-4-M</div></div>
207
+ <div class="uk-width-1-2@m">
208
+ <div class="uk-grid-small uk-grid-divider uk-child-width-1-2@l uk-grid-match" uk-grid>
209
+ <div><div class="uk-panel">1-2-L<br>…</div></div>
210
+ <div><div class="uk-panel">1-2-L</div></div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+
215
+ <div class="uk-grid-small uk-grid-divider uk-child-width-1-2@m uk-grid-match" uk-grid>
216
+ <div><div class="uk-panel">1-2-M</div></div>
217
+ <div>
218
+ <div class="uk-panel">1-2-M</div>
219
+ <div class="uk-panel uk-margin">1-2-M</div>
220
+ </div>
221
+ </div>
222
+
223
+ <div class="uk-grid-small uk-grid-divider" uk-grid>
224
+ <div class="uk-width-1-2@m"><div class="uk-panel">1-2-M</div></div>
225
+ <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
226
+ <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
227
+ <div class="uk-width-1-5@m"><div class="uk-panel">1-5-M</div></div>
228
+ <div class="uk-width-1-5@m"><div class="uk-panel">1-5-M</div></div>
229
+ <div class="uk-width-3-5@m"><div class="uk-panel">3-5-M</div></div>
230
+ </div>
231
+
232
+ <div class="uk-grid-small uk-grid-divider" uk-grid>
233
+ <div class="uk-width-auto@m"><div class="uk-panel">Auto-M</div></div>
234
+ <div class="uk-width-1-3@m"><div class="uk-panel">1-3-M</div></div>
235
+ <div class="uk-width-expand@m"><div class="uk-panel">Expand-M</div></div>
236
+ </div>
237
+
238
+ <h2>Medium</h2>
239
+
240
+ <div class="uk-grid-medium uk-child-width-1-2" uk-grid>
241
+ <div><div class="uk-panel">1-2</div></div>
242
+ <div><div class="uk-panel">1-2</div></div>
243
+ </div>
244
+
245
+ <div class="uk-grid-medium uk-child-width-1-2@m uk-grid-match" uk-grid>
246
+ <div><div class="uk-panel">1-2-M</div></div>
247
+ <div>
248
+ <div class="uk-grid-medium uk-child-width-1-2@l" uk-grid>
249
+ <div><div class="uk-panel">1-2-L</div></div>
250
+ <div><div class="uk-panel">1-2-L</div></div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+
255
+ <div class="uk-grid-medium uk-child-width-1-4@m uk-grid-match" uk-grid>
256
+ <div><div class="uk-panel">1-4-M<br>…<br>…</div></div>
257
+ <div><div class="uk-panel">1-4-M</div></div>
258
+ <div class="uk-width-1-2@m">
259
+ <div class="uk-grid-medium uk-child-width-1-2@l uk-grid-match" uk-grid>
260
+ <div><div class="uk-panel">1-2-L<br>…</div></div>
261
+ <div><div class="uk-panel">1-2-L</div></div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+
266
+ <div class="uk-grid-medium uk-child-width-1-2@m uk-grid-match" uk-grid>
267
+ <div><div class="uk-panel">1-2-M</div></div>
268
+ <div>
269
+ <div class="uk-panel">1-2-M</div>
270
+ <div class="uk-panel uk-margin-medium">1-2-M</div>
271
+ </div>
272
+ </div>
273
+
274
+ <div class="uk-grid-medium" uk-grid>
275
+ <div class="uk-width-1-2@m"><div class="uk-panel">1-2-M</div></div>
276
+ <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
277
+ <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
278
+ <div class="uk-width-1-5@m"><div class="uk-panel">1-5-M</div></div>
279
+ <div class="uk-width-1-5@m"><div class="uk-panel">1-5-M</div></div>
280
+ <div class="uk-width-3-5@m"><div class="uk-panel">3-5-M</div></div>
281
+ </div>
282
+
283
+ <div class="uk-grid-medium" uk-grid>
284
+ <div class="uk-width-auto@m"><div class="uk-panel">Auto-M</div></div>
285
+ <div class="uk-width-1-3@m"><div class="uk-panel">1-3-M</div></div>
286
+ <div class="uk-width-expand@m"><div class="uk-panel">Expand-M</div></div>
287
+ </div>
288
+
289
+ <h3>Divider</h3>
290
+
291
+ <div class="uk-grid-medium uk-grid-divider uk-child-width-1-2" uk-grid>
292
+ <div><div class="uk-panel">1-2</div></div>
293
+ <div><div class="uk-panel">1-2</div></div>
294
+ </div>
295
+
296
+ <div class="uk-grid-medium uk-grid-divider uk-child-width-1-2@m uk-grid-match" uk-grid>
297
+ <div><div class="uk-panel">1-2-M</div></div>
298
+ <div>
299
+ <div class="uk-grid-medium uk-grid-divider uk-child-width-1-2@l" uk-grid>
300
+ <div><div class="uk-panel">1-2-L</div></div>
301
+ <div><div class="uk-panel">1-2-L</div></div>
302
+ </div>
303
+ </div>
304
+ </div>
305
+
306
+ <div class="uk-grid-medium uk-grid-divider uk-child-width-1-4@m uk-grid-match" uk-grid>
307
+ <div><div class="uk-panel">1-4-M<br>…<br>…</div></div>
308
+ <div><div class="uk-panel">1-4-M</div></div>
309
+ <div class="uk-width-1-2@m">
310
+ <div class="uk-grid-medium uk-grid-divider uk-child-width-1-2@l uk-grid-match" uk-grid>
311
+ <div><div class="uk-panel">1-2-L<br>…</div></div>
312
+ <div><div class="uk-panel">1-2-L</div></div>
313
+ </div>
314
+ </div>
315
+ </div>
316
+
317
+ <div class="uk-grid-medium uk-grid-divider uk-child-width-1-2@m uk-grid-match" uk-grid>
318
+ <div><div class="uk-panel">1-2-M</div></div>
319
+ <div>
320
+ <div class="uk-panel">1-2-M</div>
321
+ <div class="uk-panel uk-margin-medium">1-2-M</div>
322
+ </div>
323
+ </div>
324
+
325
+ <div class="uk-grid-medium uk-grid-divider" uk-grid>
326
+ <div class="uk-width-1-2@m"><div class="uk-panel">1-2-M</div></div>
327
+ <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
328
+ <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
329
+ <div class="uk-width-1-5@m"><div class="uk-panel">1-5-M</div></div>
330
+ <div class="uk-width-1-5@m"><div class="uk-panel">1-5-M</div></div>
331
+ <div class="uk-width-3-5@m"><div class="uk-panel">3-5-M</div></div>
332
+ </div>
333
+
334
+ <div class="uk-grid-medium uk-grid-divider" uk-grid>
335
+ <div class="uk-width-auto@m"><div class="uk-panel">Auto-M</div></div>
336
+ <div class="uk-width-1-3@m"><div class="uk-panel">1-3-M</div></div>
337
+ <div class="uk-width-expand@m"><div class="uk-panel">Expand-M</div></div>
338
+ </div>
339
+
340
+ <h2>Large</h2>
341
+
342
+ <div class="uk-grid-large uk-child-width-1-2" uk-grid>
343
+ <div><div class="uk-panel">1-2</div></div>
344
+ <div><div class="uk-panel">1-2</div></div>
345
+ </div>
346
+
347
+ <div class="uk-grid-large uk-child-width-1-2@m uk-grid-match" uk-grid>
348
+ <div><div class="uk-panel">1-2-M</div></div>
349
+ <div>
350
+ <div class="uk-grid-large uk-child-width-1-2@l" uk-grid>
351
+ <div><div class="uk-panel">1-2-L</div></div>
352
+ <div><div class="uk-panel">1-2-L</div></div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+
357
+ <div class="uk-grid-large uk-child-width-1-4@m uk-grid-match" uk-grid>
358
+ <div><div class="uk-panel">1-4-M<br>…<br>…</div></div>
359
+ <div><div class="uk-panel">1-4-M</div></div>
360
+ <div class="uk-width-1-2@m">
361
+ <div class="uk-grid-large uk-child-width-1-2@l uk-grid-match" uk-grid>
362
+ <div><div class="uk-panel">1-2-L<br>…</div></div>
363
+ <div><div class="uk-panel">1-2-L</div></div>
364
+ </div>
365
+ </div>
366
+ </div>
367
+
368
+ <div class="uk-grid-large uk-child-width-1-2@m uk-grid-match" uk-grid>
369
+ <div><div class="uk-panel">1-2-M</div></div>
370
+ <div>
371
+ <div class="uk-panel">1-2-M</div>
372
+ <div class="uk-panel uk-margin-large">1-2-M</div>
373
+ </div>
374
+ </div>
375
+
376
+ <div class="uk-grid-large" uk-grid>
377
+ <div class="uk-width-1-2@m"><div class="uk-panel">1-2-M</div></div>
378
+ <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
379
+ <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
380
+ <div class="uk-width-1-5@m"><div class="uk-panel">1-5-M</div></div>
381
+ <div class="uk-width-1-5@m"><div class="uk-panel">1-5-M</div></div>
382
+ <div class="uk-width-3-5@m"><div class="uk-panel">3-5-M</div></div>
383
+ </div>
384
+
385
+ <div class="uk-grid-large" uk-grid>
386
+ <div class="uk-width-auto@m"><div class="uk-panel">Auto-M</div></div>
387
+ <div class="uk-width-1-3@m"><div class="uk-panel">1-3-M</div></div>
388
+ <div class="uk-width-expand@m"><div class="uk-panel">Expand-M</div></div>
389
+ </div>
390
+
391
+ <h3>Divider</h3>
392
+
393
+ <div class="uk-grid-large uk-grid-divider uk-child-width-1-2" uk-grid>
394
+ <div><div class="uk-panel">1-2</div></div>
395
+ <div><div class="uk-panel">1-2</div></div>
396
+ </div>
397
+
398
+ <div class="uk-grid-large uk-grid-divider uk-child-width-1-2@m uk-grid-match" uk-grid>
399
+ <div><div class="uk-panel">1-2-M</div></div>
400
+ <div>
401
+ <div class="uk-grid-large uk-grid-divider uk-child-width-1-2@l" uk-grid>
402
+ <div><div class="uk-panel">1-2-L</div></div>
403
+ <div><div class="uk-panel">1-2-L</div></div>
404
+ </div>
405
+ </div>
406
+ </div>
407
+
408
+ <div class="uk-grid-large uk-grid-divider uk-child-width-1-4@m uk-grid-match" uk-grid>
409
+ <div><div class="uk-panel">1-4-M<br>…<br>…</div></div>
410
+ <div><div class="uk-panel">1-4-M</div></div>
411
+ <div class="uk-width-1-2@m">
412
+ <div class="uk-grid-large uk-grid-divider uk-child-width-1-2@l uk-grid-match" uk-grid>
413
+ <div><div class="uk-panel">1-2-L<br>…</div></div>
414
+ <div><div class="uk-panel">1-2-L</div></div>
415
+ </div>
416
+ </div>
417
+ </div>
418
+
419
+ <div class="uk-grid-large uk-grid-divider uk-child-width-1-2@m uk-grid-match" uk-grid>
420
+ <div><div class="uk-panel">1-2-M</div></div>
421
+ <div>
422
+ <div class="uk-panel">1-2-M</div>
423
+ <div class="uk-panel uk-margin-large">1-2-M</div>
424
+ </div>
425
+ </div>
426
+
427
+ <div class="uk-grid-large uk-grid-divider" uk-grid>
428
+ <div class="uk-width-1-2@m"><div class="uk-panel">1-2-M</div></div>
429
+ <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
430
+ <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
431
+ <div class="uk-width-1-5@m"><div class="uk-panel">1-5-M</div></div>
432
+ <div class="uk-width-1-5@m"><div class="uk-panel">1-5-M</div></div>
433
+ <div class="uk-width-3-5@m"><div class="uk-panel">3-5-M</div></div>
434
+ </div>
435
+
436
+ <div class="uk-grid-large uk-grid-divider" uk-grid>
437
+ <div class="uk-width-auto@m"><div class="uk-panel">Auto-M</div></div>
438
+ <div class="uk-width-1-3@m"><div class="uk-panel">1-3-M</div></div>
439
+ <div class="uk-width-expand@m"><div class="uk-panel">Expand-M</div></div>
440
+ </div>
441
+
442
+ <h2>Collapse</h2>
443
+
444
+ <div class="uk-grid-collapse uk-child-width-1-2" uk-grid>
445
+ <div><div class="uk-panel">1-2</div></div>
446
+ <div><div class="uk-panel">1-2</div></div>
447
+ </div>
448
+
449
+ <div class="uk-grid-collapse uk-child-width-1-2@m uk-grid-match" uk-grid>
450
+ <div><div class="uk-panel">1-2-M</div></div>
451
+ <div>
452
+ <div class="uk-grid-collapse uk-child-width-1-2@l" uk-grid>
453
+ <div><div class="uk-panel">1-2-L</div></div>
454
+ <div><div class="uk-panel">1-2-L</div></div>
455
+ </div>
456
+ </div>
457
+ </div>
458
+
459
+ <div class="uk-grid-collapse uk-child-width-1-4@m uk-grid-match" uk-grid>
460
+ <div><div class="uk-panel">1-4-M<br>…<br>…</div></div>
461
+ <div><div class="uk-panel">1-4-M</div></div>
462
+ <div class="uk-width-1-2@m">
463
+ <div class="uk-grid-collapse uk-child-width-1-2@l uk-grid-match" uk-grid>
464
+ <div><div class="uk-panel">1-2-L<br>…</div></div>
465
+ <div><div class="uk-panel">1-2-L</div></div>
466
+ </div>
467
+ </div>
468
+ </div>
469
+
470
+ <div class="uk-grid-collapse uk-child-width-1-2@m uk-grid-match" uk-grid>
471
+ <div><div class="uk-panel">1-2-M</div></div>
472
+ <div>
473
+ <div class="uk-panel">1-2-M</div>
474
+ <div class="uk-panel">1-2-M</div>
475
+ </div>
476
+ </div>
477
+
478
+ <div class="uk-grid-collapse" uk-grid>
479
+ <div class="uk-width-1-2@m"><div class="uk-panel">1-2-M</div></div>
480
+ <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
481
+ <div class="uk-width-1-4@m"><div class="uk-panel">1-4-M</div></div>
482
+ <div class="uk-width-1-5@m"><div class="uk-panel">1-5-M</div></div>
483
+ <div class="uk-width-1-5@m"><div class="uk-panel">1-5-M</div></div>
484
+ <div class="uk-width-3-5@m"><div class="uk-panel">3-5-M</div></div>
485
+ </div>
486
+
487
+ <div class="uk-grid-collapse" uk-grid>
488
+ <div class="uk-width-auto@m"><div class="uk-panel">Auto-M</div></div>
489
+ <div class="uk-width-1-3@m"><div class="uk-panel">1-3-M</div></div>
490
+ <div class="uk-width-expand@m"><div class="uk-panel">Expand-M</div></div>
491
+ </div>
492
+
493
+ <h2>Column and Row</h2>
494
+
495
+ <h3>Small / Large</h3>
496
+
497
+ <div class="uk-grid-column-small uk-grid-row-large uk-child-width-1-4@m" uk-grid>
498
+ <div><div class="uk-panel">1-4-M</div></div>
499
+ <div><div class="uk-panel">1-4-M</div></div>
500
+ <div><div class="uk-panel">1-4-M</div></div>
501
+ <div><div class="uk-panel">1-4-M</div></div>
502
+ <div><div class="uk-panel">1-4-M</div></div>
503
+ <div><div class="uk-panel">1-4-M</div></div>
504
+ <div><div class="uk-panel">1-4-M</div></div>
505
+ <div><div class="uk-panel">1-4-M</div></div>
506
+ </div>
507
+
508
+ <h3>Medium / Small</h3>
509
+
510
+ <div class="uk-grid-divider uk-grid-column-medium uk-grid-row-small uk-child-width-1-4@m" uk-grid>
511
+ <div><div class="uk-panel">1-4-M</div></div>
512
+ <div><div class="uk-panel">1-4-M</div></div>
513
+ <div><div class="uk-panel">1-4-M</div></div>
514
+ <div><div class="uk-panel">1-4-M</div></div>
515
+ <div><div class="uk-panel">1-4-M</div></div>
516
+ <div><div class="uk-panel">1-4-M</div></div>
517
+ <div><div class="uk-panel">1-4-M</div></div>
518
+ <div><div class="uk-panel">1-4-M</div></div>
519
+ </div>
520
+
521
+ <h2>Divider</h2>
522
+
523
+ <h3>Order</h3>
524
+
525
+ <div class="uk-grid-divider uk-child-width-1-2@m" uk-grid>
526
+ <div>
527
+
528
+ <div class="uk-grid-small uk-grid-divider uk-child-width-1-4@m" uk-grid>
529
+ <div><div class="uk-panel">First</div></div>
530
+ <div class="uk-flex-last"><div class="uk-panel">Second</div></div>
531
+ <div><div class="uk-panel">Third</div></div>
532
+ <div class="uk-flex-first"><div class="uk-panel">Last</div></div>
533
+ </div>
534
+
535
+ </div>
536
+ <div>
537
+
538
+ <div class="uk-grid-small uk-grid-divider uk-child-width-1-4@m" uk-grid>
539
+ <div class="uk-flex-last"><div class="uk-panel">First</div></div>
540
+ <div><div class="uk-panel">Second</div></div>
541
+ <div><div class="uk-panel">Third</div></div>
542
+ <div class="uk-flex-first"><div class="uk-panel">Last</div></div>
543
+ </div>
544
+
545
+ </div>
546
+ </div>
547
+
548
+ <h3>Wrap + Order</h3>
549
+
550
+ <div class="uk-grid-divider uk-child-width-1-4@m" uk-grid>
551
+ <div>
552
+
553
+ <div class="uk-grid-small uk-grid-divider uk-child-width-1-2@m uk-flex-middle" uk-grid>
554
+ <div><div class="uk-panel">First</div></div>
555
+ <div><div class="uk-panel">Last<br>…<br>…</div></div>
556
+ <div><div class="uk-panel">Wrap</div></div>
557
+ </div>
558
+
559
+ </div>
560
+ <div>
561
+
562
+ <div class="uk-grid-small uk-grid-divider uk-child-width-1-2@m uk-flex-middle" uk-grid>
563
+ <div><div class="uk-panel">First</div></div>
564
+ <div class="uk-flex-first"><div class="uk-panel">Last<br>…<br>…</div></div>
565
+ <div><div class="uk-panel">Wrap</div></div>
566
+ </div>
567
+
568
+ </div>
569
+ <div>
570
+
571
+ <div class="uk-grid-small uk-grid-divider uk-child-width-1-2@m uk-flex-middle" uk-grid>
572
+ <div><div class="uk-panel">First<br>…<br>…</div></div>
573
+ <div class="uk-flex-first"><div class="uk-panel">Last</div></div>
574
+ <div><div class="uk-panel">Wrap</div></div>
575
+ </div>
576
+
577
+ </div>
578
+ <div>
579
+
580
+ <div class="uk-grid-small uk-grid-divider uk-child-width-1-2@m uk-flex-middle" uk-grid>
581
+ <div class="uk-flex-last"><div class="uk-panel">First</div></div>
582
+ <div><div class="uk-panel">Last<br>…<br>…</div></div>
583
+ <div><div class="uk-panel">Wrap</div></div>
584
+ </div>
585
+
586
+ </div>
587
+ </div>
588
+
589
+ <div class="uk-grid-divider uk-child-width-1-2@m" uk-grid>
590
+ <div>
591
+
592
+ <h3>Stack</h3>
593
+
594
+ <div class="uk-grid-small uk-grid-divider uk-child-width-1-1" uk-grid>
595
+ <div><div class="uk-panel">First</div></div>
596
+ <div><div class="uk-panel">Second</div></div>
597
+ <div class="uk-flex-first"><div class="uk-panel">Last</div></div>
598
+ </div>
599
+
600
+ </div>
601
+ <div>
602
+
603
+ <h3>Align</h3>
604
+
605
+ <div class="uk-grid-small uk-grid-divider uk-child-width-1-4@s uk-flex-center" uk-grid>
606
+ <div class="uk-flex-last"><div class="uk-panel">First</div></div>
607
+ <div><div class="uk-panel">Second</div></div>
608
+ <div><div class="uk-panel">Third</div></div>
609
+ <div><div class="uk-panel">Forth</div></div>
610
+ <div class="uk-flex-first"><div class="uk-panel">Fifth</div></div>
611
+ <div><div class="uk-panel">Last</div></div>
612
+ </div>
613
+
614
+ </div>
615
+ </div>
616
+
617
+ <h2>JavaScript Options</h2>
618
+
619
+ <div class="uk-overflow-auto">
620
+ <table class="uk-table uk-table-striped">
621
+ <thead>
622
+ <tr>
623
+ <th>Option</th>
624
+ <th>Value</th>
625
+ <th>Default</th>
626
+ <th>Description</th>
627
+ </tr>
628
+ </thead>
629
+ <tbody>
630
+ <tr>
631
+ <td><code>margin</code></td>
632
+ <td>String</td>
633
+ <td>uk-grid-margin</td>
634
+ <td>This class is added to items that break into the next row, typically to create margin to the previous row.</td>
635
+ </tr>
636
+ <tr>
637
+ <td><code>first-column</code></td>
638
+ <td>String</td>
639
+ <td>uk-first-column</td>
640
+ <td>This class is added to the first element in each row.</td>
641
+ </tr>
642
+ <tr>
643
+ <td><code>masonry</code></td>
644
+ <td>Boolean, String</td>
645
+ <td>false</td>
646
+ <td>Enables masonry layout for this grid (pack, next).</td>
647
+ </tr>
648
+ <tr>
649
+ <td><code>parallax</code></td>
650
+ <td>Number</td>
651
+ <td>0</td>
652
+ <td>Parallax translation value. The value can be in vh, % and px. Falsy disables the parallax effect (default).</td>
653
+ </tr>
654
+ <tr>
655
+ <td><code>parallax-start</code></td>
656
+ <td>Length</td>
657
+ <td>0</td>
658
+ <td>Start offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of `0` means that the grid's top border and viewport's bottom border intersect.</td>
659
+ </tr>
660
+ <tr>
661
+ <td><code>parallax-end</code></td>
662
+ <td>Length</td>
663
+ <td>0</td>
664
+ <td>End offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of `0` means that the grid's bottom border and the viewport's top border intersect.</td>
665
+ </tr>
666
+ <tr>
667
+ <td><code>parallax-justify</code></td>
668
+ <td>Boolean</td>
669
+ <td>false</td>
670
+ <td>With parallax enabled, all columns will reach the bottom at the same time.</td>
671
+ </tr>
672
+ </tbody>
673
+ </table>
674
+ </div>
675
+
676
+ </div>
677
+
678
+ </body>
679
+ </html>