u2ui 1.0.1 → 1.4.5

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 (591) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +36 -36
  3. package/attr/behavior/README.md +6 -4
  4. package/attr/behavior/behavior.js +265 -261
  5. package/attr/behavior/manifest.json +42 -42
  6. package/attr/confirm/README.md +8 -8
  7. package/attr/confirm/confirm.js +86 -90
  8. package/attr/confirm/manifest.json +42 -42
  9. package/attr/disableif/README.md +37 -0
  10. package/attr/disableif/disableif.js +59 -0
  11. package/attr/disableif/manifest.json +38 -0
  12. package/attr/draghandle/README.md +15 -15
  13. package/attr/draghandle/draghandle.js +24 -42
  14. package/attr/draghandle/manifest.json +30 -0
  15. package/attr/dropzone/README.md +32 -0
  16. package/attr/dropzone/dropzone.js +485 -0
  17. package/attr/dropzone/manifest.json +36 -0
  18. package/attr/focusgroup/README.md +9 -9
  19. package/attr/focusgroup/focusgroup.js +97 -100
  20. package/attr/focusgroup/manifest.json +30 -38
  21. package/attr/href/README.md +5 -5
  22. package/attr/href/href.js +50 -42
  23. package/attr/href/manifest.json +42 -42
  24. package/attr/intersect/README.md +15 -15
  25. package/attr/intersect/intersect.js +98 -98
  26. package/attr/intersect/manifest.json +44 -57
  27. package/attr/lightbox/README.md +27 -0
  28. package/attr/lightbox/lightbox.js +120 -0
  29. package/attr/lightbox/manifest.json +29 -0
  30. package/attr/movable/README.md +27 -0
  31. package/attr/movable/manifest.json +47 -0
  32. package/attr/movable/movable.js +111 -0
  33. package/attr/navigable/README.md +9 -9
  34. package/attr/navigable/TargetObserver.js +90 -91
  35. package/attr/navigable/U2TargetObserver.js +75 -75
  36. package/attr/navigable/manifest.json +34 -42
  37. package/attr/navigable/navigable.js +85 -87
  38. package/attr/parallax/README.md +10 -10
  39. package/attr/parallax/manifest.json +36 -0
  40. package/attr/parallax/parallax.js +119 -119
  41. package/attr/scrollspy/README.md +43 -0
  42. package/attr/scrollspy/manifest.json +28 -0
  43. package/attr/scrollspy/scrollspy.js +85 -0
  44. package/attr/selectable/README.md +42 -0
  45. package/attr/selectable/SelectionManager.js +171 -0
  46. package/attr/selectable/manifest.json +33 -0
  47. package/attr/selectable/selectable.js +28 -0
  48. package/attr/skin/README.md +15 -16
  49. package/attr/skin/manifest.json +40 -0
  50. package/attr/skin/skin.css +49 -50
  51. package/attr/store/README.md +41 -0
  52. package/attr/store/manifest.json +28 -0
  53. package/attr/store/store.js +62 -0
  54. package/class/badge/README.md +2 -2
  55. package/class/badge/badge.css +34 -34
  56. package/class/card/README.md +51 -0
  57. package/class/card/card.css +31 -0
  58. package/class/flex/README.md +16 -16
  59. package/class/flex/flex.css +15 -25
  60. package/class/grid/README.md +18 -18
  61. package/class/grid/grid.css +38 -40
  62. package/class/reset/README.md +6 -6
  63. package/class/reset/reset.css +8 -8
  64. package/class/table/README.md +22 -21
  65. package/class/table/table.css +125 -125
  66. package/class/unstyle/README.md +7 -5
  67. package/class/unstyle/unstyle.css +14 -12
  68. package/class/width/README.md +18 -18
  69. package/class/width/width.css +21 -22
  70. package/css/README.md +11 -0
  71. package/css/base/README.md +8 -2
  72. package/css/base/base.css +153 -127
  73. package/css/base/beta.css +34 -50
  74. package/css/base/full.css +5 -5
  75. package/css/base/nomotion.css +8 -8
  76. package/css/base/print.css +36 -36
  77. package/css/classless/README.md +10 -4
  78. package/css/classless/aria.css +51 -64
  79. package/css/classless/classless.css +118 -124
  80. package/css/classless/full.css +11 -11
  81. package/css/classless/more.css +314 -340
  82. package/css/classless/simple.css +314 -103
  83. package/css/classless/snippeds/a/icons.css +66 -12
  84. package/css/classless/snippeds/a/tests.html +118 -0
  85. package/css/classless/snippeds/blockquote/big-quotes.css +36 -0
  86. package/css/classless/snippeds/blockquote/tests.html +62 -0
  87. package/css/classless/snippeds/button/square.css +22 -0
  88. package/css/classless/snippeds/button/tests.html +53 -0
  89. package/css/classless/snippeds/experiments/aria-header-nav-dropdown.css +46 -0
  90. package/css/classless/snippeds/hr/gradient.css +2 -2
  91. package/css/classless/snippeds/hr/section_sign.css +16 -16
  92. package/css/classless/snippeds/hr/tests.html +49 -49
  93. package/css/classless/snippeds/p/indent.css +9 -0
  94. package/css/classless/snippeds/p/initial.css +9 -0
  95. package/css/classless/snippeds/p/tests.html +60 -0
  96. package/css/classless/variables.css +132 -99
  97. package/css/norm/README.md +7 -1
  98. package/css/norm/beta.css +41 -39
  99. package/css/norm/norm.css +89 -98
  100. package/css/norm/oldies.css +71 -60
  101. package/css/{classes → utils}/README.md +10 -4
  102. package/css/{classes/classes.css → utils/utils.css} +78 -78
  103. package/el/accordion/README.md +60 -59
  104. package/el/accordion/accordion.css +11 -7
  105. package/el/accordion/accordion.js +211 -258
  106. package/el/accordion/manifest.json +44 -57
  107. package/el/alert/README.md +86 -67
  108. package/el/alert/alert.css +72 -73
  109. package/el/alert/alert.js +206 -187
  110. package/el/alert/manifest.json +59 -77
  111. package/el/breadcrumb/README.md +41 -0
  112. package/el/breadcrumb/breadcrumb.css +22 -0
  113. package/el/breadcrumb/breadcrumb.js +119 -0
  114. package/el/breadcrumb/manifest.json +42 -0
  115. package/el/buttongroup/README.md +36 -36
  116. package/el/buttongroup/buttongroup.css +38 -30
  117. package/el/buttongroup/buttongroup.js +68 -56
  118. package/el/buttongroup/manifest.json +28 -0
  119. package/el/bytes/README.md +4 -4
  120. package/el/bytes/bytes.css +6 -6
  121. package/el/bytes/bytes.js +98 -97
  122. package/el/bytes/manifest.json +90 -95
  123. package/el/calendar/README.md +64 -0
  124. package/el/calendar/calendar.css +36 -0
  125. package/el/calendar/calendar.js +391 -0
  126. package/el/calendar/ext/drag.js +69 -0
  127. package/el/calendar/ext/keyNavigation.js +101 -0
  128. package/el/calendar/manifest.json +69 -0
  129. package/el/carousel/README.md +14 -14
  130. package/el/carousel/carousel.css +45 -46
  131. package/el/carousel/carousel.js +398 -371
  132. package/el/carousel/manifest.json +44 -58
  133. package/el/carousel-nav/README.md +13 -14
  134. package/el/carousel-nav/carousel-nav.js +74 -74
  135. package/el/carousel-nav/manifest.json +31 -0
  136. package/el/chart/README.md +46 -0
  137. package/el/chart/chart.css +7 -0
  138. package/el/chart/chart.js +188 -0
  139. package/el/chart/engines/apexcharts.js +103 -0
  140. package/el/chart/engines/billboard.js +79 -0
  141. package/el/chart/engines/chart.js.js +32 -0
  142. package/el/chart/engines/chartist.js +74 -0
  143. package/el/chart/engines/echarts.js +65 -0
  144. package/el/chart/engines/frappe.js +49 -0
  145. package/el/chart/engines/nvd3.js +139 -0
  146. package/el/chart/engines/plotly.js +73 -0
  147. package/el/chart/manifest.json +54 -0
  148. package/el/code/README.md +21 -21
  149. package/el/code/code.css +46 -46
  150. package/el/code/code.js +291 -289
  151. package/el/code/manifest.json +59 -66
  152. package/el/cookiebanner/README.md +70 -0
  153. package/el/cookiebanner/cookiebanner.css +42 -0
  154. package/el/cookiebanner/cookiebanner.js +161 -0
  155. package/el/cookiebanner/extensions/googleConsentMode.js +36 -0
  156. package/el/cookiebanner/knownItems.js +291 -0
  157. package/el/cookiebanner/manifest.json +85 -0
  158. package/el/cookiebanner/ui.js +426 -0
  159. package/el/copy/README.md +9 -7
  160. package/el/copy/copy.css +3 -3
  161. package/el/copy/copy.js +89 -117
  162. package/el/copy/manifest.json +37 -49
  163. package/el/counter/README.md +12 -9
  164. package/el/counter/counter.css +8 -8
  165. package/el/counter/counter.js +96 -95
  166. package/el/counter/manifest.json +50 -59
  167. package/el/drawer/README.md +35 -0
  168. package/el/drawer/drawer.css +77 -0
  169. package/el/drawer/drawer.js +166 -0
  170. package/el/drawer/manifest.json +27 -0
  171. package/el/fields/README.md +34 -0
  172. package/el/fields/fields.css +5 -0
  173. package/el/fields/fields.js +133 -0
  174. package/el/fields/manifest.json +32 -0
  175. package/el/ico/README.md +119 -118
  176. package/el/ico/debug.js +86 -0
  177. package/el/ico/font/Font Awesome.css +22 -22
  178. package/el/ico/font/LigatureSymbols.css +7 -7
  179. package/el/ico/font/Material Icons.css +6 -6
  180. package/el/ico/font/RemixFilled.css +8 -8
  181. package/el/ico/font/RemixOutlined.css +8 -8
  182. package/el/ico/font/old/anicons.css +31 -31
  183. package/el/ico/font/old/devicons.css +210 -210
  184. package/el/ico/font/old/material.all.css +36 -36
  185. package/el/ico/font/old/remix.css +15 -15
  186. package/el/ico/font/old/utf8.css +54 -54
  187. package/el/ico/ico.css +122 -110
  188. package/el/ico/ico.js +163 -189
  189. package/el/ico/manifest.json +68 -86
  190. package/el/input/README.md +41 -39
  191. package/el/input/input.css +95 -35
  192. package/el/input/input.js +682 -331
  193. package/el/input/manifest.json +54 -0
  194. package/el/maintitlebar/README.md +39 -0
  195. package/el/maintitlebar/maintitlebar.css +40 -0
  196. package/el/maintitlebar/maintitlebar.js +17 -0
  197. package/el/maintitlebar/manifest.json +32 -0
  198. package/el/masonry/README.md +19 -19
  199. package/el/masonry/manifest.json +49 -60
  200. package/el/masonry/masonry.css +27 -27
  201. package/el/masonry/masonry.js +93 -92
  202. package/el/menubutton/README.md +39 -0
  203. package/el/menubutton/manifest.json +44 -0
  204. package/el/{splitbutton/splitbutton.css → menubutton/menubutton.css} +51 -47
  205. package/el/menubutton/menubutton.js +90 -0
  206. package/el/number/README.md +9 -6
  207. package/el/number/manifest.json +162 -121
  208. package/el/number/number.css +6 -6
  209. package/el/number/number.js +67 -67
  210. package/el/out/README.md +5 -5
  211. package/el/out/manifest.json +26 -38
  212. package/el/out/out.css +2 -2
  213. package/el/out/out.js +42 -59
  214. package/el/pagination/README.md +32 -0
  215. package/el/pagination/manifest.json +47 -0
  216. package/el/pagination/pagination.css +27 -0
  217. package/el/pagination/pagination.js +147 -0
  218. package/el/parallax-bg/README.md +26 -6
  219. package/el/parallax-bg/manifest.json +32 -0
  220. package/el/parallax-bg/parallax-bg.css +13 -13
  221. package/el/parallax-bg/parallax-bg.js +197 -186
  222. package/el/qrcode/README.md +7 -7
  223. package/el/qrcode/manifest.json +32 -43
  224. package/el/qrcode/package.json +22 -22
  225. package/el/qrcode/qrcode.css +13 -13
  226. package/el/qrcode/qrcode.js +53 -45
  227. package/el/rating/README.md +9 -20
  228. package/el/rating/manifest.json +52 -65
  229. package/el/rating/rating.css +10 -10
  230. package/el/rating/rating.js +148 -139
  231. package/el/responsive/README.md +43 -0
  232. package/el/responsive/manifest.json +41 -0
  233. package/el/responsive/responsive.css +4 -0
  234. package/el/responsive/responsive.js +143 -0
  235. package/el/rte/README.md +10 -10
  236. package/el/rte/manifest.json +33 -0
  237. package/el/rte/rte.css +9 -9
  238. package/el/rte/rte.js +56 -56
  239. package/el/skeleton/README.md +3 -3
  240. package/el/skeleton/manifest.json +37 -51
  241. package/el/skeleton/skeleton.css +67 -60
  242. package/el/skeleton/skeleton.js +71 -72
  243. package/el/splitpanel/README.md +33 -13
  244. package/el/splitpanel/manifest.json +36 -49
  245. package/el/splitpanel/splitpanel.css +20 -17
  246. package/el/splitpanel/splitpanel.js +117 -116
  247. package/el/spot/README.md +36 -0
  248. package/el/spot/manifest.json +55 -0
  249. package/el/spot/spot.css +23 -0
  250. package/el/spot/spot.js +106 -0
  251. package/el/system/README.md +29 -0
  252. package/el/system/demoHtml.html +660 -0
  253. package/el/system/manifest.json +32 -0
  254. package/el/system/styler.js +661 -0
  255. package/el/system/system.js +84 -0
  256. package/el/table/README.md +80 -68
  257. package/el/table/ext/autoFormatTable.js +228 -0
  258. package/el/table/manifest.json +32 -43
  259. package/el/table/table.css +4 -59
  260. package/el/table/table.js +468 -194
  261. package/el/tabs/README.md +17 -17
  262. package/el/tabs/manifest.json +44 -59
  263. package/el/tabs/tabs.css +22 -22
  264. package/el/tabs/tabs.js +192 -210
  265. package/el/textfit/README.md +7 -7
  266. package/el/textfit/manifest.json +33 -45
  267. package/el/textfit/textfit.css +5 -5
  268. package/el/textfit/textfit.js +80 -80
  269. package/el/time/README.md +6 -5
  270. package/el/time/manifest.json +79 -118
  271. package/el/time/time.js +179 -168
  272. package/el/toc/README.md +27 -0
  273. package/el/toc/manifest.json +36 -0
  274. package/el/toc/toc.css +3 -0
  275. package/el/toc/toc.js +85 -0
  276. package/el/tooltip/README.md +13 -10
  277. package/el/tooltip/manifest.json +56 -69
  278. package/el/tooltip/tooltip.css +100 -97
  279. package/el/tooltip/tooltip.js +146 -82
  280. package/el/tree/README.md +133 -0
  281. package/el/tree/ext/dnd.js +53 -0
  282. package/el/tree/ext/item.js +35 -0
  283. package/el/tree/manifest.json +61 -0
  284. package/el/tree/tree.css +18 -0
  285. package/el/tree/tree.js +236 -0
  286. package/el/typewriter/README.md +11 -11
  287. package/el/typewriter/manifest.json +45 -66
  288. package/el/typewriter/typewriter.css +6 -6
  289. package/el/typewriter/typewriter.js +161 -166
  290. package/el/video/README.md +37 -0
  291. package/el/video/manifest.json +96 -0
  292. package/el/video/video.js +550 -0
  293. package/js/Placer/Placer.js +156 -156
  294. package/js/Placer/README.md +14 -16
  295. package/js/PointerObserver/PointerObserver-no-scroll.js +146 -0
  296. package/js/PointerObserver/PointerObserver.js +161 -130
  297. package/js/PointerObserver/README.md +6 -7
  298. package/js/SelectorObserver/README.md +9 -9
  299. package/js/SelectorObserver/SelectorObserver.js +199 -200
  300. package/js/Tour/README.md +56 -0
  301. package/js/Tour/Tour.js +156 -0
  302. package/js/contextmenu/README.md +6 -31
  303. package/js/contextmenu/contextmenu.js +338 -336
  304. package/js/dialog/README.md +8 -7
  305. package/js/dialog/dialog.js +228 -261
  306. package/js/drag/README.md +28 -0
  307. package/js/drag/drag.js +38 -0
  308. package/js/drag/indicateDrop.js +80 -0
  309. package/js/loading/README.md +24 -0
  310. package/js/loading/loading.js +139 -0
  311. package/js/navigator/README.md +26 -0
  312. package/js/navigator/navigator.js +430 -0
  313. package/js/navigator/url-change-event.js +29 -0
  314. package/js/rte/README.md +13 -14
  315. package/js/rte/old/NodeCleaner.js +315 -315
  316. package/js/rte/old/Rte/Rte.ui.mjs +154 -154
  317. package/js/rte/old/Rte/index.mjs +5 -5
  318. package/js/rte/old/Rte/main.css +189 -189
  319. package/js/rte/old/old.rte.js +131 -131
  320. package/js/rte/old/range-selection.old.js +394 -394
  321. package/js/rte/rte.js +7 -7
  322. package/js/rte/src/behavior.js +228 -228
  323. package/js/rte/src/events.js +73 -73
  324. package/js/rte/src/fixes.js +250 -250
  325. package/js/rte/src/range.js +469 -472
  326. package/js/rte/src/rte.js +71 -71
  327. package/js/rte/src/ui/items/ai.js +166 -167
  328. package/js/rte/src/ui/items/code.js +93 -93
  329. package/js/rte/src/ui/items/undo.js +183 -183
  330. package/js/rte/src/ui.items.js +6 -7
  331. package/js/rte/src/ui.js +268 -268
  332. package/js/rte/src/util/indentHtml.js +21 -15
  333. package/js/serviceWorker/README.md +17 -0
  334. package/js/serviceWorker/serviceWorker.js +84 -0
  335. package/js/serviceWorker/sw.js +221 -0
  336. package/js/shortcut/README.md +6 -6
  337. package/js/shortcut/shortcut.js +53 -89
  338. package/package.json +2 -4
  339. package/theme/brutalist/README.md +10 -0
  340. package/theme/brutalist/theme.css +98 -0
  341. package/theme/elegance/README.md +10 -0
  342. package/theme/elegance/theme.css +120 -0
  343. package/theme/luxury/README.md +10 -0
  344. package/theme/luxury/theme.css +107 -0
  345. package/theme/minimalism/README.md +10 -0
  346. package/theme/minimalism/theme.css +103 -0
  347. package/theme/natur/README.md +10 -0
  348. package/theme/natur/theme.css +101 -0
  349. package/theme/pastell/README.md +10 -0
  350. package/theme/pastell/theme.css +99 -0
  351. package/theme/pop/README.md +10 -0
  352. package/theme/pop/theme.css +101 -0
  353. package/theme/prompt.css +175 -0
  354. package/theme/retro/README.md +10 -0
  355. package/theme/retro/theme.css +99 -0
  356. package/theme/soft/README.md +10 -0
  357. package/theme/soft/theme.css +84 -0
  358. package/theme/tech/README.md +10 -0
  359. package/theme/tech/theme.css +98 -0
  360. package/theme/test/README.md +10 -0
  361. package/theme/test/theme.css +109 -0
  362. package/theme/test.html +284 -0
  363. package/theme/tmp/README.md +10 -0
  364. package/theme/tmp/theme.css +323 -0
  365. package/u2/auto.js +156 -161
  366. package/u2/auto.ui.js +82 -85
  367. package/u2/plan-scoped-refactoring.md +236 -0
  368. package/u2/projects.json +757 -467
  369. package/u2/tools/baseElement.js +217 -95
  370. package/u2/tools/baseElement.test.html +139 -119
  371. package/u2/tools/ce-inspector.js +307 -307
  372. package/u2/tools/ce-inspector.test.html +67 -65
  373. package/u2/tools/ce-manfest-from-element.js +207 -207
  374. package/u2/tools/dev-iframe.js +212 -213
  375. package/u2/tools/dev-iframe.test.html +72 -74
  376. package/u2/tools/eventsExplorer.js +102 -101
  377. package/u2/tools/logo/u1.svg +9 -9
  378. package/u2/tools/promiseElementById.js +14 -0
  379. package/u2/tools/update.repos.json.js +259 -234
  380. package/u2/tools/update.skill.js +176 -0
  381. package/u2/tools/variable-styler.js +317 -0
  382. package/u2/u2.js +30 -14
  383. package/u2/utils.js +61 -59
  384. package/.htaccess +0 -7
  385. package/attr/behavior/tests/minimal.html +0 -19
  386. package/attr/behavior/tests/test.html +0 -98
  387. package/attr/confirm/tests/minimal.html +0 -23
  388. package/attr/confirm/tests/test.html +0 -79
  389. package/attr/draghandle/tests/minimal.html +0 -44
  390. package/attr/focusgroup/tests/minimal.html +0 -27
  391. package/attr/focusgroup/tests/test.html +0 -154
  392. package/attr/href/tests/minimal.html +0 -17
  393. package/attr/href/tests/test.html +0 -70
  394. package/attr/intersect/tests/minimal.html +0 -30
  395. package/attr/intersect/tests/test.html +0 -64
  396. package/attr/navigable/tests/U1TargetObserver.html +0 -56
  397. package/attr/navigable/tests/minimal.html +0 -17
  398. package/attr/navigable/tests/targetObserver.html +0 -106
  399. package/attr/navigable/tests/test.html +0 -84
  400. package/attr/parallax/tests/minimal.html +0 -25
  401. package/attr/parallax/tests/performance.html +0 -102
  402. package/attr/parallax/tests/test.html +0 -108
  403. package/attr/skin/tests/minimal.html +0 -34
  404. package/attr/skin/tests/test.html +0 -96
  405. package/class/badge/tests/minimal.html +0 -17
  406. package/class/badge/tests/test.html +0 -112
  407. package/class/card1/README.md +0 -45
  408. package/class/card1/card1.css +0 -30
  409. package/class/card1/tests/minimal.html +0 -33
  410. package/class/card1/tests/test.html +0 -78
  411. package/class/flex/tests/minimal.html +0 -31
  412. package/class/flex/tests/test.html +0 -58
  413. package/class/grid/tests/minimal.html +0 -34
  414. package/class/grid/tests/test.html +0 -78
  415. package/class/input/README.md +0 -49
  416. package/class/input/input.css +0 -33
  417. package/class/input/tests/minimal.html +0 -39
  418. package/class/input/tests/test.html +0 -29
  419. package/class/reset/tests/minimal.html +0 -23
  420. package/class/table/tests/minimal.html +0 -40
  421. package/class/table/tests/test.html +0 -226
  422. package/class/unstyle/tests/minimal.html +0 -22
  423. package/class/unstyle/tests/test.html +0 -32
  424. package/class/width/tests/minimal.html +0 -27
  425. package/class/width/tests/test.html +0 -101
  426. package/css/base/tests/nomotion.html +0 -89
  427. package/css/base/tests/test.html +0 -539
  428. package/css/classes/tests/test.html +0 -63
  429. package/css/classless/snippeds/experiments/conventions.css +0 -41
  430. package/css/classless/tests/aria.html +0 -101
  431. package/css/classless/tests/foreign/classless-almond.css.html +0 -445
  432. package/css/classless/tests/foreign/classless-classless.css.html +0 -831
  433. package/css/classless/tests/foreign/classless-mvp.html +0 -415
  434. package/css/classless/tests/foreign/classless.sakura.html +0 -224
  435. package/css/classless/tests/foreign/stylestage.dev.html +0 -304
  436. package/css/classless/tests/foreign/test-homogenizer.html +0 -433
  437. package/css/classless/tests/foreign/test-html5-elements-tester.html +0 -956
  438. package/css/classless/tests/foreign/test-opinionated_css.html +0 -148
  439. package/css/classless/tests/list-bullet.html +0 -110
  440. package/css/classless/tests/more.html +0 -246
  441. package/css/classless/tests/oklch.experiments.html +0 -280
  442. package/css/classless/tests/test.html +0 -106
  443. package/css/classless/tests/variables.html +0 -109
  444. package/css/norm/tests/test.html +0 -434
  445. package/css/norm/tests/test.js +0 -103
  446. package/el/accordion/tests/minimal.html +0 -44
  447. package/el/accordion/tests/test.html +0 -168
  448. package/el/alert/alert copy.js +0 -224
  449. package/el/alert/tests/minimal.html +0 -36
  450. package/el/alert/tests/test.html +0 -105
  451. package/el/buttongroup/tests/minimal.html +0 -31
  452. package/el/buttongroup/tests/test.html +0 -83
  453. package/el/bytes/tests/minimal.html +0 -19
  454. package/el/bytes/tests/test.html +0 -117
  455. package/el/carousel/tests/experiments.html +0 -77
  456. package/el/carousel/tests/minimal.html +0 -31
  457. package/el/carousel/tests/nested.html +0 -54
  458. package/el/carousel/tests/test.html +0 -136
  459. package/el/carousel-nav/tests/minimal.html +0 -32
  460. package/el/carousel-nav/tests/test.html +0 -59
  461. package/el/code/tests/minimal.html +0 -35
  462. package/el/code/tests/test.html +0 -162
  463. package/el/copy/tests/minimal.html +0 -21
  464. package/el/copy/tests/test.html +0 -75
  465. package/el/counter/tests/minimal.html +0 -27
  466. package/el/counter/tests/test.html +0 -106
  467. package/el/ico/tests/combinations.html +0 -86
  468. package/el/ico/tests/emojis.html +0 -213
  469. package/el/ico/tests/fonts.html +0 -110
  470. package/el/ico/tests/ico-directory.html +0 -254
  471. package/el/ico/tests/minimal.html +0 -46
  472. package/el/ico/tests/test.html +0 -210
  473. package/el/ico/tests/util-multi.svg +0 -6
  474. package/el/ico/tests/util.css +0 -2
  475. package/el/ico/tests/util.js +0 -110
  476. package/el/input/tests/formParticipation.html +0 -113
  477. package/el/input/tests/minimal.html +0 -33
  478. package/el/input/tests/test.html +0 -258
  479. package/el/masonry/tests/minimal.html +0 -39
  480. package/el/masonry/tests/test.html +0 -42
  481. package/el/number/tests/minimal.html +0 -25
  482. package/el/number/tests/test.html +0 -138
  483. package/el/out/tests/minimal.html +0 -25
  484. package/el/out/tests/test.html +0 -37
  485. package/el/parallax-bg/tests/bg.jpg +0 -0
  486. package/el/parallax-bg/tests/bg1.jpg +0 -0
  487. package/el/parallax-bg/tests/bg2.jpg +0 -0
  488. package/el/parallax-bg/tests/demo.html +0 -88
  489. package/el/parallax-bg/tests/minimal.html +0 -30
  490. package/el/parallax-bg/tests/test.html +0 -64
  491. package/el/parallax-bg/tests/visible.html +0 -90
  492. package/el/qrcode/tests/minimal.html +0 -26
  493. package/el/qrcode/tests/test.html +0 -31
  494. package/el/rating/tests/minimal.html +0 -26
  495. package/el/rating/tests/tests.html +0 -77
  496. package/el/rte/tests/minimal.html +0 -25
  497. package/el/rte/tests/test.html +0 -37
  498. package/el/skeleton/tests/minimal.html +0 -22
  499. package/el/skeleton/tests/test.html +0 -22
  500. package/el/splitbutton/README.md +0 -39
  501. package/el/splitbutton/splitbutton.js +0 -26
  502. package/el/splitbutton/tests/minimal.html +0 -30
  503. package/el/splitbutton/tests/test.html +0 -68
  504. package/el/splitpanel/tests/minimal.html +0 -31
  505. package/el/splitpanel/tests/tests.html +0 -121
  506. package/el/table/tests/minimal.html +0 -38
  507. package/el/table/tests/test.html +0 -108
  508. package/el/tabs/tests/minimal.html +0 -35
  509. package/el/tabs/tests/test.html +0 -180
  510. package/el/textfit/tests/minimal.html +0 -25
  511. package/el/textfit/tests/test.html +0 -26
  512. package/el/time/tests/minimal.html +0 -19
  513. package/el/time/tests/test.html +0 -160
  514. package/el/time/time copy.js +0 -141
  515. package/el/time/time.old.uhtml.js +0 -129
  516. package/el/tooltip/tests/minimal.html +0 -25
  517. package/el/tooltip/tests/test.html +0 -178
  518. package/el/tree1/README.md +0 -111
  519. package/el/tree1/manifest.json +0 -78
  520. package/el/tree1/tests/animated.html +0 -134
  521. package/el/tree1/tests/custom.html +0 -51
  522. package/el/tree1/tests/minimal.html +0 -44
  523. package/el/tree1/tests/test.html +0 -260
  524. package/el/tree1/tree1.css +0 -26
  525. package/el/tree1/tree1.js +0 -265
  526. package/el/typewriter/tests/minimal.html +0 -25
  527. package/el/typewriter/tests/test.html +0 -78
  528. package/js/Placer/tests/minimal.html +0 -34
  529. package/js/Placer/tests/test.html +0 -49
  530. package/js/PointerObserver/tests/minimal.html +0 -29
  531. package/js/PointerObserver/tests/test.html +0 -35
  532. package/js/SelectorObserver/tests/minimal.html +0 -21
  533. package/js/SelectorObserver/tests/test.html +0 -57
  534. package/js/SelectorObserver/tests/tests.html +0 -161
  535. package/js/contextmenu/tests/minimal.html +0 -44
  536. package/js/contextmenu/tests/test.html +0 -131
  537. package/js/dialog/tests/minimal.html +0 -29
  538. package/js/dialog/tests/notification.mp3 +0 -0
  539. package/js/dialog/tests/test.html +0 -135
  540. package/js/rte/tests/ai.html +0 -81
  541. package/js/rte/tests/behavior.html +0 -88
  542. package/js/rte/tests/events.html +0 -69
  543. package/js/rte/tests/fixes.html +0 -95
  544. package/js/rte/tests/minimal.html +0 -34
  545. package/js/rte/tests/notes.md +0 -6
  546. package/js/rte/tests/range.html +0 -167
  547. package/js/rte/tests/selection-explorer.html +0 -222
  548. package/js/rte/tests/test.html +0 -92
  549. package/js/shortcut/tests/minimal.html +0 -23
  550. package/js/shortcut/tests/test.html +0 -68
  551. package/u2/experiments/Waiter/test.html +0 -132
  552. package/u2/experiments/getElementByIdPromise/test.html +0 -76
  553. package/u2/experiments/patchInputValue.html +0 -124
  554. package/u2/experiments/radiobutton/test.html +0 -75
  555. package/u2/experiments/tests/test.html +0 -223
  556. package/u2/experiments/u1-responsive/responsive.js +0 -62
  557. package/u2/experiments/u1-responsive/test.html +0 -65
  558. package/u2/experiments/u2Element.js +0 -139
  559. package/u2/experiments/u2Element.test.html +0 -47
  560. package/u2/old-stuff/IterableWeakMap/mod.js +0 -70
  561. package/u2/old-stuff/css/onStyleSheet/mod.js +0 -114
  562. package/u2/old-stuff/css/onStyleSheet/monkeypatches.js +0 -28
  563. package/u2/old-stuff/css/onStyleSheet/test/include.css +0 -19
  564. package/u2/old-stuff/css/onStyleSheet/test/style-has-include.css +0 -6
  565. package/u2/old-stuff/css/onStyleSheet/test/style-no-include.css +0 -3
  566. package/u2/old-stuff/css/onStyleSheet/test/test.html +0 -48
  567. package/u2/old-stuff/css/parser/mod.js +0 -182
  568. package/u2/old-stuff/css/parser/parser_old/mod.js +0 -128
  569. package/u2/old-stuff/css/parser/parser_old/test.html +0 -43
  570. package/u2/old-stuff/css/parser/parser_old/util.js +0 -22
  571. package/u2/old-stuff/css/parser/style.html +0 -52
  572. package/u2/old-stuff/css/parser/test.html +0 -38
  573. package/u2/old-stuff/el/ai-texter/README.md +0 -23
  574. package/u2/old-stuff/el/ai-texter/ai-texter.css +0 -12
  575. package/u2/old-stuff/el/ai-texter/ai-texter.js +0 -153
  576. package/u2/old-stuff/el/ai-texter/tests/minimal.html +0 -47
  577. package/u2/old-stuff/el/ai-texter/tests/test.html +0 -71
  578. package/u2/old-stuff/init.js +0 -38
  579. package/u2/old-stuff/markHashLinks.js +0 -51
  580. package/u2/old-stuff/onElement/mod.js +0 -73
  581. package/u2/old-stuff/test-helpers/mod.js +0 -36
  582. package/u2/old-stuff/test-helpers/test.html +0 -4
  583. package/u2/old-stuff/tests/init.js.html +0 -51
  584. package/u2/old-stuff/viewport.js +0 -64
  585. package/u2/tests/boilerplate.html +0 -46
  586. package/u2/tests/kacheln.html +0 -245
  587. package/u2/tests/showcase.html +0 -270
  588. package/u2/tests/showcase2.html +0 -157
  589. package/u2/tests/test-init.js +0 -35
  590. package/u2/tests/test.html +0 -355
  591. package/u2/tools/logo/u1ui.svg +0 -6
package/css/classless/tests/foreign/classless-classless.css.html DELETED
@@ -1,831 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8">
5
- <title>Classless.css – Less Classes. Less overhead.</title>
6
- <meta name="description" content="Minimal CSS3 for basic HTML5 Tags.">
7
- <meta name="keywords" content="CSS,Minimal,Tag,Style,Bootstrap">
8
- <meta name="author" content="Emanuel Regnath">
9
-
10
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
11
- <script src="./../test.js" type=module async></script>
12
-
13
- <link rel="stylesheet" href="../../../css/norm/norm.css">
14
- <link rel="stylesheet" href="../../../norm.css/beta.css">
15
- <link rel="stylesheet" href="../../../css/base/base.css">
16
- <link rel="stylesheet" href="../../../base.css/beta.css">
17
- <link rel="stylesheet" href="../../../base.css/print.css" disabled>
18
- <link rel="stylesheet" href="../../../base.css/nomotion.css" disabled>
19
- <link rel="stylesheet" href="../../../css/classless/variables.css">
20
- <link rel="stylesheet" href="../../../css/classless/classless.css">
21
- <link rel="stylesheet" href="../../../css/classless/more.css">
22
- <link rel="stylesheet" href="../../../css/classless/aria.css">
23
- <link rel="stylesheet" href="../../../css/classless/simple.css">
24
-
25
- <link rel="stylesheet" href="../../../classless.css/themes/elegant.css">
26
- <link rel="stylesheet" href="../../../classless.css/themes/brutalist.css" disabled>
27
- <link rel="stylesheet" href="../../../classless.css/themes/lascaux.css" disabled>
28
-
29
- </head>
30
-
31
-
32
- <body id="top">
33
-
34
- <a href="https://classless.de/" target=_blank>Original classless.de</a>
35
-
36
-
37
- <!-- Header -->
38
- <header >
39
- <section>
40
- <h1>Classless.css</h1>
41
- <p><strong>Less classes. Less overhead.</strong></p>
42
-
43
-
44
- <!-- Navigation -->
45
- <nav>
46
- <ul>
47
- <li>
48
- <img style="height: 1.0rem;" src="favicon.png">
49
- <span >&ensp;Classless.css</span>
50
- </li>
51
- <li><a href="#demo">Demo</a></li>
52
- <!-- <li><a href="#extra"></a></li> -->
53
- <li class="dropdown"><a href="#bootless">Reference ▾</a>
54
- <ul>
55
- <li><a href="#basic">Basics</a></li>
56
- <li><a href="#extra">Extra</a></li>
57
- <li><a href="#bootless">Bootless</a></li>
58
- </ul>
59
- </li>
60
- <li class="float-right">
61
- Theme:
62
- <select id="theme" onchange="switchTheme(this)" class="p-0 m-0">
63
- <option value="1">Light</option>
64
- <option value="2">Dark</option>
65
- <option value="3">Sepia</option>
66
- </select>
67
- </li>
68
- <li class="float-right"><a href="https://github.com/emareg/classlesscss">@GitHub</a></li>
69
- </ul>
70
- </nav>
71
-
72
-
73
-
74
- <h4>Abstract</h4>
75
- <p>Classless.css is one small CSS file, which defines few but great styles for basic HTML5 tags plus very few classes for grid and spacing. Nothing more. Nothing less. With the basic tag styling, Classless provides a solid appearance for simple article pages without any classes. If you need more fancy features such as grid or cards – which are infeasible with basic HTML5 – we provide a few Bootstrap compatible classes.</p>
76
-
77
- <h5>Features</h5>
78
- <ul>
79
- <li><b>Small.</b> Only 400 lines of pure CSS3 for themes, grid, navigation bar, cards and more.</li>
80
- <li><b>Single File.</b> Everything in one file, no dependencies¹, no JavaScript, no exceptions.</li>
81
- <li><b>Modular.</b> Don't need all features?² The CSS file is structured into feature groups. Simply delete what you don't need.</li>
82
- <li><b>Responsive.</b> We use media queries, <code>rem</code> units, and smart overflows for tables and code.</li>
83
- <li><b>Bootstrap Compatible.</b> The few classes use the same names as Bootstrap.</li>
84
- </ul>
85
- <p>¹: we import the font 'Open Sans' but if it fails, we fallback to Helvetica.</br>
86
- ²: we also offer a pre-made tiny version (90 lines) with only the base styles.</p>
87
-
88
- <h2>Getting Started</h2>
89
- <p>For testing, you can simply insert the following line into your HTML file. For production, please host the classless.css file yourself.</p>
90
-
91
- <pre><code>&lt;link rel="stylesheet" href="https://classless.de/classless.css"&gt;</code></pre>
92
- <button onclick='clipBoard("<link rel=\"stylesheet\" href=\"https://classless.de/classless.css\" />")'>Copy Link-Tag</button>
93
- <a href="classless.css" download="classless.css"><button>Download Full CSS</button></a>
94
-
95
- <h5>Tiny Version</h5>
96
- <p>We also offer a pre-made tiny version (90 lines, 2.6 kB) with only the most basic styles for text, tables, figures, and code.<br>Test now:
97
- <select id="theme" onchange="switchCSS(this)" class="p-0">
98
- <option value="1">Full</option>
99
- <option value="2">Tiny</option>
100
- </select>
101
- </p>
102
- <pre><code>&lt;link rel="stylesheet" href="https://classless.de/classless-tiny.css"&gt;</code></pre>
103
- <a href="classless-tiny.css" download="classless-tiny.css"><button>Download Tiny CSS</button></a>
104
-
105
- <h5>Look at this Code</h5>
106
- <p>The page you are seeing right now, is already a demo of pure classless.css. We do not use any additional CSS files.</p>
107
-
108
- </section>
109
- </header>
110
-
111
-
112
-
113
-
114
- <!-- Main page -->
115
- <main>
116
- <article id="demo">
117
- <section>
118
-
119
- <h1>A Short Classless Article</h1>
120
- <p>E. Regnath, <time>2020-12-15</time></p>
121
- <figure>
122
- <img src="img/headerimg.jpg" alt="An image"/>
123
- <!-- <figcaption>Heading Image.</figcaption> -->
124
- </figure>
125
-
126
-
127
- <h2>Simple but Elegant</h2>
128
- <p>Text in from of paragraphs is the main ingredient for most articles.
129
- Therefore, the appearance of text over multiple lines will account for the basic <i>look & feel</i>. The initial drop letter on the first paragraph will set a visually exiting impression. Note that this is automatically inserted for the first paragraph inside an <code>&lt;article&gt;</code> tag and does not require any additional styling.
130
- </p>
131
- <aside>The citation after CSS3 is inserted automatically and it is easy to provide a reference list at the end.</aside>
132
- <p>The typography of Classless is purely based on CSS3. <cite><a href="https://www.w3.org/TR/css-values-3/">W3C: <q>CSS Values and Units Module Level 3</q>, 2019</a></cite>
133
- You can use the standard HTML5<cite><a href="https://en.wikipedia.org/wiki/HTML5">Wikipedia: <q>HTML5</q></a></cite> tags to <i>emphasize</i> certain words.
134
- Inline quotations with <code>&lt;q&gt;</code> such as <q>This is Lars’ car!</q> will insert automatically the correct quotation marks. Block quotations are also possible:
135
- </p>
136
- <blockquote>
137
- <p>Some people say, How can you live without knowing? I do not know what they mean. I always live without knowing. That is easy. How you get to know is what I want to know.</p>
138
- <p>Richard P. Feynman<cite><a href="https://en.wikiquote.org/wiki/Richard_Feynman#The_Meaning_of_It_All_(1999)">Richard P. Feynman: “The Meaning of It All: Thoughts of a Citizen-Scientist”, 1997</a></cite></p>
139
- </blockquote>
140
-
141
- <h6>Mini Sections:</h6>
142
- <p>Use the <code>&lt;h6&gt;</code> tag to create a bold inline heading for the first paragraph. To do this we also have to inline that paragraph.</p>
143
- <p>However, the following paragraph will be displayed as block again. </p>
144
-
145
- </section>
146
-
147
-
148
-
149
- <section>
150
- <h2>Tables, Figures & Code Listings</h2>
151
- <p>In typesetting systems (e.g <a href="https://en.wikipedia.org/wiki/LaTeX">LaTeX</a>) it is easy to define several environments that will have their own number and caption. We try to reproduce this behavior for the most common environments: tables and figures.</p>
152
-
153
-
154
- <h3>Tables</h3>
155
- <p>Classless applies some modern styling on the standard table elements. All columns except the first one are right aligned by default which makes it easy to compare numbers. Of course you can change this behavior with our utility classes.</p>
156
-
157
- <table>
158
- <thead>
159
- <tr>
160
- <th></th>
161
- <th>Classless</th>
162
- <th><a href="http://getskeleton.com/">Skeleton</a></th>
163
- <th><a href="https://milligram.io/">Milligram</a></th>
164
- <th><a href="https://oxal.org/projects/sakura/">Sakura</a></th>
165
- </tr>
166
- </thead>
167
- <tbody>
168
- <tr>
169
- <td>Features</td>
170
- <td>responsive, grid,<br>themes, navbar,<br>cards, utilities</td>
171
- <td>responsive,<br>grid</td>
172
- <td>responsive,<br>grid, utilities</td>
173
- <td>responsive</td>
174
- </tr>
175
- <tr>
176
- <td>Size*</td>
177
- <td>11.2 kB<br>400 LOC</td>
178
- <td>11.2 kB<br>400 LOC</td>
179
- <td>10.3 kB<br>600 LOC</td>
180
- <td>3.3 kB <br>165 LOC</td>
181
- </tr>
182
- <tr>
183
- <td>Reset</td>
184
- <td>tiny reset</td>
185
- <td>normalize</td>
186
- <td>normalize</td>
187
- <td>normalize</td>
188
- </tr>
189
- <tr>
190
- <td>Browsers</td>
191
- <td>Chrome, FF,<br>Edge</td>
192
- <td>Chrome, FF</td>
193
- <td>Chrome, FF, Opera<br> Edge, Safari</td>
194
- <td>Chrome, FF</td>
195
- </tr>
196
- <tr>
197
- <td>License</td>
198
- <td>MIT</td>
199
- <td>MIT</td>
200
- <td>MIT</td>
201
- <td>MIT</td>
202
- </tr>
203
- </tbody>
204
- <caption>Comparison of different minimal CSS frameworks.<br>* readable, non-minified code (these tiny libs don't need minimizers)</caption>
205
- </table>
206
-
207
- <p>Even more advanced tables are possible. We apply extra styling in case you specify a <code>rowspan</code> or <code>colspan</code> attribute for the <code>&lt;th&gt;</code> tags of the table header.</p>
208
-
209
- <figure>
210
- <table>
211
- <thead>
212
- <tr>
213
- <th rowspan="2">Name</th>
214
- <th colspan="2">CSS File</th>
215
- <th rowspan="2"></th>
216
- <th colspan="5">Browser Support</th>
217
- <th rowspan="2">Dependency</th>
218
- <th rowspan="2">License</th>
219
- </tr>
220
- <tr>
221
- <td>LOC</td><td>Size</td>
222
- <td><img src="https://edent.github.io/SuperTinyIcons/images/svg/chrome.svg" width="20"></td>
223
- <td><img src="https://edent.github.io/SuperTinyIcons/images/svg/firefox.svg" width="20"></td>
224
- <td><img src="https://edent.github.io/SuperTinyIcons/images/svg/safari.svg" width="20"></td>
225
- <td><img src="https://edent.github.io/SuperTinyIcons/images/svg/edge.svg" width="20"></td>
226
- <td><img src="https://upload.wikimedia.org/wikipedia/commons/1/18/Internet_Explorer_10%2B11_logo.svg" width="20"></td>
227
- </tr>
228
- </thead>
229
- <tbody>
230
- <tr>
231
- <td>Classless</td>
232
- <td>400</td><td>11.2 kB</td>
233
- <td></td><td>✔</td><td>✔</td><td>?</td><td>✔</td><td>✘</td>
234
- <td>none</td>
235
- <td>MIT</td>
236
- </tr>
237
- <tr><td>Classless Tiny</td>
238
- <td>91</td><td>2.6 kB</td>
239
- <td></td><td>✔</td><td>✔</td><td>?</td><td>✔</td><td>✘</td>
240
- <td>none</td>
241
- <td>MIT</td>
242
- </tr>
243
- <tr>
244
- <td><a href="http://getskeleton.com/">Skeleton</a></td>
245
- <td>400</td><td>11.2 kB</td>
246
- <td></td><td>✔</td><td>✔</td><td>✔</td><td>?</td><td>✔</td>
247
- <td>normalize</td>
248
- <td>MIT</td>
249
- </tr>
250
- <tr>
251
- <td><a href="https://milligram.io/">Milligram</a></td>
252
- <td>600</td><td>10.3 kB</td>
253
- <td></td><td>✔</td><td>✔</td><td>✔</td><td>✔</td><td>?</td>
254
- <td>normalize 8.0</td>
255
- <td>MIT</td>
256
- </tr>
257
- <tr>
258
- <td><a href="https://oxal.org/projects/sakura/">Sakura</a></td>
259
- <td>165</td><td>3.3 kB</td>
260
- <td></td><td>✔</td><td>✔</td><td>?</td><td>?</td><td>?</td>
261
- <td>(normalize)</td> <!-- Sakura only recommends normalize -->
262
- <td>MIT</td>
263
- </tr>
264
- </tbody>
265
- </table>
266
- <figcaption>A more complex table. Still no classes.</figcaption>
267
- </figure>
268
-
269
-
270
-
271
- <h3>Figures</h3>
272
- <p>Visual elements are important components for appealing documents. Figures such as diagrams or graphs should be encapsulated within a figure element. The image within the figure will be centered by default and shrinks with the screen width.</p>
273
- <figure>
274
- <img src="http://placekitten.com/480/320" alt="Image alt text">
275
- <!-- <img src="http://placekitten.com/180/320" alt="Image alt text"> -->
276
- <figcaption>This is the first figure of this article that has a caption. The label with number will be inserted automatically if placed inside an article.</figcaption>
277
- </figure>
278
-
279
- <p>How about subfigures?</p>
280
- <figure>
281
- <figure>
282
- <img src="http://placekitten.com/240/320" alt="Image alt text">
283
- <figcaption>First Subfigure</figcaption>
284
- </figure>
285
- <figure>
286
- <img src="http://placekitten.com/420/320" alt="Image alt text">
287
- <figcaption>Second Subfigure</figcaption>
288
- </figure>
289
- <figcaption>Example of a figure with two subfigures. Left you see a cat, right you see also a cat.</figcaption>
290
- </figure>
291
-
292
-
293
-
294
- <h3>Code Listing</h3>
295
- <p>You can use inline code, such as <code>div</code>, or show keyboard inputs, such as <kbd>Ctrl+C</kbd>.
296
- However, larger code examples require their own block environment.</p>
297
-
298
- <pre><code>main(int a){
299
- println("hello world")
300
- }</code></pre>
301
-
302
- <p>Unfortunately, captions for listings do not work perfectly at the moment. If you want to provide a caption for the listing, you have to place it inside a figure environment. However, it will be called <q>Figure</q>.</p>
303
- <figure>
304
- <pre><code>main(int a){
305
- println("hello world")
306
- }</code></pre>
307
- <figcaption>The caption for the listing.</figcaption>
308
- </figure>
309
-
310
-
311
- <p>While dynamic code highlighting does not work without JavaScript, you can use a static, CSS-based code highlighter that will do the styling based on <code>&lt;span&gt;</code> tags with classes.</p>
312
-
313
-
314
- <h3>References</h3>
315
- <ol>
316
- <li><a href="https://www.w3.org/TR/css-values-3/">W3C: <q>CSS Values and Units Module Level 3</q>, 2019</a></li>
317
- <li><a href="https://en.wikipedia.org/wiki/HTML5">Wikipedia: <q>HTML5</q></a></li>
318
- <li><a href="https://en.wikiquote.org/wiki/Richard_Feynman#The_Meaning_of_It_All_(1999)">Richard P. Feynman: “The Meaning of It All: Thoughts of a Citizen-Scientist”, 1997</a></li>
319
- </ol>
320
-
321
- </section>
322
-
323
-
324
-
325
-
326
-
327
- <section id="basic">
328
- <h1>Basic Styling</h1>
329
- <p>The following sections provide more detailed but artificial examples of the appearance of different HTML-tags that are styled with Classless.</p>
330
-
331
-
332
- <h2>Typography</h2>
333
- <p>The typography of Classless is purely based on CSS3.</p>
334
- <p>You can use the standard html5 tags such as <code>&lt;b&gt;</code> or <code>&lt;strong&gt;</code> for <b>bold</b> text, <code>&lt;i&gt;</code> or <code>&lt;em&gt;</code> for <i>italic</i> text and <code>&lt;u&gt;</code> for <u>underlined</u> text.</p>
335
- <p>Use <code>&lt;sub&gt;</code> for subscripts like in H<sub>2</sub>O.</p>
336
- <p><small>This small text uses <code>&lt;small&gt;</code> for for fine print, etc.</small></p>
337
- <p><big>This big text uses <code>&lt;big&gt;</code> for a lead paragraph</big></p>
338
- <p>Inline quotations with <code>&lt;q&gt;</code> such as <q>Anna shouted: <q>This is Lars’ car!</q>, when he saw him.</q> insert automatically the correct quotation marks.</p>
339
- <p><cite>This is a citation.</cite></p>
340
- <p>Sometimes, I need to <del>delete</del>, <ins>insert</ins>, or <mark>mark</mark> certain words.</p>
341
- <p>The <dfn>dfn element</dfn> indicates a definition.</p>
342
- <p>The <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p>
343
- <p>The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></p>
344
-
345
-
346
-
347
- <h2>Blockquotes</h2>
348
- <div>
349
- <blockquote>
350
- <p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
351
- <p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
352
- <cite><a href="#!">Said no one, ever.</a></cite>
353
- </blockquote>
354
- </div>
355
-
356
-
357
-
358
- <h2>Headings</h2>
359
- <p> Here are the headings <code>h1</code> to <code>h6</code></p>
360
-
361
- <div class="row">
362
- <div class="col">
363
- <div>
364
- <h1 class="m-0">Heading 1</h1>
365
- <h2>Heading 2</h2>
366
- <h3>Heading 3</h3>
367
- <h4>Heading 4</h4>
368
- <h5>Heading 5</h5>
369
- <h6>Heading 6</h6>
370
- </div>
371
- </div>
372
- <div class="col pt-1">
373
- <pre><code>&lt;h1&gt;Heading 1&lt;/h1&gt;
374
- &lt;h2&gt;Heading 2&lt;/h2&gt;
375
- &lt;h3&gt;Heading 3&lt;/h3&gt;
376
- &lt;h4&gt;Heading 4&lt;/h4&gt;
377
- &lt;h5&gt;Heading 5&lt;/h5&gt;
378
- &lt;h6&gt;Heading 6&lt;/h6&gt;</code></pre>
379
-
380
- </div>
381
- </div>
382
-
383
-
384
-
385
- <h2>Tables</h2>
386
- <p>The basic HTML tables allow already quite complex layouts. As often seen in professional tables, we omit vertical lines and and only insert horizontal lines as visual separation.</p>
387
- <div class="row">
388
- <div class="col">
389
- <table>
390
- <thead><tr>
391
- <th>Head 1</th> <th>Head 2</th>
392
- </tr></thead>
393
- <tbody>
394
- <tr>
395
- <td>A</td>
396
- <td>B</td>
397
- </tr>
398
- <tr>
399
- <td>C</td>
400
- <td>D</td>
401
- </tr>
402
- </tbody>
403
- <caption>Use of thead and tbody.</caption>
404
- </table>
405
- </div>
406
- <div class="col pt-1">
407
- <pre><code>&lt;table&gt;
408
- &lt;thead&gt;
409
- &lt;tr&gt;
410
- &lt;th&gt;Head 1&lt;/th&gt;
411
- &lt;th&gt;Head 2&lt;/th&gt;
412
- &lt;/tr&gt;
413
- &lt;/thead&gt;
414
- &lt;tbody&gt;
415
- ...
416
- &lt;/tbody&gt;
417
- &lt;caption&gt;Use of ...&lt;/caption&gt;
418
- &lt;/table&gt;</code></pre>
419
-
420
- </div>
421
- </div>
422
-
423
-
424
-
425
- <div class="row">
426
- <div class="col">
427
- <table>
428
- <tr>
429
- <td colspan="2">Test</td>
430
- <td rowspan="2">Ctrl</td>
431
- </tr>
432
- <tr><td>A</td><td>B</td></tr>
433
- <tr><td>4</td><td>2</td><td>X</td></tr>
434
- <caption>Cells spanning several rows or columns.</caption>
435
- </table>
436
- </div>
437
- <div class="col">
438
- <pre><code>&lt;table&gt;
439
- &lt;tr&gt;
440
- &lt;td colspan=&quot;2&quot;&gt;Test&lt;/td&gt;
441
- &lt;td rowspan=&quot;2&quot;&gt;Ctrl&lt;/td&gt;
442
- &lt;/tr&gt;
443
- &lt;tr&gt;
444
- &lt;td&gt;A&lt;/td&gt;&lt;td&gt;B&lt;/td&gt;
445
- &lt;/tr&gt;
446
- ...
447
- &lt;/table&gt;</code></pre>
448
- </div>
449
- </div>
450
-
451
-
452
- <figure>
453
- <table>
454
- <thead>
455
- <tr>
456
- <th colspan="2">Test</th>
457
- <th rowspan="2">Ctrl</th>
458
- </tr>
459
- <tr><td>A</td><td>B</td></tr>
460
- </thead>
461
- <tbody>
462
- <tr><td>4</td><td>2</td><td>X</td></tr>
463
- </tbody>
464
- </table>
465
- <figcaption>A table in a figure environment will be centered and produce a scrollable overflow on mobile devices.</figcaption>
466
- </figure>
467
-
468
-
469
-
470
-
471
-
472
-
473
-
474
- <h2>Lists</h2>
475
- <p>In order to display several aspects in a concise way, lists as shown in the following are useful and also deserve a proper spacing.</p>
476
- <div class="row">
477
- <div class="col">
478
- <h4>Ordered List</h4>
479
- <ol>
480
- <li>List Item 1</li>
481
- <li>List Item 2</li>
482
- <li>List Item 3</li>
483
- </ol>
484
- </div>
485
- <div class="col">
486
- <h4>Unordered List</h4>
487
- <ul>
488
- <li>List Item 1</li>
489
- <li>List Item 2</li>
490
- <li>List Item 3</li>
491
- </ul>
492
- </div>
493
- <div class="col">
494
- <h4>Definition List</h4>
495
- <dl>
496
- <dt>Term</dt>
497
- <dd>A Term is defined by this definition.</dd>
498
- </dl>
499
- </div>
500
- </div>
501
- <p>Here, we have also demonstrated the basic usage of rows and columns, which will automatically rearrange once the page width falls below a certain threshold. This ensures that the page will also look well on small tables and phones.</p>
502
-
503
- <h2>Misc</h2>
504
- <p>Some other elements</p>
505
- <details>
506
- <summary>A summary heading that spans multiple lines can briefly tell you something. If you want to know more, you have to click.</summary>
507
- <p>These are the details that only become visible once you click on the the summary heading. This is great to hide supplementary information by default.</p>
508
- </details>
509
-
510
- <ul>
511
- <li>
512
- <details>
513
- <summary>A summary in a list</summary>
514
- <p>These are the details that only become visible once you click on the the summary heading. This is great to hide supplementary information by default.</p>
515
- </details>
516
- </li>
517
- <li>Second Item</li>
518
- </ul>
519
-
520
-
521
- <hr>
522
-
523
- <figure>
524
- <video controls>
525
- <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
526
- </video>
527
- <figcaption>A test video</figcaption>
528
- </figure>
529
-
530
-
531
- <figure>
532
- <svg width="74.08mm" height="15.87mm" version="1.1" viewBox="0 0 74.08 15.87" xmlns="http://www.w3.org/2000/svg">
533
- <g transform="translate(-30.43 -73.43)">
534
- <rect x="30.43" y="73.43" width="27.78" height="15.87" fill="#008888" style="paint-order:normal"/>
535
- <path d="m59.53 81.36h11.91l1e-6 2.646 2.646-2.646-2.646-2.646-1e-6 2.646" fill="none" stroke="#000000" stroke-width=".7937"/>
536
- <rect x="76.73" y="73.43" width="27.78" height="15.87" fill="#0077cc" style="paint-order:normal"/>
537
- </g>
538
- </svg>
539
- <figcaption>A simple inline svg.</figcaption>
540
- </figure>
541
-
542
- <h3>Math</h3>
543
- <p>Math would have been possible without JavaScript but Google dropped support for MathML<cite><a href="https://www.cnet.com/news/google-subtracts-mathml-from-chrome-and-anger-multiplies">CNET: “Google subtracts MathML from Chrome, and anger multiplies”, 2013</a></cite>.
544
- The common alternatives are MathJax and KaTeX. While Classless does not support math on its own, it looks very decent in combination with KaTeX default settings.</p>
545
-
546
- <h4>KaTeX Examples</h4>
547
- <p>The term $\sqrt{a^2 + b^2}$ is an example of a KaTeX equation. Displaystyle equations are $$\int x^2 \mathrm dx$$</p>
548
-
549
- <figure>
550
- $$x = \frac{ - b \pm \sqrt {b^2 - 4ac} }{2a}$$
551
- <figcaption>A Math example</figcaption>
552
- </figure>
553
-
554
- </section>
555
-
556
-
557
-
558
-
559
- <section id="extra">
560
-
561
- <h1>Extra Styling</h1>
562
- <p>These features are included but are marked as extras such that you can easily remove them from the CSS file in case you do not need them.</p>
563
-
564
- <h2>Navigation Bar</h2>
565
- <p>Yes! Just 30 lines of CSS code for a simple yet full responsive navigation bar including dropdown menus and collapsing items on mobile phones.</p>
566
-
567
- <div>
568
- <nav class="bg-light" style="position: relative;">
569
- <ul>
570
- <li>Brand</li>
571
- <li><a href="#extra">Item </a></li>
572
- <li><a href="#extra">Menu ▾</a>
573
- <ul>
574
- <li><a href="#extra">Menu 1</a></li>
575
- <li><a href="#extra">Menu 2</a></li>
576
- </ul>
577
- </li>
578
- <li class="float-right"><a>Right</a></li>
579
- </ul>
580
- </nav>
581
- </div>
582
-
583
-
584
- <pre class="mt-1"><code>&lt;nav&gt;
585
- &lt;ul&gt;
586
- &lt;li&gt;Brand&lt;/li&gt;
587
- &lt;li&gt;&lt;a href="#"&gt;Item &lt;/a&gt;&lt;/li&gt;
588
- &lt;li&gt;&lt;a href="#"&gt;Menu ▾&lt;/a&gt;
589
- &lt;ul&gt;
590
- &lt;li&gt;&lt;a href="#"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
591
- &lt;li&gt;&lt;a href="#"&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
592
- &lt;/ul&gt;
593
- &lt;/li&gt;
594
- &lt;li class="float-right"&gt;Right&lt;/li&gt;
595
- &lt;/ul&gt;
596
- &lt;/nav&gt;</code></pre>
597
-
598
-
599
-
600
- <h2>Margin Notes</h2>
601
- <aside>
602
- <div class="card">
603
- <h4>Side Note</h4>
604
- <p>This is a card wrapped inside an <code>&lt;aside&gt;</code> element.</p>
605
- </div>
606
- </aside>
607
- <p>You can place side notes using the <code>&lt;aside&gt;</code> element. The side notes are considered supplementary and are not omitted on narrow screens with a width lower than <code>40rem</code>. So, if you read this on a mobile device, you cannot see the side note.</p>
608
-
609
-
610
-
611
-
612
- <h2>Form elements</h2>
613
- <p>If you want to use forms, you will need PHP or JavaScript, which then exceeds the typical usecase of a simple article. However, to create a consistent appearance, Classless provides some basic styling on these elements as well.</p>
614
- <form>
615
- <fieldset>
616
- <legend>Input fields</legend>
617
-
618
- <div class="row">
619
- <div class="col">
620
- <label for="in_text">Text Input</label>
621
- <input id="in_text" type="text" placeholder="Text Input">
622
- <label for="in_password">Password</label>
623
- <input id="in_password" type="password" placeholder="Type your Password">
624
- </div>
625
- <div class="col">
626
- <label for="in_dd">Date input</label>
627
- <input type="date" id="in_dd" value="1970-01-01">
628
- <label for="in_r">Range input</label>
629
- <input type="range" id="in_r" value="10">
630
- </div>
631
- </div>
632
-
633
- <label for="select">Select</label>
634
- <select id="select">
635
- <optgroup label="Option Group">
636
- <option>Option One</option>
637
- <option>Option Two</option>
638
- <option>Option Three</option>
639
- </optgroup>
640
- </select>
641
- </fieldset>
642
-
643
- <fieldset id="forms__checkbox">
644
- <legend>Checkboxes and Radiobuttons</legend>
645
- <div class="row">
646
- <div class="col">
647
- <h3>Checkboxes</h3>
648
- <input id="checkbox1" name="checkbox" type="checkbox" checked="checked">
649
- <label for="checkbox1">Checkbox A</label><br>
650
- <input id="checkbox2" name="checkbox" type="checkbox">
651
- <label for="checkbox2">Checkbox B</label><br>
652
- <input id="checkbox3" name="checkbox" type="checkbox">
653
- <label for="checkbox3">Checkbox C</label>
654
- </div>
655
- <div class="col">
656
- <h3>Radio buttons</h3>
657
- <input id="radio1" name="radio" type="radio" checked="checked">
658
- <label for="radio1">Radio Button 1</label><br>
659
- <input id="radio2" name="radio" type="radio">
660
- <label for="radio2">Radio Button 2</label><br>
661
- <input id="radio3" name="radio" type="radio">
662
- <label for="radio3">Radio Button 3</label>
663
- </div>
664
- </div>
665
- </fieldset>
666
-
667
- <fieldset id="forms__action">
668
- <legend>Buttons</legend>
669
- <p>
670
- <button type="submit">SUBMIT</button>
671
- <button type="button">BUTTON</button>
672
- <button type="reset">RESET</button>
673
- <button type="button" disabled>DISABLED</button>
674
- </p>
675
- </fieldset>
676
- </form>
677
- </section>
678
-
679
-
680
-
681
-
682
-
683
- <section id="bootless">
684
- <h1>Bootless.css</h1>
685
- <p>Some concepts, such as grids and cards, are not covered by the default HTML5 tags and require CSS classes.
686
- Therefore, Classless defines a few classes with the same class names as the popular framework Bootstrap.</p>
687
-
688
- <h2 id="grid">Grid System</h2>
689
- <p>Classless provides a simple grid system with the same class names as bootstrap.</p>
690
-
691
-
692
- <div class="row">
693
- <div class="col-6"><h4>Colum 1/2</h4></div>
694
- <div class="col">
695
- <p>This text is on the other side explaining something. If the width of the viewport is small enough, this text should be visible below the the heading on the left.</p>
696
- </div>
697
- </div>
698
-
699
- <pre><code>&lt;div class="row"&gt;
700
- &lt;div class="col"&gt;
701
- &lt;h4&gt;Column 1/2&lt;/h4&gt;
702
- &lt;/div&gt;
703
- &lt;div class="col"&gt;
704
- &lt;p&gt;This text is on the other side ...&lt;/p&gt;
705
- &lt;/div&gt;
706
- &lt;/div&gt;</code></pre>
707
-
708
-
709
- <h3>Columns</h3>
710
- <p>There are also classes for columns with special width such as <code>.col-4</code> (4/12) resulting in one third of the width:</p>
711
-
712
- <div class="row">
713
- <div class="col-4"><h4 class="bg-light p-1">Colum 1/3</h4></div>
714
- <div class="col-4"><h4 class="bg-light p-1">Colum 2/3</h4></div>
715
- <div class="col-4"><h4 class="bg-light p-1">Colum 3/3</h4></div>
716
- </div>
717
-
718
- <p>and also <code>.col-3</code> (3/12) resulting in 4 cols:</p>
719
- <div class="row">
720
- <div class="col-3"><h4 class="bg-light p-1">Colum 1/4</h4></div>
721
- <div class="col-3"><h4 class="bg-light p-1">Colum 2/4</h4></div>
722
- <div class="col-3"><h4 class="bg-light p-1">Colum 3/4</h4></div>
723
- <div class="col-3"><h4 class="bg-light p-1">Colum 4/4</h4></div>
724
- </div>
725
-
726
- <p>If you use a <code>.col-X</code> with limited width, the other <code>.col</code> will take up the remaining space:</p>
727
- <div class="row">
728
- <div class="col-4"><h4>Colum 1/3</h4></div>
729
- <div class="col">
730
- <p>This text is on the other side explaining something. If the width of the viewport is small enough, this text should be visible below the the heading on the left.</p>
731
- </div>
732
- </div>
733
- </section>
734
-
735
- <section id="card">
736
- <h2>Cards</h2>
737
- <p>If you want to group special content from the normal text flow, cards will be your friends.</p>
738
-
739
- <div class="row">
740
- <div class="col">
741
- <div class="card">
742
- <h4>Card Heading</h4>
743
- <hr>
744
- <p>This is the card body.</p>
745
- </div>
746
- </div>
747
- <div class="col">
748
- <pre><code>&lt;div class="card"&gt;
749
- &lt;h4&gt;Card Heading&lt;/h4&gt;
750
- &lt;hr&gt;
751
- &lt;p&gt;This is the card body.&lt;/p&gt;
752
- &lt;/div&gt;</code></pre>
753
- </div>
754
- </div>
755
- </section>
756
-
757
-
758
- </article>
759
-
760
- </main>
761
-
762
- <footer>
763
- <hr>
764
- <h5>Classless.css</h5>
765
- <p>Code on <a href="http://github.com/emareg/classlesscss">GitHub</a>.<br>
766
- <a href="mailto:john.doe@foo.bar">john.doe@foo.bar</a><br>
767
- <a href="tel:+1234567890">+1234567890</a>
768
- </p>
769
- </footer>
770
- </body>
771
-
772
-
773
- <!-- Javascript here, only required for switching themes dynamically -->
774
- <script>
775
-
776
- // only for convenience, not required for Classless!
777
- function clipBoard(value) {
778
- var tempInput = document.createElement("input");
779
- tempInput.style = "position: absolute; left: -1000px; top: -1000px";
780
- tempInput.value = value;
781
- document.body.appendChild(tempInput);
782
- tempInput.select();
783
- document.execCommand("copy");
784
- document.body.removeChild(tempInput);
785
- }
786
-
787
- // only for switching theme Demo, not required for Classless!
788
- function switchTheme(e) {
789
- switch(e.value) {
790
- case "1": document.documentElement.setAttribute('data-theme', 'light'); break;
791
- case "2": document.documentElement.setAttribute('data-theme', 'dark'); break;
792
- case "3": document.documentElement.setAttribute('data-theme', 'sepia'); break;
793
- }
794
- }
795
-
796
- function switchCSS(e){
797
- switch(e.value) {
798
- case "1": document.getElementById('cssfile').href = "classless.css"; break;
799
- case "2": document.getElementById('cssfile').href = "classless-tiny.css"; break;
800
- }
801
- }
802
-
803
- </script>
804
-
805
-
806
- <!-- KaTeX, not required for Classless, just to demonstrate its compatibility -->
807
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
808
-
809
- <!-- The loading of KaTeX is deferred to speed up page rendering -->
810
- <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
811
-
812
- <!-- To automatically render math in text elements, include the auto-render extension: -->
813
- <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
814
- onload="renderMathInElement(document.body);"></script>
815
-
816
- <script type="text/javascript">
817
- window.addEventListener("load", function(){
818
- renderMathInElement(
819
- document.body,
820
- {
821
- delimiters: [
822
- {left: "$$", right: "$$", display: true},
823
- {left: "$", right: "$", display: false},
824
- ]
825
- }
826
- );
827
- });
828
- </script>
829
-
830
-
831
- </html>