@newlogic-digital/ui 3.2.0 → 3.4.2

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 (89) hide show
  1. package/README.md +1 -5
  2. package/package.json +21 -14
  3. package/src/data/main.json +5 -1
  4. package/src/emails/{email.css → styles/email.css} +1 -1
  5. package/src/emails/templates/Content.twig +16 -0
  6. package/src/emails/templates/Header.twig +14 -0
  7. package/src/emails/templates/Layout.twig +23 -0
  8. package/src/scripts/Components/CookieConsent.js +0 -1
  9. package/src/scripts/Layout/Header.js +23 -11
  10. package/src/scripts/Layout/Main.js +6 -39
  11. package/src/scripts/Libraries/+.js +2 -1
  12. package/src/scripts/Libraries/Dialog.js +35 -65
  13. package/src/scripts/Libraries/Drawer.js +21 -15
  14. package/src/scripts/Libraries/Form.js +14 -18
  15. package/src/scripts/Libraries/Naja.js +35 -0
  16. package/src/scripts/Libraries/NativeSlider.js +3 -2
  17. package/src/scripts/Libraries/ReCaptcha.js +24 -4
  18. package/src/scripts/Libraries/Stimulus.js +1 -31
  19. package/src/scripts/Libraries/Swup.js +24 -32
  20. package/src/scripts/Libraries/Tabs.js +5 -5
  21. package/src/scripts/Libraries/Tippy.js +3 -1
  22. package/src/scripts/Ui/+.js +0 -1
  23. package/src/scripts/Ui/Checkbox.js +4 -13
  24. package/src/scripts/Ui/Input.js +19 -65
  25. package/src/scripts/Ui/Select.js +11 -39
  26. package/src/scripts/Ui/Text.js +2 -4
  27. package/src/scripts/Utils/Functions/+.js +1 -1
  28. package/src/scripts/Utils/Functions/checkValidity.js +44 -0
  29. package/src/scripts/Utils/Functions/loadStimulus.js +4 -1
  30. package/src/scripts/Utils/cdn.js +3 -3
  31. package/src/scripts/Utils/global.js +6 -8
  32. package/src/styles/Components/+.css +1 -1
  33. package/src/styles/Components/Dialog/Default.css +17 -52
  34. package/src/styles/Components/Dropdown/+.css +1 -0
  35. package/src/styles/{Ui/Dropdown.css → Components/Dropdown/Default.css} +1 -1
  36. package/src/styles/Layout/Main.css +4 -20
  37. package/src/styles/Libraries/+.css +0 -1
  38. package/src/styles/Libraries/Dialog.css +23 -7
  39. package/src/styles/Libraries/Drawer.css +3 -9
  40. package/src/styles/Libraries/Hint.css +4 -3
  41. package/src/styles/Libraries/NativeSlider.css +8 -0
  42. package/src/styles/Libraries/Ripple.css +4 -17
  43. package/src/styles/Libraries/Tippy.css +1 -1
  44. package/src/styles/Ui/+.css +0 -1
  45. package/src/styles/Ui/Badge.css +1 -1
  46. package/src/styles/Ui/Btn.css +24 -6
  47. package/src/styles/Ui/Checkbox.css +28 -3
  48. package/src/styles/Ui/Heading.css +2 -1
  49. package/src/styles/Ui/Icon.css +2 -2
  50. package/src/styles/Ui/Image.css +1 -7
  51. package/src/styles/Ui/Input.css +65 -18
  52. package/src/styles/Ui/Label.css +2 -2
  53. package/src/styles/Ui/Link.css +13 -6
  54. package/src/styles/Ui/Notice.css +1 -1
  55. package/src/styles/Ui/Select.css +3 -5
  56. package/src/styles/Ui/Text.css +18 -4
  57. package/src/styles/Ui/Title.css +3 -2
  58. package/src/styles/Utils/+.css +1 -0
  59. package/src/styles/Utils/breakpoints.css +9 -0
  60. package/src/styles/Utils/default.css +12 -115
  61. package/src/styles/Utils/tailwind/+.css +1 -0
  62. package/src/styles/Utils/tailwind/base.css +0 -12
  63. package/src/styles/Utils/tailwind/utilities.css +48 -0
  64. package/src/styles/Utils/vars.css +28 -39
  65. package/src/styles/Utils/vendor.css +2 -1
  66. package/src/styles/main.css +2 -3
  67. package/src/templates/Components/Dialogs/Basic.twig +15 -17
  68. package/src/templates/Layout/Main.twig +0 -6
  69. package/src/templates/Sections/Ui/Docs/@intro.html +97 -0
  70. package/src/templates/Sections/Ui/Docs/@nav.html +195 -0
  71. package/src/templates/Sections/Ui/Docs/@styles.html +100 -0
  72. package/src/templates/Sections/Ui/Docs/Default.twig +1600 -0
  73. package/src/templates/Sections/Ui/Icons.html +28 -0
  74. package/src/templates/Sections/Ui/Intro.html +136 -0
  75. package/src/templates/Sections/Ui.twig +5 -2090
  76. package/src/templates/Utils/sections.twig +2 -2
  77. package/src/views/{dialog-basic.json.twig → dialog/basic.json.twig} +1 -1
  78. package/src/views/{json-tippy.json.twig → dropdown/tippy.json.twig} +3 -3
  79. package/src/views/email/email.twig +6 -0
  80. package/src/views/gdpr.json +2 -1
  81. package/src/views/index.json +2 -2
  82. package/src/views/ui-icons.json +12 -0
  83. package/src/views/ui.json +2 -2
  84. package/vite.config.js +24 -4
  85. package/src/emails/email.twig +0 -60
  86. package/src/scripts/Ui/Radio.js +0 -23
  87. package/src/scripts/Utils/Functions/inView.js +0 -25
  88. package/src/styles/Components/Item/+.css +0 -1
  89. package/src/styles/Libraries/Lazysizes.css +0 -9
package/src/templates/Sections/Ui.twig CHANGED
@@ -1,2093 +1,8 @@
1
1
  {% if section.intro %}
2
- <section class="s-intro pt-6 pb-8">
3
- <div class="container">
4
- <div class="wrp_s_head t:py-12">
5
- <h1 class="ui-heading m:text-2xl t:text-5xl t:leading-tight dark:text-light" data-size>Lightweight, modern and modular CSS&nbsp;framework with best principles</h1>
6
- <div class="ui-text t:text-2xl pt-8 pb-6 text-secondary dark:text-light dark:text-opacity-80">
7
- <p>Component framework with easy syntax. Modern approach of CSS properties, enriched with utility classes from <a href="https://tailwindcss.com" target="_blank">Tailwind</a>. Inspired by favourite frameworks like <a href="https://getbootstrap.com" target="_blank">Boostrap</a> and <a href="https://bulma.io" target="_blank">Bulma</a>.</p>
8
- </div>
9
- <div class="ui-text text-secondary dark:text-light dark:text-opacity-80">
10
- <p>Javascript implementation is mainly intended for use on backend rendered websites and applications such as with PHP</p>
11
- </div>
12
- <div class="row py-6 g-3 flex-wrap">
13
- <div class="col">
14
- <a href="/ui" class="ui-btn bg-primary">
15
- <span>Documentation</span>
16
- </a>
17
- </div>
18
- <div class="col">
19
- <a href="https://github.com/newlogic-digital/ui" target="_blank" rel="noopener" class="ui-btn bg-secondary">
20
- <span>Github v3.1.x</span>
21
- </a>
22
- </div>
23
- </div>
24
- <div class="inline-flex bg-gray-50 dark:bg-light dark:bg-opacity-10 font-mono leading-6 py-3 px-6 rounded-xl items-center justify-center">
25
- <span class="text-gray-900 dark:text-light dark:text-opacity-80"><span class="hidden sm:inline text-gray-500" aria-hidden="true">$ </span>git clone --depth 1 https://github.com/newlogic-digital/ui.git . && npm i</span>
26
- </div>
27
- </div>
28
- <div class="wrp_s_body">
29
- <h1 class="ui-heading mt-4">Under the hood</h1>
30
- <div class="row py-6 gy-3 gx-8 flex-wrap items-center">
31
- <div class="col">
32
- <a href="https://postcss.org/" target="_blank">
33
- <svg class="w-auto h-12" viewBox="0 0 79 78" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M15.447 32.623c.106.08.29.132.106.29-.132.184-.29.342-.395.553-.105.185-.184.237-.342.106.21-.343.42-.66.63-.95zM68.342 60.24c0 .078.026.13.026.21.053-.105.053-.158.08-.21h-.106zm0 .236v-.026.026zm-5.368 10.277l-4.58-25.402c-.078-.025-.183-.077-.368-.13.053.105.08.184.106.263.13-.026.184-.026.236-.052 0-.026 0-.052.027-.08l4.58 25.404zm-4.737-31.12c-.026.078-.026.158-.026.237 0-.08 0-.16.028-.238zm.026.526c-.026 0-.026 0-.052-.028v.026c.028.026.028.026.054 0zm-.052.21v-.185c-.077.026-.156.026-.262.053.132.05.264.078.264.13z" fill="#DD3735"/><path d="M78.71 33.967c-.052-1.028-.078-2.056-.184-3.083-.184-1.397-.368-2.82-.684-4.19-.237-1.133-.63-2.214-1.026-3.294-.5-1.265-1-2.556-1.632-3.768-1.026-1.95-2.368-3.69-3.605-5.508-.818-1.16-1.87-2.108-2.66-3.294-.447-.685-1.105-1.264-1.763-1.79-1.053-.845-2.158-1.61-3.263-2.347a32.525 32.525 0 00-2.58-1.634c-.71-.397-1.473-.713-2.21-1.056-.842-.395-1.658-.87-2.605-1.054-.238-.05-.448-.13-.685-.21-.605-.21-1.184-.447-1.79-.632-.92-.29-1.815-.632-2.763-.87C50.342 1 49.394.843 48.446.71 47.394.555 46.316.5 45.262.397a26.83 26.83 0 00-2.026-.184c-1-.052-2.026-.052-3.026-.078-.5-.027-1.026-.08-1.526-.053-.763.026-1.526.105-2.29.21-.736.08-1.473.21-2.183.317-.867.105-1.735.158-2.604.264-.816.106-1.658.264-2.473.396-.29.053-.58.158-.87.21-.63.132-1.288.185-1.92.396-1.13.344-2.263.74-3.368 1.16-1.027.422-2.027.87-3 1.397-1 .552-1.948 1.21-2.895 1.844a45.325 45.325 0 00-2.66 1.923c-.84.66-1.63 1.397-2.394 2.135-.42.42-.763.922-1.158 1.396-.657.765-1.315 1.502-1.947 2.293-.524.66-1 1.344-1.5 2.03-.893 1.21-1.656 2.502-2.366 3.794-.29.527-.553 1.054-.816 1.58-.395.79-.816 1.555-1.184 2.372-.264.554-.474 1.16-.632 1.766-.367 1.292-.736 2.61-1.078 3.9-.316 1.16-.395 2.372-.42 3.558-.027 1.054.078 2.082.183 3.136.027.264-.13.58.184.79-.105.29-.026.45.13.5-.182.29.08.476-.024.74-.027.052.08.157.13.236 0 .08-.025.185 0 .264.028.237.133.474.133.738 0 .184.157.395.21.58.026.078 0 .21-.053.263-.158.184-.132.342.105.448.133.342.08.5.054.66.052.236-.027.315 0 .368.21.422.29.896.315 1.37 0 .106.053.212.106.343.026 0 0 .5 0 .5.13-.078.237-.104.368-.157.08.342.158.66.263.95.132.21.132.314.08.34.105.474.157.922.34 1.37 0-.5-.05-1-.13-1.475.368.132.684.263.895.263.027-.08.053-.184.08-.237-.158-.157-.29-.394-.448-.552.053.21 0 .29 0 .37-.105-.054-.237-.107-.368-.16.105-.13.21-.263.368-.42 0-.238-.13-.45-.5-.423.158-.052.316-.13.5-.184.29-.157-.026-.447-.026-.816.026-.447-.237-.895-.316-1.37-.132-.737-.105-1.844-.184-2.582-.158-.132-.29.21-.316.237.08.632.158 1.264.21 1.897-.157-.527-.263-1.107-.394-1.74-.027.185-.053.264-.053.37-.13.13-.026.29.053.474-.184-.08-.395-.052-.395-.052v.738c-.262-.264-.34-.474-.473-.66-.052-.21-.08-.42-.13-.63.05-.133 0-.212 0-.29a15.968 15.968 0 01-.08-.634c.026-.026-.026-.42-.026-.42.21.025.343.05.474.05-.263-.34-.08-.552.027-.763.053-.106.237-.13.29-.238.21-.395.553-.71.553-1.212 0-.237.08-.5.105-.738.053-.448.105-.896.13-1.344.054-.58 0-1.16.133-1.713.212-.92.475-1.843.764-2.766.21-.66.448-1.29.71-1.95.395-1.028.764-2.056 1.264-3.03.71-1.424 1.526-2.794 2.316-4.19.5-.87 1.026-1.687 1.58-2.53.525-.817 1.05-1.66 1.657-2.425a21.452 21.452 0 012.79-2.978c1.053-.948 2.053-1.923 3.184-2.793a31.984 31.984 0 014.682-3.006c1.343-.71 2.737-1.266 4.132-1.793.895-.342 1.868-.5 2.79-.79 1.052-.343 2.105-.5 3.21-.527.71-.027 1.395-.106 2.105-.185.632-.05 1.263-.104 1.948-.183-.08.105-.106.158-.132.21-.288.422-.604.844-.894 1.265-.237.343-.5.712-.737 1.054-.422.555-.87 1.108-1.264 1.688-.605.87-1.158 1.766-1.79 2.635-.63.843-1.315 1.634-1.973 2.45-.868 1.134-1.684 2.293-2.552 3.426-.79 1.08-1.63 2.11-2.394 3.19-.684.947-1.29 1.95-1.948 2.923-.973 1.45-1.947 2.872-2.92 4.322a271.928 271.928 0 01-2.316 3.294c-.053.08-.132.104-.21.157-.21.342-.21.527-.29.685-.21.395-.42.79-.658 1.16-.132.21-.316.394-.474.605-.026-.316.42-.474.21-.87-.13.212-.263.396-.394.607l-.316.63c.105.08.29.133.105.29-.08.133-.158.29-.237.423a.954.954 0 00.29-.264c0 .29-.158.526-.29.763-.105.21-.368.37-.552.527.026.027.21.106.237.132.237-.08.316-.21.343-.132.08-.105.158-.184.184-.263.104-.264.262-.474.525-.58.106-.053.184-.132.263-.21.79-.818 1.606-1.608 2.316-2.478 1.106-1.345 2.106-2.74 3.16-4.11.446-.58.973-1.16 1.446-1.714.078.606.026 1.185 0 1.74-.08.974-.132 1.95-.21 2.95-.027.395 0 .79-.027 1.186 0 .105-.08.184-.08.29 0 .263.08.553.08.817-.08.975-.186 1.923-.265 2.898-.027.21.078.422.13.607-.13 1.422.16 2.925-.078 4.427.184-.29.237-.474.237-.658.025-.158 0-.316 0-.5v-.264c.025-.475.13-.975.078-1.45-.053-.527-.053-1.027.053-1.528.053-.21-.026-.474.106-.738v.395c-.026 1.5.027 3.003-.183 4.505-.027.132.08.37-.21.343-.238.474.052.817-.21 1.08-.054.053.05.29.077.448-.106.317-.106.317.052.343.026.58.08 1.106.105 1.66.42-1 .21-2.03.396-3.058.026.422.053.844.026 1.29 0 .687-.026 1.345-.052 2.03 0 .132-.027.264-.053.396-.08.37-.105.738-.237 1.08-.105.264-.052.66-.052.975v1.003c.105.448-.027.685.052.948-.08.265-.105.344-.08.423l.08.395c.527-.053.29.343.5.553-.158.212-.105.29-.105.397 0 .237-.025.448-.052.685 0 .606-.026 1.212-.026 1.792 0 .08.026.157.026.236 0 .054-.026.74-.026.74.053.078 0 .157-.08.236-.025 0-.104-3.347-.104-3.347h-.395c-.052 1.58.08 3.003-.21 4.48-.316.025-.42.078-.764.078-.816 0-1.632 0-2.448.026-.974 0-1.92.026-2.895.026-.472 0-.972.054-1.446.054-.632 0-1.29-.08-1.92-.08-.975 0-1.922.08-2.896.106-.71.026-1.42.026-2.13.053-.475.025-.95.05-1.422.104-.21.026-.395.105-.658.184-.08 0-.263-.026-.42 0-.265.053-.5.21-.765.264-.395.08-.5.184-.448.58v.263c-.026.052.58-.08.58-.08-.054 0-.08.158-.16.29.212-.08.343-.132.475-.184.395.185.737.08 1.052.16 1.026.262 2.078.37 3.13.473.685.053 1.343.08 2.027.105.973.053 1.947.106 2.92.106.816 0 1.606-.08 2.42-.08 1.13 0 2.264.052 3.395.08.237 0 .5-.028.763-.028h1.92c1.712-.052 3.422-.08 5.133-.13.975-.028 1.975-.08 2.948-.107l3-.08c1.158-.026 2.316-.026 3.448-.05.868 0 1.71-.03 2.58-.055.972-.026 1.972-.105 2.946-.157.527-.027 1.054-.08 1.58-.132.632-.052 1.29-.13 1.92-.157.948-.054 1.922-.08 2.87-.133 1.184-.078 2.368-.183 3.578-.21 1.106-.052 2.237-.026 3.343-.052.974-.027 1.948-.08 2.948-.106l1.66-.08s1.104-.026 1.657-.08c.947-.052 1.894-.157 2.842-.183.604-.027 1.21 0 1.815-.027.973-.026 1.973-.08 2.947-.08.367 0 .762.054 1.236.08-.21.185-.342.29-.5.422.105.026.21.08.316.132a.71.71 0 01-.42.13c-.054.133-.107.186-.16.45h.474c-.184 0-.342.237-.526.395-.21-.054-.395 0-.5.29.184.104.158.183.132.29-.316.104-.553.21-.42.552-.107.052-.238.105-.37.184-.13.21-.368.263-.316.553.106.025.21.08.29.104-.132.053-.263.132-.395.184-.473.29-.262.422-.157.554-.08.053-.158.105-.237.132.052.237.13.29.157.29a9.301 9.301 0 00-.395.316c-.08.237-.185.342-.29.5-.105.158-.158.37-.29.527-.552.607-.947 1.32-1.657 1.793-.264.185-.5.422-.737.66-.474.447-.895.948-1.395 1.37a29.595 29.595 0 01-2.052 1.554c-.867.606-1.735 1.212-2.604 1.792-.474.315-1 .552-1.5.842-.5.29-.974.554-1.474.843-.316.21-.606.5-.948.66-.868.37-1.79.685-2.684 1.028-.87.37-1.5.685-2.158.922-.605.21-1.237.37-1.868.5-.21.054-.448 0-.685.027-.448.08-.895.186-1.343.238-1.158.158-2.316.264-3.473.422-.685.08-1.343.21-2.027.29-.473.026-.973-.026-1.447-.026-.342 0-.71.08-1.053.027-.552-.08-1.105-.21-1.658-.316-.13-.026-.316-.08-.42-.026-.21.106-.396-.052-.607 0-.13.027-.262-.08-.394-.08-.106-.025-.238.028-.37 0-.29-.078-.552-.183-.87-.157-.313.026-.63-.132-.97-.21-.475-.106-.92-.21-1.396-.317a2.381 2.381 0 01-.525-.237c-.685 0-1.133-.026-1.554-.185-.368-.13-.71-.315-1.105-.262-.104.026-.183-.026-.29-.026-.08-.106-.157-.317-.235-.317-.526.027-.842-.42-1.29-.553-.236-.08-.42-.343-.657-.422-.58-.237-1.052-.737-1.71-.816-.21-.027-.42-.132-.658-.21.08.104.13.183.21.262-.763-.37-1.473-.79-2.184-1.186-.104-.026-.183-.13-.262-.184l-.71-.474c-.395.08-.553-.08-.66-.132-.71-.5-1.525-.817-2.21-1.37-.29-.238-.63-.396-.84-.686-.37-.448-.817-.764-1.317-1.027-.394-.21-.762-.448-1.13-.685-.185-.132-.37-.29-.37-.58 0-.185-.078-.37-.315-.264-.105-.158-.21-.342-.342-.395-.316-.13-.526-.37-.763-.58-.237-.21-.42-.5-.71-.605-.527-.21-.843-.658-1.158-1.027-.738-.87-1.396-1.82-2.08-2.74-.053-.08-.158-.133-.237-.212.105.29.237.527.368.79-.262-.105-.446-.29-.604-.474-.027.027 1.815 3.057 1.815 3.057.16.237.29.475.448.712a.813.813 0 01-.79-.422c-.236-.42-.5-.684-1.026-.63a4.588 4.588 0 01-.13-.58c-.107 0-.185 0-.37-.027.37.58.685 1.08 1.027 1.66-.133-.08-.21-.132-.265-.158.473.5.815 1.133 1.42 1.45.132.605.816.895.974 1.475-.13-.027-.238-.053-.37-.08-.21-.263-.447-.526-.683-.816.052.184.13.342.236.474.316.395.606.79.974 1.133.132.134.316.187.316.424.21.105.29.13.368.13.054.16-.025.397.29.344.21.395.42.395.71.264.343.343.528.37.764.16 0 .13.026.262.026.368.105-.053.08-.132.08-.264.13.105.21.158.262.21.263.37.5.712.868 1.002.5.422.948.87 1.42 1.265.922.765 1.95 1.398 2.975 1.977 1.264.712 2.475 1.476 3.764 2.16 1.552.818 3.21 1.372 4.92 1.767.632.132 1.237.263 1.87.42.55.16 1.104.397 1.657.528.842.185 1.71.343 2.552.5.183.027.37.054.58.08.235.053.524-.053.577.027.132.21.237.104.395.078.184-.053.395-.053.605-.053.737.026 1.447.184 2.184.132.16 0 .396-.133.528.13.236-.105.368-.105.473-.13.028.236 0 .236-.05.262-.054.026-.133.053-.238.132.947.184 1.842.21 2.63 0 1.37.105 2.554-.053 3.686-.448.105.132.184.316.342.053.052-.08.184-.107.29-.133.236-.053.526-.158.736-.08.238.08.317-.13.5-.13.317 0 .606-.027.896-.08.158-.026.316-.105.5-.158a1.275 1.275 0 00-.58-.133c.317-.158.606-.29.896-.42-.053.078-.106.183-.21.183h.367c-.08 0-.185.237-.316.395.946-.237 1.814-.448 2.657-.66-.29-.552.315-.367.526-.684-.263.08-.526.158-.79.21.895-.447 1.816-.842 2.71-1.237-.13.158-.29.237-.525.37.158.025.263.025.342.05.42.133.316-.262.447-.5.5 0 .71-.078.947-.158.263-.08.526-.158.79-.263.42-.184.815-.42 1.236-.63.08-.028.21 0 .316 0 .29-.186.394-.344.473-.318.37.053.63-.08.736-.42.184-.133.316-.238.447-.318.578-.316 1.13-.632 1.71-.948.21 0 .316 0 .368-.027.344-.16.66-.342.975-.527a2.258 2.258 0 01-.263-.13c.262-.054.34-.08.5-.133.63-.74 1.5-1.24 2.157-1.82.29-.026.29-.105.29-.157.104-.132.21-.29.34-.396.58-.527 1.21-.975 1.737-1.528.763-.766 1.5-1.557 2.184-2.374.63-.738 1.264-1.475 1.79-2.292.737-1.133 1.368-2.293 2.026-3.48.474-.842.895-1.685 1.37-2.528.05-.08.157-.185.236-.185.71-.08 1.422-.13 2.106-.21.158-.026.342-.13.5-.21-.08-.132-.132-.29-.21-.422-.106-.16-.264-.29-.37-.45-.104-.13-.183-.29-.262-.447-.08-.13-.158-.236-.237-.37-.16-.29-.317-.58-.45-.894-.026-.08-.08-.21-.052-.29.474-1.027.658-2.134 1.105-3.162.447-1.054.58-2.24.79-3.373.184-1.08.29-2.16.42-3.24.08-.764.185-1.502.21-2.266.16-1.212.106-2.346.08-3.48-.026-1-.08-2.028-.13-3.03zM12.685 66.405c-.184-.21-.342-.448-.526-.658l.08-.08c.287.317.577.633.866.976-.158-.08-.342-.132-.42-.238zm.42.238c.08-.027.16-.027.238-.053.08.132.132.29.21.448-.368-.027-.552-.185-.447-.395zm27.37 10.883v-.08c.5-.052.973-.105 1.473-.157v.077c-.5.08-.973.13-1.473.158zm6.63-.685c-.367.08-.762.133-1.13.186-.132.026-.29.158-.342-.08-.053.027-.106.027-.158.054.13.394.447.078.71.236-.58.08-1.13.132-1.684.21v-.052c.16-.026.343-.053.5-.08v-.078a7.705 7.705 0 00-.79-.053c-.077 0-.183.106-.262.132-.105.026-.21.053-.342.053-.447.026-.894.026-1.316.052-.027 0-.08-.026-.106-.026v-.08c1.763-.236 3.5-.473 5.263-.71.027.052.027.105.053.157-.158 0-.263.055-.395.08zm.396-.262c.606-.08 1.16-.132 1.738-.21-1.21.342-1.605.394-1.737.21zM24.58 23.374c.84-1.16 1.71-2.32 2.552-3.505.263-.345.473-.714.736-1.056.08-.106.185-.158.316-.264l-.026-.05c.105-.133.21-.24.263-.344.134-.21.213-.448.318-.685a.385.385 0 01.105-.103c.37.184.37-.21.5-.343.237-.264.474-.553.684-.817.158-.21.316-.395.448-.632.026-.08-.053-.21-.08-.317h-.078c.08-.052.158-.13.237-.184.026 0 .026 0 .052-.026.158-.238.316-.475.474-.686.315-.42.657-.842 1.025-1.21-.052.13-.105.263-.158.368.027 0 .027.027.053.027.316-.422.658-.817.974-1.24-.027-.025-.053-.052-.08-.052-.13.132-.236.264-.368.396-.026-.027-.052-.053-.08-.053.265-.343.528-.685.79-1.08.053.08.106.184.21.395.107-.263.212-.447.29-.632-.078.08-.183.158-.262.238l-.08-.08.474-.71c.5-.712 1-1.45 1.5-2.162.185-.263.42-.474.58-.738.5-1 1.29-1.792 1.894-2.714.132-.184.316-.342.474-.5.13-.16.237-.106.342.026.71.896 1.42 1.818 2.13 2.714.528.66 1.054 1.29 1.554 1.976.605.844 1.184 1.687 1.79 2.53.684.975 1.368 1.95 2.026 2.95 1 1.477 1.947 2.953 2.947 4.428.737 1.08 1.474 2.135 2.184 3.215h-1.344c-1.236-.025-2.5-.13-3.736-.078-1.684.08-3.394.264-5.078.396-2.132.185-4.29.21-6.42.21-.765 0-1.528.107-2.29.16-.922.052-1.817.105-2.738.13-1.08.054-2.13.08-3.21.107-.606.026-1.237 0-1.895 0zm30.183 12.12v.238c-.026 0-.052.027-.105.027-.105-.37-.21-.766-.342-1.135-.263-.765-.553-1.53-1.027-2.214-.528-.737-1-1.5-1.528-2.265-.13-.185-.316-.343-.474-.5-.553-.607-1.106-1.24-1.816-1.687a21.485 21.485 0 00-3.29-1.688 7.374 7.374 0 01-.92-.474h.63l4.5-.08c.974-.025 1.922-.025 2.895-.078.236 0 .368.08.5.29.236.395.473.79.736 1.186.027.052.08.13.08.21 0 .58 0 1.186.026 1.766.025.606.08 1.186.104 1.792 0 .606-.053 1.238-.026 1.87.027.897.053 1.82.053 2.74zM26.447 26.67c1.237-.053 2.42-.132 3.632-.185.945-.053 1.92-.08 2.866-.132.395-.025.764-.05 1.158 0-.42.212-.842.423-1.21.686-.474.316-.92.737-1.395 1.08-.475.342-.896.764-1.29 1.212-.5.605-1.053 1.132-1.58 1.712-.37.422-.79.817-1.105 1.265-.447.58-.842 1.21-1.263 1.87.132-2.504.29-4.98.184-7.51zm17.185 25.35c-.843.21-1.71.448-2.58.553-.736.106-1.5.08-2.263.08a25.42 25.42 0 01-2.028-.08c-.763-.078-1.526-.157-2.263-.5-.633-.29-1.29-.553-1.92-.87-.634-.316-1.265-.684-1.74-1.264-.34-.423-.815-.765-1.236-1.134.08.316.263.58.553.764-.132.158-.316.08-.58-.343-.078.053-.157.08-.21.106.08-.185.158-.37.237-.527-.105-.21-.237-.448-.342-.66-.21-.342-.42-.71-.605-1.053-.053-.08-.053-.158-.105-.237a5.893 5.893 0 01-.37-.475c-.21-.315-.394-.657-.657-.974 0 .08.027.158.027.264-.027 0-.053.026-.053.026l-.554-1.344c-.026 0-.026 0-.052.026l.473 1.74c-.026 0-.052.025-.08.025-.077-.104-.156-.21-.21-.34-.052-.212-.21-.212-.34-.133-.08.053-.133.237-.106.316.185.448.395.896.606 1.344.052.158.105.29.184.448.027.053.106.105.106.184.106.21.185.42.316.606.237.316.5.632.737.948.235.316.445.66.656.975.026.053.105.053.13.08.133.395.58.684.896.526.08.606.737.817 1 1.397a11.957 11.957 0 01-.763-.343c-.027.026-.027.052-.054.105.316.158.632.316.92.5.265.16.528.317.765.5.316.29.685.45 1.13.554a.282.282 0 00-.05-.107c.736.343 1.5.712 2.078 1-2.737.054-5.658.107-8.685.16 0-.5-.026-.975-.026-1.476 0-.21.052-.395.025-.606-.08-1.21-.08-2.424-.237-3.61-.157-1.264-.157-2.503-.13-3.77.025-.683-.027-1.394-.054-2.08 0-.922 0-1.82.028-2.74 0-.132.053-.237.106-.37h.08c.025.054 0 .133.05.16.08.08.212.21.265.184.157-.106.394-.21.447-.37.13-.315.184-.658.184-.974 0-.236.106-.394.21-.553.054-.08.08-.158.133-.263-.105-.08-.21-.132-.342-.237.106-.29.08-.633.475-.79.052-.027.052-.16.08-.238.025-.213.05-.45.078-.66.052.08.08.105.13.157a.42.42 0 01.054-.08c0-.104-.026-.315 0-.315.316-.053.184-.395.342-.553.025-.028-.027-.107-.027-.16 0-.052 0-.13.026-.13.367-.08.315-.475.552-.66.08-.053.105-.13.21-.263.21.368-.158.553-.184.816.446-.263.578-.895.315-1.08.105-.08.21-.184.29-.29.29-.316.604-.606.868-.922.185-.236.29-.526.474-.763.106-.132.316-.237.474-.317.474-.262.92-.552 1.21-1 .053-.053.132-.105.21-.158.08-.053.238-.053.264-.132.027-.052-.052-.184-.105-.263.104-.053.21-.158.42-.264-.08.158-.105.264-.158.37l.13.13c.238-.184.606-.394.843-.552 0-.025-.132-.13-.132-.13-.157.08-.394.21-.63.316.05-.08.05-.132.08-.158.367-.237.735-.474 1.13-.66.92-.42 1.842-.842 2.763-1.237.158-.08.37-.026.553-.026.078 0 .13 0 .21-.026.42-.132.842-.264 1.263-.37.183-.052.393-.078.58-.078.787.025 1.577.025 2.366.078.342.026.658.105.974.21a9.88 9.88 0 011.184.5c.447.24.868.502 1.29.792.763.5 1.473 1.054 2.236 1.502.737.448 1.316 1.054 1.79 1.74.58.816 1.237 1.554 1.5 2.555l.394 1.74c.08.316.264.632.185 1-.133.66-.238 1.345-.343 2.004-.052.265-.105.53-.078.79.05.82-.265 1.53-.58 2.268-.106.237-.264.475-.395.738a.798.798 0 00.21.106l.237-.474c.027 0 .027 0 .053.027-.132.368-.237.764-.37 1.133-.314.817-.63 1.66-1.025 2.45-.21.448-.58.817-.842 1.24-.262.368-.473.763-.736 1.106-.237.29-.473.58-.79.79-.71.527-1.447 1.054-2.21 1.476-.473.29-1.026.448-1.552.58zm-14.027-1.4l-.026.027c-.055-.026-.134-.052-.186-.105l-.632-.95c-.052-.078-.08-.157-.052-.262.29.448.58.87.895 1.29zm16.37 3.61c1.183-.5 2.157-1.21 3.05-2.028.133-.132.264-.263.422-.37 1.106-.684 1.92-1.633 2.658-2.687.842-1.212 1.395-2.582 2.08-3.873a2.73 2.73 0 01.157-.29c-.053 3.004.29 5.955.684 8.933-2.973.105-6 .21-9.052.316zm26.683-.79c-.026.053-.08.106-.105.16-.027-.054-.027-.133-.053-.24-.158.423-.5.212-.737.212-1.42.027-2.868.027-4.29.027-1.368 0-2.762 0-4.13.024-.448 0-.922.105-1.37.132-1.078.052-2.157.08-3.236.105-.08 0-.158-.13-.29-.236a1.81 1.81 0 01-.158.237c-.028-.052-.08-.104-.133-.183-.026.08-.053.158-.08.21H58c-.053-.368-.158-.71-.158-1.08 0-.79.08-1.58.105-2.372.027-.368 0-.71 0-1.054.106.08.185.133.29.21.052-.103.105-.182.158-.26 0 0-.053-.028-.106-.08.05-.027.104-.08.104-.106.026-.08.08-.158.08-.21 0-.185-.054-.343-.08-.5.026 0 .052 0 .08-.028l.157.79h.08c-.106-.183.236-.342-.053-.552-.026-.027.026-.185.026-.264-.08-.157-.13-.315-.21-.526.026-.026.105-.053.184-.08-.105-.052-.184-.104-.263-.13.263-.238.263-.37.026-.633.054-.025.106-.025.106-.05 0-.238 0-.475-.052-.71-.053-.266.08-.58-.316-.74.026.08.053.132.105.21 0 0-.08.027-.158.08-.342-.317-.13-.74-.21-1.213.184.053.316.106.447.16-.053-.186-.184-.397-.263-.634h-.107v-1.74c0 .027.184.027.29.054 0-.027.025-.053.025-.08-.08-.105-.185-.21-.29-.342l.053-.053c-.21-.262-.105-.63-.105-.71V39.4c.264.264-.13.606.264.764v-.263h-.027c-.026-.395-.026-.79-.052-1.186h-.052c-.027.054-.027.08-.054.133h-.052l.158-6.298c.263.342.552.66.736 1 .606 1.108 1.395 2.057 2.132 3.058.632.87 1.21 1.818 1.79 2.714.71 1.08 1.394 2.16 2.105 3.24.526.818 1.08 1.635 1.63 2.426.5.71 1.028 1.396 1.554 2.082.446.606.92 1.212 1.367 1.818.527.738 1.053 1.475 1.58 2.187.262.368.552.737.84 1.106.16.21.396.37.554.5-.025 0-.052 0-.104-.026.08.105.13.184.184.237.29.158.316.316.158.554zM74 46.854v-.185c0 .052.026.13 0 .184zm.895-11.62c-.027 0-.184-.16-.21-.186-.027.08 0 .158-.053.264-.027-.078-.21-.052-.21-.13-.027.368.157.737.13 1.106.08-.053.395-.08.474-.158.027.026.08.052.106.052-.527.396-.395.79-.158 1.24.052.104.21.315.052.526-.052.053.027.21.053.343h.077v.05l-.237.08c-.052-.08-.367-.236-.367-.37v1.346c.263.08.263.448.368.633a.788.788 0 00.107-.21l.027.024c-.027.158-.053.316-.106.475-.052.236-.105.447-.13.684 0 .026.05.08.05.105-.288.66-.13 1.396-.235 2.08-.08.5 0 1.03-.053 1.556-.054.448-.16.922-.264 1.37-.027.08-.08.105-.21.158.052-.316.026-.527-.027-.817-.028 0-.37-.184-.397-.184 0 .37.21.87.29 1.29-.08-.026-.395-.21-.42-.21-.054.316-.054.738-.08 1.08-.027.264-.263.5-.29.79 0 .16.184.264.158.528h.21c0-.526.238-1 .238-1.554h.078c.027.053.106.106.08.132-.053.29-.16.606-.132.896 0 .158.13.316.08.5-.054.16-.08.317-.107.554-.027-.132-.053-.184-.053-.263-.026 0-.263-.027-.29-.027-.026.158.185.316.158.448-.026.026-.052.026-.105.053l-.868-1.266c-.686-1-1.37-2.003-2.054-3.03a6.312 6.312 0 01-.475-.79 36.947 36.947 0 00-2.71-4.033c-.762-.974-1.37-2.03-2.08-3.055-.656-.975-1.314-1.924-1.972-2.9-.237-.315-.526-.605-.737-.948-.683-1.08-1.29-2.187-1.972-3.267-.58-.897-1.21-1.767-1.816-2.636-.21-.29-.42-.607-.632-.923a.366.366 0 01-.052-.182c-.053-.58-.106-1.16-.132-1.713 0-.527.053-1.054.053-1.608v-.474c0-.132.025-.237.025-.37.025-.025.052-.078.078-.104-.763 0-1.553-.028-2.316 0-.5.025-.763-.186-1.105-.555-1-1.133-1.737-2.424-2.605-3.636a162.481 162.481 0 00-2.5-3.427c-.685-.922-1.37-1.818-2.053-2.74-.764-1.054-1.5-2.108-2.29-3.162a381.983 381.983 0 00-2.895-3.794c-.45-.58-.95-1.133-1.45-1.74.343.054.66.106.975.133l1.264.08c.947.077 1.894.13 2.84.26.79.107 1.58.265 2.396.396 1.738.29 3.448.765 5.106 1.318.974.316 1.92.738 2.87 1.133 2.13.87 4.157 1.924 6.157 3.03.63.343 1 .896 1.472 1.397.685.712 1.37 1.423 2.027 2.16.762.87 1.472 1.766 2.21 2.662.657.79 1.34 1.58 2 2.372.21.237.37.527.552.79.42.633.895 1.24 1.263 1.924.262.502.42 1.082.604 1.635.262.817.526 1.607.79 2.424.183.606.34 1.24.472 1.87.106.423.08.87.21 1.29.16.556 0 1.16.16 1.715.025.053.05.132.078.185.105.104.184.21.026.368-.025.026-.025.13 0 .21.054-.052.08-.105.133-.184 0 .053.025.08.025.105 0 .104-.027.21 0 .315 0 .052.052.13.078.184.053-.054.105-.08.21-.16.237.897.264 1.793.264 2.715 0 .87.157 1.74-.21 2.583.078-.29-.106-.555-.027-.818z" fill="#DD3A0A"/><path d="M58.08 45.482c.025 0 .052.027.052.027l-.027-.03c0-.025 0-.025-.026 0zm4.157 26.036c-.29.21-.58.395-.948.474-.028-.026-.028-.053-.054-.08.29-.184.605-.368.895-.553.027.05.08.104.106.157zM12.895 35.81c.29-.367.58-.736.894-1.105.025.026.235.08.262.105-.29.37-.685.87-.974 1.265-.054-.053-.133-.237-.185-.264zM5.42 48.725c-.21-.448-.42-.923-.63-1.37a.91.91 0 01.236-.106c.29.42.42.92.632 1.37 0 0-.21.105-.237.105zm6.712-12.65c-.158.238-.316.502-.474.74-.026-.028-.316.104-.342.078.158-.237.552-.66.71-.896.027.026.053.053.106.08zM59.422 72.6c.025 0 .025-.026.052-.026.184.026.394.052.605.052-.344.237-.555.21-.66-.026zm-47.24-35.418c.028-.08.08-.158.133-.237.052 0 .13-.027.13-.027.107-.184.107-.316.212-.474-.026-.026-.053-.026-.08-.053-.157.108-.315.24-.473.345.053.052.053.08.053.132-.21-.027-.29.08-.395.368-.026.08-.158.106-.29.21-.026.054-.052.186-.105.317l.027.028c-.053.053-.132.08-.132.08-.158.157-.342.29-.5.447-.026.08-.052.158-.052.237.185-.184.5-.527.737-.738l.027.027c.105-.158.184-.316.29-.474.025.026.025.052.052.08-.08.21-.158.446-.237.657-.055.026-.134.08-.134.053-.105.08-.184.184-.29.263l-.473.316c-.263.237-.526.447-.816.685-.184.29-.368.553-.58.896.317-.08.396.053.37.317.368.052.395-.237.5-.448.026-.054.053-.16.105-.186.237-.21.5-.394.763-.605.053-.053.053-.16.053-.238 0-.026-.133-.026-.212-.053.237-.264.58-.71.816-1 .132-.08.263-.186.263-.265-.026-.29.158-.368.37-.474-.106-.08-.133-.157-.133-.183z" fill="#DD3735"/><path d="M12.71 36.892c-.105.184-.21.342-.315.527l-.158-.08c-.105.605-.474 1.132-.842 1.237.105.053.21.106.29.08.078-.027.13-.16.183-.238l.71-1.028.238-.396-.105-.105zM3.948 48.46c.132 0 .264.026.42.026 0-.105.133-.08.133-.184h.08c0 .132.026.237.026.37h-.552c-.027-.027-.132-.186-.106-.212zm-.21-1.212c-.08-.08-.21-.158-.21-.237-.027-.104.052-.235.13-.367.054.184.08.342.132.527-.027.025-.053.052-.053.078zm.658-1.687c.105.266.21.556.316.82a.825.825 0 00-.21.105c-.105-.264-.237-.554-.342-.817a.652.652 0 01.237-.106zm58.58 25.194c.13-.052.288-.08.5-.13-.238.183-.422.315-.58.473-.027-.026-.053-.053-.08-.053.053-.105.106-.184.16-.29zM30.63 15.074c.157-.106.29-.185.447-.29l.052.052c-.16.21-.29.42-.475.685-.026-.183-.026-.29-.053-.42-.026 0 0 0 .027-.026zm7.71 13.333c.237-.106.474-.21.763-.343-.026.158-.026.264-.026.37a.927.927 0 00-.264-.054c-.158.027-.448.238-.58.264-.025 0 .106-.21.106-.237zm19.74 22.346c.052.263.552.395.052.658.08.055.157.08.236.134 0 .027-.026.08-.052.106-.053.025-.158.078-.21.05-.027 0-.08-.104-.08-.157 0-.237.027-.474.053-.79z" fill="#DD3735"/></g></svg>
34
- </a>
35
- </div>
36
- <div class="col">
37
- <a href="https://tailwindcss.com/docs" target="_blank">
38
- <svg class="w-auto h-6" viewBox="0 0 247 31"><path fill-rule="evenodd" clip-rule="evenodd" d="M25.517 0C18.712 0 14.46 3.382 12.758 10.146c2.552-3.382 5.529-4.65 8.931-3.805 1.941.482 3.329 1.882 4.864 3.432 2.502 2.524 5.398 5.445 11.722 5.445 6.804 0 11.057-3.382 12.758-10.145-2.551 3.382-5.528 4.65-8.93 3.804-1.942-.482-3.33-1.882-4.865-3.431C34.736 2.92 31.841 0 25.517 0zM12.758 15.218C5.954 15.218 1.701 18.6 0 25.364c2.552-3.382 5.529-4.65 8.93-3.805 1.942.482 3.33 1.882 4.865 3.432 2.502 2.524 5.397 5.445 11.722 5.445 6.804 0 11.057-3.381 12.758-10.145-2.552 3.382-5.529 4.65-8.931 3.805-1.941-.483-3.329-1.883-4.864-3.432-2.502-2.524-5.398-5.446-11.722-5.446z" fill="#06B6D4"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M76.546 12.825h-4.453v8.567c0 2.285 1.508 2.249 4.453 2.106v3.463c-5.962.714-8.332-.928-8.332-5.569v-8.567H64.91V9.112h3.304V4.318l3.879-1.143v5.937h4.453v3.713zM93.52 9.112h3.878v17.849h-3.878v-2.57c-1.365 1.891-3.484 3.034-6.285 3.034-4.884 0-8.942-4.105-8.942-9.389 0-5.318 4.058-9.388 8.942-9.388 2.801 0 4.92 1.142 6.285 2.999V9.112zm-5.674 14.636c3.232 0 5.674-2.392 5.674-5.712s-2.442-5.711-5.674-5.711-5.674 2.392-5.674 5.711c0 3.32 2.442 5.712 5.674 5.712zm16.016-17.313c-1.364 0-2.477-1.142-2.477-2.463a2.475 2.475 0 012.477-2.463 2.475 2.475 0 012.478 2.463c0 1.32-1.113 2.463-2.478 2.463zm-1.939 20.526V9.112h3.879v17.849h-3.879zm8.368 0V.9h3.878v26.06h-3.878zm29.053-17.849h4.094l-5.638 17.849h-3.807l-3.735-12.03-3.771 12.03h-3.806l-5.639-17.849h4.094l3.484 12.315 3.771-12.315h3.699l3.734 12.315 3.52-12.315zm8.906-2.677c-1.365 0-2.478-1.142-2.478-2.463a2.475 2.475 0 012.478-2.463 2.475 2.475 0 012.478 2.463c0 1.32-1.113 2.463-2.478 2.463zm-1.939 20.526V9.112h3.878v17.849h-3.878zm17.812-18.313c4.022 0 6.895 2.713 6.895 7.354V26.96h-3.878V16.394c0-2.713-1.58-4.14-4.022-4.14-2.55 0-4.561 1.499-4.561 5.14v9.567h-3.879V9.112h3.879v2.285c1.185-1.856 3.124-2.749 5.566-2.749zm25.282-6.675h3.879V26.96h-3.879v-2.57c-1.364 1.892-3.483 3.034-6.284 3.034-4.884 0-8.942-4.105-8.942-9.389 0-5.318 4.058-9.388 8.942-9.388 2.801 0 4.92 1.142 6.284 2.999V1.973zm-5.674 21.775c3.232 0 5.674-2.392 5.674-5.712s-2.442-5.711-5.674-5.711-5.674 2.392-5.674 5.711c0 3.32 2.442 5.712 5.674 5.712zm22.553 3.677c-5.423 0-9.481-4.105-9.481-9.389 0-5.318 4.058-9.388 9.481-9.388 3.519 0 6.572 1.82 8.008 4.605l-3.34 1.928c-.79-1.678-2.549-2.749-4.704-2.749-3.16 0-5.566 2.392-5.566 5.604 0 3.213 2.406 5.605 5.566 5.605 2.155 0 3.914-1.107 4.776-2.749l3.34 1.892c-1.508 2.82-4.561 4.64-8.08 4.64zm14.472-13.387c0 3.249 9.661 1.285 9.661 7.89 0 3.57-3.125 5.497-7.003 5.497-3.591 0-6.177-1.607-7.326-4.177l3.34-1.927c.574 1.606 2.011 2.57 3.986 2.57 1.724 0 3.052-.571 3.052-2 0-3.176-9.66-1.391-9.66-7.781 0-3.356 2.909-5.462 6.572-5.462 2.945 0 5.387 1.357 6.644 3.713l-3.268 1.82c-.647-1.392-1.904-2.035-3.376-2.035-1.401 0-2.622.607-2.622 1.892zm16.556 0c0 3.249 9.66 1.285 9.66 7.89 0 3.57-3.124 5.497-7.003 5.497-3.591 0-6.176-1.607-7.326-4.177l3.34-1.927c.575 1.606 2.011 2.57 3.986 2.57 1.724 0 3.053-.571 3.053-2 0-3.176-9.66-1.391-9.66-7.781 0-3.356 2.908-5.462 6.572-5.462 2.944 0 5.386 1.357 6.643 3.713l-3.268 1.82c-.646-1.392-1.903-2.035-3.375-2.035-1.401 0-2.622.607-2.622 1.892z" fill="currentColor"></path></svg>
39
- </a>
40
- </div>
41
- <div class="col">
42
- <a href="https://stimulus.hotwire.dev/" target="_blank">
43
- <svg class="w-auto h-6" viewBox="0 0 372.93 60.02" xmlns="http://www.w3.org/2000/svg">
44
- <g fill="#77e8b9">
45
- <path d="m51.56 33.56h-3.91a7.71 7.71 0 0 0 -3.29.9l-27 15.86a7.52 7.52 0 0 1 -3.28.9h-14.08v7.06a1.77 1.77 0 0 0 1.76 1.72h56.48a1.77 1.77 0 0 0 1.76-1.75v-7.06h-14.12a7.52 7.52 0 0 1 -3.28-.9l-8.08-4.74a1 1 0 0 1 0-1.79l3.84-2.25a3.27 3.27 0 0 1 3 0l3 1.74a7.57 7.57 0 0 0 3.29.9h12.35v-10.59z"></path><path d="m51.56 15.88h-3.91a7.71 7.71 0 0 0 -3.29.9l-27 15.87a7.66 7.66 0 0 1 -3.28.9h-14.08v10.59h12.35a7.71 7.71 0 0 0 3.29-.9l27-15.87a7.66 7.66 0 0 1 3.28-.9h14.08v-10.59z"></path><path d="m58.24 0h-56.48a1.76 1.76 0 0 0 -1.76 1.76v7.06h14.12a7.66 7.66 0 0 1 3.28.9l8.08 4.75a1 1 0 0 1 0 1.78l-3.84 2.26a3.27 3.27 0 0 1 -3 0l-3-1.75a7.71 7.71 0 0 0 -3.29-.9h-12.35v10.59h12.35a7.57 7.57 0 0 0 3.29-.9l27-15.86a7.52 7.52 0 0 1 3.28-.9h14.08v-7.06a1.76 1.76 0 0 0 -1.76-1.73z"></path>
46
- </g>
47
- <g fill="currentColor">
48
- <path d="m108.44 6.17a8.2 8.2 0 0 0 -3.63-1.5 28.17 28.17 0 0 0 -4.91-.39h-9a30.08 30.08 0 0 0 -5 .39 11.92 11.92 0 0 0 -4.18 1.51 9.62 9.62 0 0 0 -3.12 3.13 14.16 14.16 0 0 0 -1.82 5.19l-1.46 8.42a13.23 13.23 0 0 0 -.1 5.37 5.9 5.9 0 0 0 1.92 3.24 8 8 0 0 0 3.7 1.61 27.31 27.31 0 0 0 5.21.44h8.49l-1.54 8.8h-8.65l.88-5.06-13.48 1.77-.54 3.22a14.25 14.25 0 0 0 -.12 5.33 5.74 5.74 0 0 0 1.84 3.24 7.61 7.61 0 0 0 3.61 1.6 28.34 28.34 0 0 0 5.16.42h10.22a30 30 0 0 0 5.25-.42 11.43 11.43 0 0 0 4.19-1.6 9.7 9.7 0 0 0 3.09-3.26 15.68 15.68 0 0 0 1.84-5.34l1.56-9a11.87 11.87 0 0 0 0-5.2 5.72 5.72 0 0 0 -2.16-3.08 8.86 8.86 0 0 0 -3.82-1.5 31.15 31.15 0 0 0 -5.16-.39h-8.49l1.43-8.28h7.77l-.74 4.45 13.24-1.67.54-3.15a11.46 11.46 0 0 0 0-5.18 5.73 5.73 0 0 0 -2.02-3.11z"></path><path d="m150.46 4.83h-35.25l-2.1 12.05h10.73l-6.18 35.48h13.78l6.18-35.48h10.73z"></path><path d="m154.4 4.83-8.29 47.53h13.79l8.28-47.53z"></path><path d="m205.94 4.83-13.38 18.84-7.37-18.84h-10.29l-8.28 47.53h11.92l4.27-24.51 6.22 16.57 11.75-16.91-4.35 24.85h13.82l8.28-47.53z"></path><path d="m246.88 4.83-6.24 35.89h-8.12l6.25-35.89h-13.77l-6.52 37.51a13.58 13.58 0 0 0 -.08 5.34 5.74 5.74 0 0 0 1.93 3.24 8.2 8.2 0 0 0 3.74 1.59 28.12 28.12 0 0 0 5.21.43h10.29a31.14 31.14 0 0 0 5.43-.43 11.7 11.7 0 0 0 4.3-1.59 9.62 9.62 0 0 0 3.09-3.24 15.83 15.83 0 0 0 1.81-5.34l6.5-37.51z"></path><path d="m280.94 4.83h-13.79l-8.28 47.53h28.59l2.1-12.05h-14.8z"></path><path d="m321.41 4.83-6.25 35.89h-8.11l6.25-35.89h-13.79l-6.51 37.51a13.58 13.58 0 0 0 -.08 5.34 5.69 5.69 0 0 0 1.93 3.24 8.16 8.16 0 0 0 3.74 1.59 28 28 0 0 0 5.21.43h10.28a31.18 31.18 0 0 0 5.44-.43 11.58 11.58 0 0 0 4.29-1.59 9.44 9.44 0 0 0 3.09-3.24 15.83 15.83 0 0 0 1.82-5.34l6.52-37.51z"></path><path d="m372.65 9.26a5.74 5.74 0 0 0 -2-3.09 8.2 8.2 0 0 0 -3.65-1.5 28.09 28.09 0 0 0 -4.91-.39h-9a30.12 30.12 0 0 0 -5 .39 11.8 11.8 0 0 0 -4.17 1.51 9.55 9.55 0 0 0 -3.13 3.13 14 14 0 0 0 -1.79 5.19l-1.46 8.42a13.26 13.26 0 0 0 -.11 5.37 5.9 5.9 0 0 0 1.92 3.24 8.07 8.07 0 0 0 3.7 1.61 27.35 27.35 0 0 0 5.22.44h8.48l-1.52 8.8h-8.7l.89-5.06-13.48 1.77-.54 3.22a13.84 13.84 0 0 0 -.12 5.33 5.67 5.67 0 0 0 1.83 3.24 7.65 7.65 0 0 0 3.62 1.6 28.18 28.18 0 0 0 5.16.42h10.22a30 30 0 0 0 5.24-.42 11.55 11.55 0 0 0 4.2-1.6 9.7 9.7 0 0 0 3.09-3.26 15.9 15.9 0 0 0 1.83-5.34l1.56-9a11.72 11.72 0 0 0 0-5.2 5.72 5.72 0 0 0 -2.16-3.08 8.81 8.81 0 0 0 -3.82-1.5 31.06 31.06 0 0 0 -5.16-.39h-8.49l1.43-8.28h7.78l-.75 4.45 13.24-1.67.55-3.15a11.75 11.75 0 0 0 0-5.2z"></path>
49
- </g>
50
- </svg>
51
- </a>
52
- </div>
53
- <div class="col">
54
- <a href="https://swup.js.org/getting-started" target="_blank">
55
- <svg class="w-auto h-12" viewBox="0 0 996 429" xmlns="http://www.w3.org/2000/svg">
56
- <g fill="none">
57
- <path fill="#2D2E82" d="M61.5 355.46C66.5 370.93 80.5 378 99 376 118 374 130.5 365.18 130.5 350.68 130.5 340.68 123.5 336.41 108 334.05L63 328.8C29 324.39 5 309.43 5 271.93 5 228.43 44 195.3 94 190 150.5 184 181.5 207.76 189 249L130 255.24C126 243.16 115.5 234.77 95 236.94 80 238.5 65.5 247 65.5 261 65.5 270 71.5 274.37 85.5 276.39L131.5 282.03C170.5 287.41 191 306.74 191 340.74 191 386.24 151.5 417.42 99.5 422.91 45 428.7 6.5 406.77 0 362L61.5 355.46zM837.73 422.44L775.73 428.99 775.73 123 837.73 116.45 837.73 134.95C847.73 121.95 869.73 108.07 893.73 105.54 958.73 98.67 995.73 148.76 995.73 211.76 995.73 274.76 958.73 332.17 893.73 339.04 869.73 341.57 847.73 332.4 837.73 321.45L837.73 422.44zM837.73 264.94C845.23 279.65 861.73 288.41 879.73 286.5 913.23 282.96 933.23 253.85 933.23 218.35 933.23 182.35 913.23 157.46 879.73 161 861.23 163 845.23 175.65 837.73 191.44L837.73 264.94zM469.82 155.31L469.82 284C469.82 299.38 466.72 311.18 460.6 319.07 454.99 326.32 446.71 330.43 435.31 331.64 423.91 332.85 415.63 330.48 410.02 324.42 403.9 317.82 400.8 306.67 400.8 291.29L400.8 162.61 340.46 169 340.46 297.62C340.46 313 337.36 324.8 331.25 332.69 325.63 339.94 317.36 344.05 305.95 345.25 294.54 346.45 286.28 344.1 280.66 338.03 274.55 331.43 271.45 320.29 271.45 304.91L271.45 176.27 211.1 182.65 211.1 315.65C211.1 345.5 220.21 369.12 237.44 383.95 253.99 398.19 277.68 404.14 305.95 401.15 332.2 398.38 354.45 388.8 370.7 373.37 386.98 385.37 409.18 390.25 435.31 387.49 463.71 384.49 487.45 373.49 503.96 355.79 521.1 337.36 530.16 311.79 530.16 281.94L530.16 148.94 469.82 155.31zM650.38 364.8C683.54 361.3 706.1 350.46 722.65 332.73 739.88 314.25 748.99 288.73 748.99 258.86L748.99 125.86 688.65 132.23 688.65 260.83C688.65 276.21 685.55 288.01 679.43 295.9 673.81 303.15 665.93 308.49 650.43 310.13 634.93 311.77 626.99 308.13 621.37 302.04 615.26 295.44 612.16 284.3 612.16 268.92L612.16 140.28 551.81 146.66 551.81 279.66C551.81 309.51 560.92 333.13 578.15 347.96 594.65 362.24 617.22 368.31 650.38 364.8z"/>
58
- <path fill="#FE5B6A" d="M530.6,95.07 C530.6,112.92 515.49,127.57 497.18,127.57 C479.260342,127.498748 464.751252,112.989658 464.68,95.07 C464.68,76.3 479.33,61.65 497.18,61.65 C506.0525,61.6206515 514.57007,65.1322519 520.843909,71.4060909 C527.117748,77.6799299 530.629348,86.1975003 530.6,95.07 Z"/>
59
- <path fill="#60DDCD" d="M614.9,33.42 C614.9,51.27 599.79,65.92 581.48,65.92 C563.568153,65.8377998 549.071174,51.3318941 549,33.42 C549,14.65 563.63,-3.162943e-15 581.48,-3.162943e-15 C590.3525,-0.0293484583 598.87007,3.48225188 605.143909,9.75609089 C611.417748,16.0299299 614.929348,24.5475003 614.9,33.42 L614.9,33.42 Z"/>
60
- </g>
61
- </svg>
62
- </a>
63
- </div>
64
- </div>
65
- <div class="row g-3 items-center flex-wrap">
66
- <div class="col">
67
- <div class="ui-badge rounded-full bg-secondary">Newlogic Core</div>
68
- </div>
69
- <div class="col">
70
- <div class="ui-badge rounded-full bg-secondary">Vite</div>
71
- </div>
72
- <div class="col">
73
- <div class="ui-badge rounded-full bg-secondary">PostCSS</div>
74
- </div>
75
- <div class="col">
76
- <div class="ui-badge rounded-full bg-secondary">Lightweight</div>
77
- </div>
78
- <div class="col">
79
- <div class="ui-badge rounded-full bg-secondary">Modern</div>
80
- </div>
81
- <div class="col">
82
- <div class="ui-badge rounded-full bg-secondary">Modular</div>
83
- </div>
84
- <div class="col">
85
- <div class="ui-badge rounded-full bg-secondary">Responsive</div>
86
- </div>
87
- <div class="col">
88
- <div class="ui-badge rounded-full bg-secondary">Progressive</div>
89
- </div>
90
- <div class="col">
91
- <div class="ui-badge rounded-full bg-secondary">Fast</div>
92
- </div>
93
- <div class="col">
94
- <div class="ui-badge rounded-full bg-secondary">Dark Mode</div>
95
- </div>
96
- <div class="col">
97
- <div class="ui-badge rounded-full bg-secondary">Easy syntax</div>
98
- </div>
99
- <div class="col">
100
- <div class="ui-badge rounded-full bg-secondary">CSS Variables</div>
101
- </div>
102
- <div class="col">
103
- <div class="ui-badge rounded-full bg-secondary">ES6 Javascript</div>
104
- </div>
105
- <div class="col">
106
- <div class="ui-badge rounded-full bg-secondary">Dynamic imports</div>
107
- </div>
108
- <div class="col">
109
- <div class="ui-badge rounded-full bg-secondary">Importmaps</div>
110
- </div>
111
- <div class="col">
112
- <div class="ui-badge rounded-full bg-secondary">Icomoon</div>
113
- </div>
114
- <div class="col">
115
- <div class="ui-badge rounded-full bg-secondary">Lazysizes</div>
116
- </div>
117
- <div class="col">
118
- <div class="ui-badge rounded-full bg-secondary">Mobile First</div>
119
- </div>
120
- <div class="col">
121
- <div class="ui-badge rounded-full bg-secondary">Backend First</div>
122
- </div>
123
- </div>
124
- <div class="ui-text py-12">
125
- <p>The core of the Newlogic UI is Newlogic Core, which compiles modern JS and CSS syntax and contains other tools for web development. Source code can be used with any other tools or even different environment than NodeJS, eg. Deno and is written in W3C standards and should be runnable in current or future version of browsers. The framework is modular, and you can really use only what is needed for your project.</p>
126
- </div>
127
- </div>
128
- <div class="wrp_s_footer flex items-center mt-2">
129
- <svg class="w-8 h-8 mr-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
130
- <path fill="currentColor" d="M107.709 225.219v258.986h-79.909v-438.37l438.37 438.37h-99.474zM133.212 473.637v-186.856l93.44 93.428zM404.291 286.781v-258.986h79.909v438.37l-438.37-438.358h99.475zM378.788 38.376v186.856l-93.44-93.428zM378.788 2.304l-111.469 111.457-111.457-111.469h-153.564v507.416h130.925l111.446-111.469 111.469 111.469h153.563v-507.416z"></path>
131
- </svg>
132
- <span>
133
- Product by Newlogic Digital
134
- </span>
135
- </div>
136
- </div>
137
- </section>
2
+ {% include 'Ui/Intro.html' %}
3
+ {% elseif section.icons %}
4
+ {% include 'Ui/Icons.html' %}
138
5
  {% else %}
139
- <style>
140
- pre[class*="language-"] {
141
- margin: 1rem 0 2rem !important;
142
- padding: 1.25rem 1.5rem !important;
143
- border-radius: 0.5rem !important;
144
- background: #282c34 none repeat scroll 0% 0% !important;
145
- max-width: 100%;
146
- font-size: 14px !important;
147
- }
148
-
149
- .dark pre[class*="language-"] {
150
- background: rgb(var(--color-background-100)) none repeat scroll 0% 0% !important;
151
- }
152
-
153
- @media all and (min-width: 48rem) {
154
- pre[class*="language-"] {
155
- max-width: 63vw;
156
- }
157
- }
158
-
159
- @media all and (min-width: 60rem) {
160
- pre[class*="language-"] {
161
- max-width: 90vw;
162
- }
163
- }
164
-
165
- .ui-heading + .ui-text {
166
- margin-top: 1rem;
167
- }
168
-
169
- code {
170
- margin-left: 0;
171
- }
172
-
173
- .col-12 > hr {
174
- margin: 2rem 0 1rem;
175
- }
176
-
177
- @media all and (min-width: 60rem) {
178
- .ui-text code {
179
- white-space: nowrap;
180
- }
181
- }
182
-
183
- @media all and (max-width: 767px) {
184
- .wrp_s_body > .t\:col-9 {
185
- padding-left: 0 !important;
186
- border-left: 0 !important;
187
- }
188
- }
189
-
190
- .s-ui .wrp_s_body > .col-left {
191
- width: 15rem;
192
- }
193
-
194
- .s-ui .wrp_s_body > .col-left .col {
195
- padding-bottom: 0.375rem;
196
- }
197
-
198
- .s-ui .wrp_s_body > .col-left > .sticky {
199
- height: calc(100vh - 4rem);
200
- overflow-y: hidden;
201
- overflow-x: hidden;
202
- top: 4rem;
203
- padding: 2rem;
204
- }
205
-
206
- .s-ui .wrp_s_body > .col-left > .sticky:hover {
207
- overflow-y: auto;
208
- }
209
-
210
- .s-ui .wrp_s_body > .col-right {
211
- padding-top: 1.625rem;
212
- border-left: 1px solid #ddd;
213
- overflow: hidden;
214
- }
215
-
216
- .dark .s-ui .wrp_s_body > .col-right {
217
- border-left: 1px solid rgb(var(--color-light) / 0.1);
218
- }
219
-
220
- @media all and (min-width: 60rem) {
221
- .s-ui .wrp_s_body > .col-right {
222
- padding-left: 4rem;
223
- padding-top: 4rem;
224
- }
225
- }
226
-
227
- @media all and (max-width: 59.9375rem) {
228
- .s-ui .wrp_s_body > .col-right {
229
- display: block;
230
- }
231
- .s-ui .wrp_s_body > .col-right > .container {
232
- padding-left: 2rem;
233
- padding-right: 2rem;
234
- }
235
- }
236
- </style>
237
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.26.0/themes/prism-tomorrow.min.css"/>
238
- <section class="s-ui" data-controller="s-ui">
239
- <div class="wrp_s_body row">
240
- <div class="col col-left touch:hidden">
241
- <div class="sticky">
242
- <div class="mb-5">
243
- <h2 class="ui-title uppercase text-primary mb-3">Get started</h2>
244
- <ul class="row flex-col g-2">
245
- <li class="col col-12">
246
- <a href="#instalation" class="ui-link" title="" target="_blank">
247
- <span>Instalation</span>
248
- </a>
249
- </li>
250
- <li class="col col-12">
251
- <a href="#core" class="ui-link" title="" target="_blank">
252
- <span>Core</span>
253
- </a>
254
- </li>
255
- <li class="col col-12">
256
- <a href="#theme"
257
- class="ui-link" title="" target="_blank">
258
- <span>Theme</span>
259
- </a>
260
- </li>
261
- <li class="col col-12">
262
- <a href="#layout" class="ui-link" title="" target="_blank">
263
- <span>Layout</span>
264
- </a>
265
- </li>
266
- </ul>
267
- </div>
268
- <div class="mb-5">
269
- <h2 class="ui-title uppercase text-primary mb-3">Components</h2>
270
- <ul class="row flex-col g-2">
271
- <li class="col col-12">
272
- <a href="#headings" class="ui-link" title="">
273
- <span>Headings</span>
274
- </a>
275
- </li>
276
- <li class="col col-12">
277
- <a href="#buttons" class="ui-link" title="">
278
- <span>Buttons</span>
279
- </a>
280
- </li>
281
- <li class="col col-12">
282
- <a href="#links" class="ui-link" title="">
283
- <span>Links</span>
284
- </a>
285
- </li>
286
- <li class="col col-12">
287
- <a href="#icons" class="ui-link" title="">
288
- <span>Icons</span>
289
- </a>
290
- </li>
291
- <li class="col col-12">
292
- <a href="#form" class="ui-link" title="">
293
- <span>Forms</span>
294
- </a>
295
- </li>
296
- <li class="col col-12">
297
- <a href="#notice" class="ui-link" title="">
298
- <span>Notice</span>
299
- </a>
300
- </li>
301
- <li class="col col-12">
302
- <a href="#badge" class="ui-link" title="">
303
- <span>Badge</span>
304
- </a>
305
- </li>
306
- <li class="col col-12">
307
- <a href="#progress" class="ui-link" title="">
308
- <span>Progress</span>
309
- </a>
310
- </li>
311
- <li class="col col-12">
312
- <a href="#text" class="ui-link" title="">
313
- <span>Text</span>
314
- </a>
315
- </li>
316
- </ul>
317
- </div>
318
- <div class="mb-5">
319
- <h2 class="ui-title uppercase text-primary mb-3">Tailwind</h2>
320
- <ul class="row flex-col g-2">
321
- <li class="col col-12">
322
- <a href="#colors" class="ui-link" title="">
323
- <span>Colors</span>
324
- </a>
325
- </li>
326
- <li class="col col-12">
327
- <a href="#responsive" class="ui-link" title="">
328
- <span>Responsive</span>
329
- </a>
330
- </li>
331
- <li class="col col-12">
332
- <a href="#container" class="ui-link" title="">
333
- <span>Container</span>
334
- </a>
335
- </li>
336
- <li class="col col-12">
337
- <a href="#grid" class="ui-link" title="">
338
- <span>Grid</span>
339
- </a>
340
- </li>
341
- </ul>
342
- </div>
343
- <div class="mb-5">
344
- <h2 class="ui-title uppercase text-primary mb-3">Libraries</h2>
345
- <ul class="row flex-col g-2">
346
- <li class="col col-12">
347
- <a href="#anchor" class="ui-link" title="">
348
- <span>Anchor</span>
349
- </a>
350
- </li>
351
- <li class="col col-12">
352
- <a href="#cookieconsent" class="ui-link" title="">
353
- <span>CookieConsent</span>
354
- </a>
355
- </li>
356
- <li class="col col-12">
357
- <a href="#datepicker" class="ui-link" title="">
358
- <span>Datepicker</span>
359
- </a>
360
- </li>
361
- <li class="col col-12">
362
- <a href="#dialog" class="ui-link" title="">
363
- <span>Dialog</span>
364
- </a>
365
- </li>
366
- <li class="col col-12">
367
- <a href="#drawer" class="ui-link" title="">
368
- <span>Drawer</span>
369
- </a>
370
- </li>
371
- <li class="col col-12">
372
- <a href="#hint" class="ui-link" title="">
373
- <span>Hint</span>
374
- </a>
375
- </li>
376
- <li class="col col-12">
377
- <a href="#lazysizes" class="ui-link" title="">
378
- <span>Lazysizes</span>
379
- </a>
380
- </li>
381
- <li class="col col-12">
382
- <a href="#nativeslider" class="ui-link" title="">
383
- <span>NativeSlider</span>
384
- </a>
385
- </li>
386
- <li class="col col-12">
387
- <a href="#recaptcha" class="ui-link" title="">
388
- <span>ReCaptcha</span>
389
- </a>
390
- </li>
391
- <li class="col col-12">
392
- <a href="#ripple" class="ui-link" title="">
393
- <span>Ripple</span>
394
- </a>
395
- </li>
396
- <li class="col col-12">
397
- <a href="#stimulus" class="ui-link" title="">
398
- <span>Stimulus</span>
399
- </a>
400
- </li>
401
- <li class="col col-12">
402
- <a href="#swup" class="ui-link" title="">
403
- <span>Swup</span>
404
- </a>
405
- </li>
406
- <li class="col col-12">
407
- <a href="#tabs" class="ui-link" title="">
408
- <span>Tabs</span>
409
- </a>
410
- </li>
411
- <li class="col col-12">
412
- <a href="#tippy" class="ui-link" title="">
413
- <span>Tippy</span>
414
- </a>
415
- </li>
416
- </ul>
417
- </div>
418
- <div class="mb-5">
419
- <h2 class="ui-title uppercase text-primary mb-3">Other</h2>
420
- <ul class="row flex-col g-2">
421
- <li class="col col-12">
422
- <a href="#functions" class="ui-link" title="">
423
- <span>Functions</span>
424
- </a>
425
- </li>
426
- <li class="col col-12">
427
- <a href="#build" class="ui-link" title="">
428
- <span>Build</span>
429
- </a>
430
- </li>
431
- </ul>
432
- </div>
433
- </div>
434
- </div>
435
- <div class="col col-right t:col-9 m:col-12">
436
- <div class="container">
437
- <div class="row g-8 flex-wrap">
438
- <div class="col-12" style="padding-top: 0">
439
- <h1 class="ui-heading">Get started</h1>
440
- <div class="ui-text">
441
- <p>Minimal version <b>Node.js 16+</b>, <b>NPM 7+</b> or any other package manager.</p>
442
- </div>
443
- </div>
444
- <div class="col-12" id="instalation">
445
- <h1 class="ui-title uppercase text-primary mb-5">Installation</h1>
446
- <div class="ui-text">
447
- <p>In existing project (with <b>Vituum and Newlogic Core</b>)</p>
448
- </div>
449
- {% code "bash" %}
450
- $ npm i
451
- {% endcode %}
452
- <div class="ui-text">
453
- <p>Creating a new project (with <b>Vituum and Newlogic Core</b>)</p>
454
- </div>
455
- {% code "bash" %}
456
- $ git clone --depth 1 https://github.com/newlogic-digital/ui.git .
457
- $ npm i
458
- {% endcode %}
459
- <div class="ui-text">
460
- <p>Use with in any other environment</p>
461
- </div>
462
- {% code "bash" %}
463
- $ npm i @newlogic-digital/ui
464
- {% endcode %}
465
- {% code "css" %}
466
- /* main.css or separate modules */
467
- @import "node_modules/@newlogic-digital/ui/src/styles/main.css"
468
- {% endcode %}
469
- {% code "js" %}
470
- /* main.js or separate modules */
471
- import "node_modules/@newlogic-digital/ui/src/scripts/main.js"
472
- {% endcode %}
473
- </div>
474
- <div class="col-12" id="core">
475
- <h1 class="ui-title uppercase text-primary mb-5">Core</h1>
476
- <div class="ui-text">
477
- <p><b>Vituum</b> with Newlogic Core is used as the main toolset, the complete documentation is at <a href="https://vituum.dev" target="_blank">vituum.dev</a></p>
478
- <p>Framework can also be used with other tools, more information is in the section <a href="#build" title="">Build</a></p>
479
- </div>
480
- </div>
481
- <div class="col-12" id="theme">
482
- <h1 class="ui-title uppercase text-primary mb-5">Theme</h1>
483
- <div class="ui-text">
484
- <p>Main CSS variables can be configured in <code>styles/Utils/theme/main.css</code> a <code>styles/Utils/vars.css</code>, you can also create any number of color variations.</p>
485
- <p></p>
486
- <p>Keyframes can be added in <code>styles/Utils/keyframes.css</code>, print styles in <code>styles/Utils/print.css</code>, import of external css in <code>styles/Utils/vendor.css</code> and tailwind styles can be extended in<code>styles/Utils/tailwind</code></p>
487
- </div>
488
- </div>
489
- <div class="col-12" id="layout">
490
- <h1 class="ui-title uppercase text-primary mb-5">Layout</h1>
491
- <div class="ui-text">
492
- <p>Global styles are located at <code>styles/Layout/Main.css</code>, others layout styles are for eg. <code>Header.css</code>, <code>Footer.css</code> and naming should be done in following format <code>#l-header</code>, <code>#l-footer</code></p>
493
- <p></p>
494
- <p>Global scripts are located at <code>scripts/Layout/Main.js</code></p>
495
- <p></p>
496
- <p>Example of basic layout in HTML:</p>
497
- </div>
498
- {% code "html" %}
499
- <html class="no-js no-sw" lang="cs">
500
- <head>
501
- <title></title>
502
- <link rel="stylesheet" href="/assets/css/main.css">
503
- <script src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js" async></script>
504
-
505
- <script>"dark"!==localStorage.theme&&("theme"in localStorage||!window.matchMedia("(prefers-color-scheme: dark)").matches)||document.documentElement.classList.add("dark"),document.documentElement.className=document.documentElement.className.replace("no-js","js"),matchMedia("(hover: hover) and (pointer: fine)").matches&&document.documentElement.classList.add("no-touch"),/Android|iPhone|iPad|iPod/i.test(navigator.userAgent)&&document.documentElement.classList.add("mobile"),document.documentElement.classList.add(navigator.platform.toLowerCase().replace(/ .*/,"")),function(e){var t;e.match(/(msie|trident)/i)?document.documentElement.classList.add("ie"):e.match(/edge/)?document.documentElement.classList.add("edge"):(t=e.match(/(chrome|safari|firefox)/i))&&document.documentElement.classList.add(t[0])}(navigator.userAgent.toLowerCase())</script>
506
-
507
- <script src="/src/scripts/main.js" type="module"></script>
508
- </head>
509
- <body data-controller="lib lib-dialog lib-drawer">
510
- <div class="l-default">
511
- <header id="l-header" data-controller="l-header"></header>
512
- <main id="l-main" class="transition-fade">
513
- <!--PAGE CONTENT-->
514
- </main>
515
- <footer id="l-footer"></footer>
516
- </div>
517
- </body>
518
- </html>
519
- {% endcode %}
520
- </div>
521
- </div>
522
- <div class="row g-8 flex-wrap" style="padding-top: 4rem">
523
- <div class="col-12">
524
- <h1 class="ui-heading">Components</h1>
525
- <div class="ui-text">
526
- <p>List of basic components used in Newlogic UI</p>
527
- </div>
528
- </div>
529
- <div class="col-12" id="headings">
530
- <h1 class="ui-title uppercase text-primary mb-5">Headings</h1>
531
- <div class="ui-text mb-5">
532
- <h3>Attributes</h3>
533
- <ul>
534
- <li>data-size: <code>lg</code> <code>sm</code></li>
535
- </ul>
536
- </div>
537
- {% code "html:mirror" %}
538
- <h2 class="ui-heading" data-size="lg">Big heading</h2>
539
- {% endcode %}
540
- {% code "html:mirror" %}
541
- <h2 class="ui-heading">Normal heading</h2>
542
- {% endcode %}
543
- {% code "html:mirror" %}
544
- <h2 class="ui-heading" data-size="sm">Small heading</h2>
545
- {% endcode %}
546
- {% code "html:mirror" %}
547
- <strong class="ui-title uppercase">Title</strong>
548
- {% endcode %}
549
- <hr/>
550
- </div>
551
- <div class="col-12 items-start" id="buttons">
552
- <h1 class="ui-title uppercase text-primary mb-5">Buttons</h1>
553
- <div class="ui-text mb-5">
554
- <p>Button can be extended with <code>svg</code> icon</p>
555
- <p>Position of the icon can be done with class&nbsp;<code>icon-r</code>&nbsp;(to right) or
556
- <code>icon-l</code> (to left)</p>
557
- <p>CSS properties can be adjusted with <code>--ui-btn</code> prefix</p>
558
- <p>You can change the button color with following tailwind classes - <code>accent-*</code>, <code>bg-*</code>, <code>text-*</code></p>
559
- <p></p>
560
- <h3>Attributes</h3>
561
- <ul>
562
- <li>data-size: <code>lg</code></li>
563
- <li>data-type: <code>outline</code>, <code>square</code>, <code>m:square</code>, <code>circle</code>, <code>m:circle</code></li>
564
- <li>data-state: <code>active</code>, <code>loading</code></li>
565
- </ul>
566
- </div>
567
- {% code "html:mirror" %}
568
- <button class="ui-btn">
569
- Flat button
570
- </button>
571
- {% endcode %}
572
- {% code "html:mirror" %}
573
- <button class="ui-btn" data-type="outline">
574
- Outline button
575
- </button>
576
- {% endcode %}
577
- {% code "html:mirror" %}
578
- <button class="ui-btn text-primary" data-type="outline" style="--ui-btn-outline-opacity: 0.3">
579
- Outline button - primary color
580
- </button>
581
- {% endcode %}
582
- {% code "html:mirror" %}
583
- <button class="ui-btn" data-type="m:square">
584
- <svg class="icon-l">
585
- <use href="#icon-at-symbol"></use>
586
- </svg>
587
- <span class="m:hidden">Button with icon</span>
588
- </button>
589
- {% endcode %}
590
- {% code "html:mirror" %}
591
- <button class="ui-btn bg-default">
592
- <svg class="icon-r">
593
- <use href="#icon-chevron-right"></use>
594
- </svg>
595
- Next
596
- </button>
597
- {% endcode %}
598
- {% code "html:mirror" %}
599
- <button class="ui-btn bg-secondary">
600
- <svg class="icon-l">
601
- <use href="#icon-chevron-left"></use>
602
- </svg>
603
- Previous
604
- </button>
605
- {% endcode %}
606
- {% code "html:mirror" %}
607
- <button class="ui-btn">
608
- <svg class="icon-r">
609
- <use href="#icon-angle-down"></use>
610
- </svg>
611
- Continue
612
- </button>
613
- {% endcode %}
614
- {% code "html:mirror" %}
615
- <button class="ui-btn bg-secondary" data-type="square">
616
- <svg class="icon">
617
- <use href="#icon-at-symbol"></use>
618
- </svg>
619
- </button>
620
- {% endcode %}
621
- {% code "html:mirror" %}
622
- <button class="ui-btn bg-secondary" data-type="circle">
623
- <svg class="icon">
624
- <use href="#icon-at-symbol"></use>
625
- </svg>
626
- </button>
627
- {% endcode %}
628
- {% code "html:mirror" %}
629
- <button class="ui-btn bg-secondary" data-size="lg" data-type="circle" style="--ui-btn-height: 4rem">
630
- <svg class="icon">
631
- <use href="#icon-at-symbol"></use>
632
- </svg>
633
- </button>
634
- {% endcode %}
635
- {% code "html:mirror" %}
636
- <button class="ui-btn" data-size="lg">
637
- Large flat button
638
- </button>
639
- {% endcode %}
640
- {% code "html:mirror" %}
641
- <button class="ui-btn" data-size="lg" style="background-color: rgb(var(--color-facebook))">
642
- <svg class="icon-l">
643
- <use href="#icon-at-symbol"></use>
644
- </svg>
645
- Large flat button
646
- </button>
647
- {% endcode %}
648
- {% code "html:mirror" %}
649
- <button class="ui-btn" data-state="loading">
650
- Loading state
651
- </button>
652
- {% endcode %}
653
- {% code "html:mirror" %}
654
- <div class="ui-btn-group">
655
- <button class="ui-btn">
656
- Flat button
657
- </button>
658
- <button class="ui-btn" data-state="active">
659
- Flat button
660
- </button>
661
- <button class="ui-btn">
662
- Flat button
663
- </button>
664
- <button class="ui-btn">
665
- Flat button
666
- </button>
667
- </div>
668
- {% endcode %}
669
- {% code "html:mirror" %}
670
- <div class="ui-btn-group">
671
- <button class="ui-btn">
672
- Flat button
673
- </button>
674
- <button class="ui-btn" data-type="square" style="--ui-btn-icon-size: 1.5rem">
675
- <svg class="icon">
676
- <use href="#icon-angle-down"></use>
677
- </svg>
678
- </button>
679
- </div>
680
- {% endcode %}
681
- <hr/>
682
- </div>
683
- <div class="col-12 items-start" id="links">
684
- <h1 class="ui-title uppercase text-primary mb-5">Links</h1>
685
- <div class="ui-text mb-5">
686
- <p>CSS properties can be adjusted with <code>--ui-link</code> prefix</p>
687
- </div>
688
- {% code "html:mirror" %}
689
- <a href="#" class="ui-link" title="">
690
- Show more
691
- </a>
692
- {% endcode %}
693
- {% code "html:mirror" %}
694
- <a href="#" class="ui-link text-primary after:content-none" title="">
695
- Without underline
696
- </a>
697
- {% endcode %}
698
- <hr/>
699
- </div>
700
- <div class="col-12 items-start" id="icons">
701
- <h1 class="ui-title uppercase text-primary mb-5">Icons</h1>
702
- <div class="ui-text mb-5">
703
- <p>Icons can be added to <code>src/icons.svg</code> as symbols. They are inlined into HTML and used as with <code>href</code> linking.</p>
704
- <p>We use few icons from <a href="https://heroicons.com" target="_blank">heroicons.com</a></p>
705
- </div>
706
- {% code "html:mirror" %}
707
- <button class="ui-icon lib-hint-top" aria-label="Show menu">
708
- <svg>
709
- <use href="#icon-menu"></use>
710
- </svg>
711
- </button>
712
- {% endcode %}
713
- {% code "html:mirror" %}
714
- <svg class="ui-icon text-4xl" style="color: rgb(var(--color-twitter))">
715
- <use href="#icon-sun"></use>
716
- </svg>
717
- {% endcode %}
718
- {% code "html:mirror" %}
719
- <a href="#" class="ui-icon text-4xl" style="color: rgb(var(--color-youtube))">
720
- <svg>
721
- <use href="#icon-moon"></use>
722
- </svg>
723
- </a>
724
- {% endcode %}
725
- {% code "html:mirror" %}
726
- <button class="ui-icon-text space-x-2 text-primary">
727
- <svg class="ui-icon">
728
- <use href="#icon-menu"></use>
729
- </svg>
730
- <span class="ui-title font-medium">Show menu</span>
731
- </button>
732
- {% endcode %}
733
- <hr/>
734
- </div>
735
- <div class="col-12" id="form">
736
- <h1 class="ui-title uppercase text-primary mb-5">Forms</h1>
737
- <div class="ui-text mb-5">
738
- <p><code>label</code> is animated upon interaction, if you add it after select, input or textarea</p>
739
- <p>You can also use variant without label with attribute <code>placeholder</code> and <code>data-placeholder</code> for select</p>
740
- <p></p>
741
- <p>Forms elements have visual validation for invalid items</p>
742
- <p>This functionality can be turned off with attribute <code>data-novalidate</code> on element</p>
743
- <p>CSS properties can be adjusted with <code>--ui-input</code> and <code>--ui-checkbox</code> prefix</p>
744
- <p></p>
745
- <h3>Attributes</h3>
746
- <ul>
747
- <li>data-state: <code>active</code> (element is not empty), <code>valid</code>, <code>invalid</code>, <code>placeholder</code> (label is always up)</li>
748
- <li>data-has: <code>icon-l</code>, <code>icon-r</code> (for when icon is used)</li>
749
- </ul>
750
- </div>
751
- {% code "html:mirror" %}
752
- <div class="ui-select">
753
- <select>
754
- <option selected value="">- select option -</option>
755
- <option value="1">Option 1</option>
756
- <option value="2">Option 2</option>
757
- <option value="3">Option 3</option>
758
- </select>
759
- <label>How are you?</label>
760
- </div>
761
- {% endcode %}
762
- {% code "html:mirror" %}
763
- <div class="ui-select" data-has="icon-l">
764
- <select>
765
- <option selected value="">- select option -</option>
766
- <option value="1">Option 1</option>
767
- <option value="2">Option 2</option>
768
- <option value="3">Option 3</option>
769
- </select>
770
- <label>With icon</label>
771
- <svg class="icon-l">
772
- <use href="#icon-at-symbol"></use>
773
- </svg>
774
- </div>
775
- {% endcode %}
776
- {% code "html:mirror" %}
777
- <div class="ui-select">
778
- <select data-placeholder>
779
- <option selected value="">- select option -</option>
780
- <option value="1">Option 1</option>
781
- <option value="2">Option 2</option>
782
- <option value="3">Option 3</option>
783
- </select>
784
- </div>
785
- {% endcode %}
786
- {% code "html:mirror" %}
787
- <div class="ui-select" tabindex="-1">
788
- <select>
789
- <option selected value="">- select option -</option>
790
- <option value="1">Option 1</option>
791
- <option value="2">Option 2</option>
792
- <option value="3">Option 3</option>
793
- </select>
794
- <label>Javascript select</label>
795
- <div aria-hidden="true">
796
- <div data-option="">- select option -</div>
797
- <div data-option="1">Option 1</div>
798
- <div data-option="2">Option 2</div>
799
- <div data-option="3">Option 3</div>
800
- </div>
801
- </div>
802
- {% endcode %}
803
- {% code "html:mirror" %}
804
- <div class="ui-select">
805
- <select data-placeholder disabled>
806
- <option selected value="">Disabled state</option>
807
- <option value="1">Option 1</option>
808
- <option value="2">Option 2</option>
809
- <option value="3">Option 3</option>
810
- </select>
811
- </div>
812
- {% endcode %}
813
- {% code "html:mirror" %}
814
- <div class="ui-input">
815
- <input type="email" required>
816
- <label>E-mail</label>
817
- </div>
818
- {% endcode %}
819
- {% code "html:mirror" %}
820
- <div class="ui-input">
821
- <input type="tel" placeholder="Tel" />
822
- </div>
823
- {% endcode %}
824
- {% code "html:mirror" %}
825
- <div class="ui-input" data-has="icon-r" data-state="placeholder">
826
- <input type="text" required placeholder="Please fill">
827
- <label>Amount</label>
828
- <span class="icon-r" aria-label="Kč"></span>
829
- </div>
830
- {% endcode %}
831
- {% code "html:mirror" %}
832
- <div class="ui-input">
833
- <input type="tel" disabled>
834
- <label>Disabled state</label>
835
- </div>
836
- {% endcode %}
837
- {% code "html:mirror" %}
838
- <div class="ui-input">
839
- <textarea></textarea>
840
- <label>Message</label>
841
- </div>
842
- {% endcode %}
843
- {% code "html:mirror" %}
844
- <div class="ui-input">
845
- <input type="color" placeholder="Select color">
846
- </div>
847
- {% endcode %}
848
- {% code "html:mirror" %}
849
- <div class="ui-input">
850
- <input type="file" multiple="multiple" title="Upload files" placeholder="Select or drag file(s)">
851
- </div>
852
- {% endcode %}
853
- {% code "html:mirror" %}
854
- <div class="ui-input">
855
- <input type="number" min="1" max="99" step="1">
856
- <label>Select number</label>
857
- </div>
858
- {% endcode %}
859
- {% code "html:mirror" %}
860
- <div class="ui-input">
861
- <input type="datetime-local">
862
- <label>Select date and time</label>
863
- </div>
864
- {% endcode %}
865
- {% code "html:mirror" %}
866
- <div class="ui-input">
867
- <input type="date">
868
- <label>Select date</label>
869
- </div>
870
- {% endcode %}
871
- {% code "html:mirror" %}
872
- <div class="ui-input">
873
- <input type="time" placeholder="Select time">
874
- </div>
875
- {% endcode %}
876
- </div>
877
- <div class="col-12 items-start">
878
- {% code "html:mirror" %}
879
- <div class="ui-input w-28" data-has="icon-r">
880
- <input type="number" placeholder="" value="1" min="1" max="99" step="1">
881
- <span class="icon-r" aria-label="ks"></span>
882
- </div>
883
- {% endcode %}
884
- {% code "html:mirror" %}
885
- <div class="p-5 bg-gray-200 dark:bg-dark rounded-lg">
886
- <label class="ui-checkbox">
887
- <input type="checkbox">
888
- <span>I agree to the <a href="#">processing of personal data</a></span>
889
- </label>
890
- </div>
891
- {% endcode %}
892
- {% code "html:mirror" %}
893
- <div class="p-5 text-light bg-dark rounded-lg">
894
- <label class="ui-checkbox accent-light" data-theme="dark">
895
- <input type="checkbox">
896
- <span>I agree to the <a href="#">processing of personal data</a></span>
897
- </label>
898
- </div>
899
- {% endcode %}
900
- {% code "html:mirror" %}
901
- <div class="p-5 text-light bg-dark rounded-lg">
902
- <label class="ui-checkbox accent-info">
903
- <input type="checkbox">
904
- <span>I agree to the <a href="#">processing of personal data</a></span>
905
- </label>
906
- </div>
907
- {% endcode %}
908
- {% code "html:mirror" %}
909
- <label class="ui-checkbox flex-row-reverse">
910
- <input type="checkbox" class="checked:border-primary" style="--ui-checkbox-checked-bg: transparent; --ui-checkbox-checked-fg: var(--color-primary);" />
911
- <span>I agree to the <a href="#">processing of personal data</a></span>
912
- </label>
913
- {% endcode %}
914
- {% code "html:mirror" %}
915
- <label class="ui-radio">
916
- <input type="radio" name="radio">
917
- <span>Click on this radio button</span>
918
- </label>
919
- {% endcode %}
920
- {% code "html:mirror" %}
921
- <label class="ui-checkbox">
922
- <input type="checkbox" class="mr-3" />
923
- Without inner span
924
- </label>
925
- {% endcode %}
926
- {% code "html:mirror" %}
927
- <label class="ui-checkbox">
928
- <input type="checkbox">
929
- </label>
930
- {% endcode %}
931
- {% code "html:mirror" %}
932
- <label class="ui-radio">
933
- <input type="radio" name="radio">
934
- </label>
935
- {% endcode %}
936
- </div>
937
- <div class="col-12">
938
- <div class="ui-text mb-5">
939
- <p>Example form, for javascript form validation upon send you can add attribute <code>data-controller="lib-form"</code></p>
940
- </div>
941
- {% code "html:mirror" %}
942
- <form class="c-form" data-controller="lib-form">
943
- <div class="wrp_form_body grid gap-3">
944
- <div class="ui-select">
945
- <select required>
946
- <option selected disabled value="">- select option -</option>
947
- <option>Czechia</option>
948
- <option>Slovakia</option>
949
- </select>
950
- <label>Select country</label>
951
- </div>
952
- <div class="ui-input">
953
- <textarea required></textarea>
954
- <label>Message</label>
955
- </div>
956
- </div>
957
- <div class="wrp_form_info grid gap-3 py-4">
958
- <div class="text-sm">Protected with reCAPTCHA <small>(<a href="https://www.google.com/intl/en/policies/privacy/" title="Privacy policy" target="_blank" rel="noopener">Privacy policy</a> - <a href="https://www.google.com/intl/en/policies/terms/" title="Terms of use" target="_blank" rel="noopener">Terms of use</a>)</small></div>
959
- <label class="ui-checkbox">
960
- <input type="checkbox" required>
961
- <span>I agree with <a href="#">terms of use</a> and <a href="#">privacy policy</a></span>
962
- </label>
963
- </div>
964
- <div class="wrp_form_foot">
965
- <button class="ui-btn" aria-label="Send">Send</button>
966
- </div>
967
- </form>
968
- {% endcode %}
969
- <hr/>
970
- </div>
971
- <div class="col col-12" id="notice">
972
- <h1 class="ui-title uppercase text-primary mb-5">Notice</h1>
973
- <div class="ui-text mb-5">
974
- <p>Notice is an easy notice frame that you can combine with text or button and change the accent color as you need.</p>
975
- </div>
976
- {% code "html:mirror" %}
977
- <div class="ui-notice accent-warning">
978
- Warning notice
979
- </div>
980
- {% endcode %}
981
- {% code "html:mirror" %}
982
- <div class="ui-notice accent-success">
983
- Success notice
984
- </div>
985
- {% endcode %}
986
- {% code "html:mirror" %}
987
- <div class="ui-notice accent-info">
988
- Info notice
989
- </div>
990
- {% endcode %}
991
- {% code "html:mirror" %}
992
- <div class="ui-notice accent-error">
993
- Error notice
994
- </div>
995
- {% endcode %}
996
- {% code "html:mirror" %}
997
- <div class="ui-notice accent-error">
998
- Error notice
999
- <hr/>
1000
- <button class="ui-btn">
1001
- <span>Button</span>
1002
- </button>
1003
- </div>
1004
- {% endcode %}
1005
- {% code "html:mirror" %}
1006
- <div class="ui-notice accent-success">
1007
- <div class="ui-text">
1008
- <h4>Nicely done!</h4>
1009
- <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Nullam in elit iaculis, tristique nisi ut, mollis tellus. Nunc venenatis elit vel placerat commodo. Vestibulum odio neque, hendrerit nec venenatis at, tincidunt ut magna. Etiam hendrerit ultrices pharetra.</p>
1010
- </div>
1011
- <hr/>
1012
- <button class="ui-btn">
1013
- <span>Button</span>
1014
- </button>
1015
- </div>
1016
- {% endcode %}
1017
- {% code "html:mirror" %}
1018
- <div class="ui-notice accent-info">
1019
- Info notice
1020
- <hr/>
1021
- <button class="ui-btn">
1022
- <span>Button</span>
1023
- </button>
1024
- </div>
1025
- {% endcode %}
1026
- {% code "html:mirror" %}
1027
- <div class="ui-notice accent-warning">
1028
- Warning notice
1029
- <hr/>
1030
- <button class="ui-btn">
1031
- <span>Button</span>
1032
- </button>
1033
- </div>
1034
- {% endcode %}
1035
- {% code "html:mirror" %}
1036
- <div class="ui-notice bg-error text-light">
1037
- <div class="ui-text">
1038
- <h4>Badly done!</h4>
1039
- <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Nullam in elit iaculis, tristique nisi ut, mollis tellus. Nunc venenatis elit vel placerat commodo. Vestibulum odio neque, hendrerit nec venenatis at, tincidunt ut magna. Etiam hendrerit ultrices pharetra.</p>
1040
- </div>
1041
- <hr/>
1042
- <button class="ui-btn bg-light bg-opacity-20">
1043
- <span>Button</span>
1044
- </button>
1045
- </div>
1046
- {% endcode %}
1047
- </div>
1048
- <div class="col-12" id="badge">
1049
- <h1 class="ui-title uppercase text-primary mb-5">Badge</h1>
1050
- <div class="ui-text mb-5">
1051
- <p>CSS properties can be adjusted with <code>--ui-badge</code> prefix</p>
1052
- <p></p>
1053
- <h3>Attributes</h3>
1054
- <ul>
1055
- <li>data-size: <code>sm</code>, <code>md</code>, <code>lg</code></li>
1056
- <li>data-type: <code>square</code>, <code>circle</code></li>
1057
- </ul>
1058
- </div>
1059
- {% code "html:mirror" %}
1060
- <div class="ui-badge" data-size="sm">
1061
- Default
1062
- </div>
1063
- {% endcode %}
1064
- {% code "html:mirror" %}
1065
- <div class="ui-badge bg-dark">
1066
- Dark
1067
- </div>
1068
- {% endcode %}
1069
- {% code "html:mirror" %}
1070
- <div class="ui-badge bg-light text-dark">
1071
- Light
1072
- </div>
1073
- {% endcode %}
1074
- {% code "html:mirror" %}
1075
- <div class="ui-badge bg-primary rounded-full">
1076
- <span>Primary</span>
1077
- </div>
1078
- {% endcode %}
1079
- {% code "html:mirror" %}
1080
- <a href="#" class="ui-badge bg-secondary">
1081
- Secondary
1082
- </a>
1083
- {% endcode %}
1084
- {% code "html:mirror" %}
1085
- <button class="ui-badge bg-secondary" data-type="circle">
1086
- 9
1087
- </button>
1088
- {% endcode %}
1089
- {% code "html:mirror" %}
1090
- <button class="ui-badge bg-secondary" data-type="square" data-size="md">
1091
- 99
1092
- </button>
1093
- {% endcode %}
1094
- {% code "html:mirror" %}
1095
- <button class="ui-badge bg-secondary" data-type="circle">
1096
- <svg class="icon">
1097
- <use href="#icon-x"></use>
1098
- </svg>
1099
- </button>
1100
- {% endcode %}
1101
- {% code "html:mirror" %}
1102
- <div class="ui-badge-group">
1103
- <div class="ui-badge bg-dark">
1104
- <span>npm</span>
1105
- </div>
1106
- <div class="ui-badge bg-info">
1107
- <span>7.1.2</span>
1108
- </div>
1109
- </div>
1110
- {% endcode %}
1111
- <hr/>
1112
- </div>
1113
- <div class="col-12" id="progress">
1114
- <h1 class="ui-title uppercase text-primary mb-5">Progress</h1>
1115
- <div class="ui-text mb-5">
1116
- <p>Progress bar is easy UI element, which uses native <code>&lt;progress&gt;</code> tag</p>
1117
- <p>If you skip <code>value</code> attribute, the bar is animated as intermediate</p>
1118
- <p>CSS properties can be adjusted with <code>--ui-progress</code></p>
1119
- <p></p>
1120
- <h3>Attributes</h3>
1121
- <ul>
1122
- <li>data-size: <code>sm</code>, <code>lg</code></li>
1123
- </ul>
1124
- </div>
1125
- <div>
1126
- {% code "html:mirror" %}
1127
- <progress class="ui-progress" value="15" max="100">15%</progress>
1128
- {% endcode %}
1129
- {% code "html:mirror" %}
1130
- <progress class="ui-progress text-primary" value="50" max="100">15%</progress>
1131
- {% endcode %}
1132
- {% code "html:mirror" %}
1133
- <progress class="ui-progress text-secondary" value="35" max="100" data-size="lg">15%</progress>
1134
- {% endcode %}
1135
- {% code "html:mirror" %}
1136
- <progress class="ui-progress text-error" value="75" max="100" data-size="sm">15%</progress>
1137
- {% endcode %}
1138
- {% code "html:mirror" %}
1139
- <progress class="ui-progress text-error" max="100">15%</progress>
1140
- {% endcode %}
1141
- </div>
1142
- <hr/>
1143
- </div>
1144
- <div class="col col-12" id="text">
1145
- <h1 class="ui-title uppercase text-primary mb-5">Texty</h1>
1146
- <div class="ui-text mb-5">
1147
- <p>Into text element you can add all elements as <code>h1-6</code>, <code>p</code>, <code>ul</code>, <code>ul</code>, <code>table</code> etc.</p>
1148
- </div>
1149
- {% code "html:mirror" %}
1150
- <div class="ui-text">
1151
- <h1>h1 heading</h1>
1152
- <h2>h2 heading</h2>
1153
- <h3>h3 heading</h3>
1154
- <h4>h4 heading</h4>
1155
- <h5>h5 heading</h5>
1156
- <h6>h6 heading</h6>
1157
- <p>Lorem ipsum dolor</p>
1158
- <hr>
1159
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget efficitur
1160
- metus. In bibendum nisi et dui <a href="#">sagittis efficitur</a>. Proin porttitor diam at quam
1161
- finibus, quis porttitor turpis ullamcorper. Quisque iaculis imperdiet nunc in
1162
- hendrerit. Nulla facilisi. Sed at sodales ex. Vivamus ornare auctor ligula et
1163
- lobortis. Nunc metus augue, tristique vitae sagittis ac, interdum eu nisl.
1164
- Curabitur aliquet, lectus ut interdum commodo, ipsum elit gravida libero, in
1165
- laoreet lectus nisl a erat. Sed consequat justo pulvinar turpis pharetra mattis.
1166
- Phasellus non pretium libero.</p>
1167
- <p></p>
1168
- <ul style="max-width: 400px">
1169
- <li>Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In
1170
- bibendum nisi et dui
1171
- </li>
1172
- <li>Donec eget efficitur metus</li>
1173
- </ul>
1174
- <p></p>
1175
- <ul style="max-width: 400px; list-style: square">
1176
- <li>Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In
1177
- bibendum nisi et dui
1178
- </li>
1179
- <li>Donec eget efficitur metus</li>
1180
- </ul>
1181
- <p></p>
1182
- <ul style="max-width: 400px; list-style: circle">
1183
- <li>Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In
1184
- bibendum nisi et dui
1185
- </li>
1186
- <li>Donec eget efficitur metus</li>
1187
- </ul>
1188
- <p></p>
1189
- <ol style="max-width: 400px;">
1190
- <li>Lorem ipsum dolor sit amet, consectetur. Donec eget efficitur metus In
1191
- bibendum nisi et dui
1192
- </li>
1193
- <li>Donec eget efficitur metus</li>
1194
- </ol>
1195
- <ol type="1">
1196
- <li>Coffee</li>
1197
- <li>Tea</li>
1198
- <li>Milk</li>
1199
- </ol>
1200
- <ol type="A">
1201
- <li>Coffee</li>
1202
- <li>Tea</li>
1203
- <li>Milk</li>
1204
- </ol>
1205
- <ol type="a">
1206
- <li>Coffee</li>
1207
- <li>Tea</li>
1208
- <li>Milk</li>
1209
- </ol>
1210
- <ol type="I">
1211
- <li>Coffee</li>
1212
- <li>Tea</li>
1213
- <li>Milk</li>
1214
- </ol>
1215
- <ol type="i">
1216
- <li>Coffee</li>
1217
- <li>Tea</li>
1218
- <li>Milk</li>
1219
- </ol>
1220
- <p></p>
1221
- <blockquote>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.</blockquote>
1222
- <p></p>
1223
- <figure>
1224
- <img src="https://bulma.io/images/placeholders/256x256.png">
1225
- <figcaption>
1226
- Figure 1: Some beautiful placeholders
1227
- </figcaption>
1228
- </figure>
1229
- <h2>Heading</h2>
1230
- <table>
1231
- <thead>
1232
- <tr>
1233
- <th scope="col">#</th>
1234
- <th scope="col">First</th>
1235
- <th scope="col">Last</th>
1236
- <th scope="col">Handle</th>
1237
- </tr>
1238
- </thead>
1239
- <tbody>
1240
- <tr>
1241
- <th scope="row">1</th>
1242
- <td>Mark</td>
1243
- <td>Otto</td>
1244
- <td>@mdo</td>
1245
- </tr>
1246
- <tr>
1247
- <th scope="row">2</th>
1248
- <td>Jacob</td>
1249
- <td>Thornton</td>
1250
- <td>@fat</td>
1251
- </tr>
1252
- <tr>
1253
- <th scope="row">3</th>
1254
- <td>Larry</td>
1255
- <td>the Bird</td>
1256
- <td>@twitter</td>
1257
- </tr>
1258
- </tbody>
1259
- </table>
1260
- <p></p>
1261
- <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
1262
- </div>
1263
- {% endcode %}
1264
- </div>
1265
- </div>
1266
- <div class="row g-8 flex-wrap" style="padding-top: 3rem;">
1267
- <div class="col-12" style="padding-top: 0">
1268
- <h1 class="ui-heading">Tailwind</h1>
1269
- </div>
1270
- <div class="ui-text">
1271
- <p>Newlogic UI uses <a href="https://tailwindcss.com/docs/" target="_blank">Tailwind CSS</a> for all utility classes. It is extednded by CSS properties, custom colors, flex grid and alternative responsive classes</p>
1272
- </div>
1273
- <div class="col-12 items-start" id="colors">
1274
- <h1 class="ui-title uppercase text-primary mb-5">Colors</h1>
1275
- <div class="ui-text">
1276
- <p>Colors are defined as CSS properties, so you can refer the colors in code as <code>var(--color-primary)</code> and you can use other colors from <a href="https://tailwindcss.com/docs/customizing-colors" target="_blank">Tailwind</a></p>
1277
- <p></p>
1278
- <h3>Use for text</h3>
1279
- </div>
1280
- {% code "html:mirror" %}
1281
- <div class="current-primary">text-primary</div>
1282
- <div class="text-primary">text-primary</div>
1283
- <div class="text-secondary mb-2">text-secondary</div>
1284
- <div class="text-success mb-2">text-success</div>
1285
- <div class="text-error mb-2">text-error</div>
1286
- <div class="text-info mb-2">text-info</div>
1287
- <div class="text-warning mb-2">text-warning</div>
1288
- <div class="text-default mb-2">text-default</div>
1289
- <div class="text-invert bg-default py-1 px-2 mb-2 rounded-md inline-flex">text-invert</div><br>
1290
- <div class="text-light bg-dark py-1 px-2 mb-2 rounded-md inline-flex">text-light</div><br>
1291
- <div class="text-dark bg-light py-1 px-2 mb-2 rounded-md inline-flex">text-dark</div>
1292
- {% endcode %}
1293
- <div class="ui-text">
1294
- <h3>Use as background</h3>
1295
- </div>
1296
- {% code "html:mirror" %}
1297
- <div class="bg-primary p-4 mb-2 rounded-md">bg-primary</div>
1298
- <div class="bg-secondary p-4 mb-2 rounded-md">bg-secondary</div>
1299
- <div class="bg-success p-4 mb-2 rounded-md">bg-success</div>
1300
- <div class="bg-error p-4 mb-2 rounded-md">bg-error</div>
1301
- <div class="bg-info p-4 mb-2 rounded-md">bg-info</div>
1302
- <div class="bg-warning p-4 mb-2 rounded-md">bg-warning</div>
1303
- <div class="bg-default text-invert p-4 mb-2 rounded-md">bg-default</div>
1304
- <div class="bg-invert text-default p-4 mb-2 border border-dashed border-default rounded-md">bg-invert</div>
1305
- <div class="bg-light text-dark p-4 mb-2 border border-dashed border-dark rounded-md">bg-light</div>
1306
- <div class="bg-dark text-light p-4 rounded-md border border-dashed border-default">bg-dark</div>
1307
- {% endcode %}
1308
- <div class="ui-text">
1309
- <h3>Use as accent</h3>
1310
- <p>You can change accent of any element globally with <code>accent-</code> color</p>
1311
- <p></p>
1312
- </div>
1313
- {% code "html:mirror" %}
1314
- <div class="accent-error space-y-3">
1315
- <div class="ui-input">
1316
- <input type="text">
1317
- <label>Inherited accent input</label>
1318
- </div>
1319
- <div class="ui-notice">
1320
- Notice with inherited accent
1321
- </div>
1322
- <button class="ui-btn">Inherited accent button</button>
1323
- </div>
1324
- {% endcode %}
1325
- </div>
1326
- <div class="col-12 items-start" id="responsive">
1327
- <h1 class="ui-title uppercase text-primary mb-5">Responsive</h1>
1328
- <div class="ui-text">
1329
- <p>Newlogic UI is <b>mobile-first</b> and has 5 main breakpoints, these breakpoints are used instead of Tailwind syntax as <code>lg</code>, <code>sm</code> etc.</p>
1330
- <p></p>
1331
- <ul>
1332
- <li><code>m:</code> mobile <small>(&lt;768)</small></li>
1333
- <li><code>t:</code> tablet <small>(&gt;768)</small></li>
1334
- <li><code>d:</code> desktop <small>(&gt;960)</small></li>
1335
- <li><code>w:</code> widescreen <small>(&gt;1216)</small></li>
1336
- <li><code>hd:</code> fullhd <small>(&gt;1408)</small></li>
1337
- <li><code>touch:</code> touch <small>(&lt;960)</small></li>
1338
- </ul>
1339
- <p></p>
1340
- <table class="w-full">
1341
- <thead>
1342
- <tr>
1343
- <th style="width: 20%;">
1344
- <code>&lt;768px</code>
1345
- </th>
1346
- <th style="width: 20%;">
1347
- <code>768-959px</code>
1348
- </th>
1349
- <th style="width: 20%;">
1350
- <code>960-1215px</code>
1351
- </th>
1352
- <th style="width: 20%;">
1353
- <code>1216-1408px</code>
1354
- </th>
1355
- <th style="width: 20%;">
1356
- <code>&gt;1408px</code>
1357
- </th>
1358
- </tr>
1359
- </thead>
1360
- <tbody>
1361
- <tr>
1362
- <td>
1363
- <span class="block rounded-md text-white font-extrabold text-center bg-primary p-3">m:</span>
1364
- </td>
1365
- <td colspan="4">
1366
- <span class="block rounded-md text-white font-extrabold text-center bg-black bg-opacity-10 p-3">-</span>
1367
- </td>
1368
- </tr>
1369
- <tr>
1370
- <td>
1371
- <span class="block rounded-md text-white font-extrabold text-center bg-black bg-opacity-10 p-3">-</span>
1372
- </td>
1373
- <td colspan="4">
1374
- <span class="block rounded-md text-white font-extrabold text-center bg-primary p-3">t:</span>
1375
- </td>
1376
- </tr>
1377
- <tr>
1378
- <td colspan="2">
1379
- <span class="block rounded-md text-white font-extrabold text-center bg-black bg-opacity-10 p-3">-</span>
1380
- </td>
1381
- <td colspan="3">
1382
- <span class="block rounded-md text-white font-extrabold text-center bg-primary p-3">d:</span>
1383
- </td>
1384
- </tr>
1385
- <tr>
1386
- <td colspan="3">
1387
- <span class="block rounded-md text-white font-extrabold text-center bg-black bg-opacity-10 p-3">-</span>
1388
- </td>
1389
- <td colspan="2">
1390
- <span class="block rounded-md text-white font-extrabold text-center bg-primary p-3">w:</span>
1391
- </td>
1392
- </tr>
1393
- <tr>
1394
- <td colspan="4">
1395
- <span class="block rounded-md text-white font-extrabold text-center bg-black bg-opacity-10 p-3">-</span>
1396
- </td>
1397
- <td>
1398
- <span class="block rounded-md text-white font-extrabold text-center bg-primary p-3">hd:</span>
1399
- </td>
1400
- </tr>
1401
- <tr>
1402
- <td colspan="2">
1403
- <span class="block rounded-md text-white font-extrabold text-center bg-primary p-3">touch:</span>
1404
- </td>
1405
- <td colspan="3">
1406
- <span class="block rounded-md text-white font-extrabold text-center bg-black bg-opacity-10 p-3">-</span>
1407
- </td>
1408
- </tr>
1409
- </tbody>
1410
- </table>
1411
- </div>
1412
- <hr/>
1413
- </div>
1414
- <div class="col-12" id="container" data-offset="128">
1415
- <h1 class="ui-title uppercase text-primary mb-5">Container</h1>
1416
- <div class="ui-text mb-5">
1417
- <p>Container aligns content to center with maximum width of <code>1200px</code></p>
1418
- <p>You can adjust following CSS properties <code>--container-width</code> <code>--container-width-sm</code>, <code>--container-padding</code></p>
1419
- <p></p>
1420
- <h3>Attributes</h3>
1421
- <ul>
1422
- <li>data-size: <code>sm</code> <small>(=800px)</small></li>
1423
- </ul>
1424
- </div>
1425
- <div class="col-container">
1426
- {% code "html:mirror" %}
1427
- <div class="w-full h-2 my-2 bg-default bg-opacity-10 rounded"></div>
1428
- <div class="container">
1429
- <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-blue-500">container</div>
1430
- </div>
1431
- {% endcode %}
1432
- </div>
1433
- <hr/>
1434
- </div>
1435
- <div class="col-12 col-grid" id="grid">
1436
- <h1 class="ui-title uppercase text-primary mb-5">Grid</h1>
1437
- <div class="ui-text">
1438
- <p>For grid system you can use native <a href="https://tailwindcss.com/docs/grid-column" target="_blank">Tailwind Grid</a>, but Newlogic UI has also it's own flex grid system similiar to Boostrap grid</p>
1439
- <p></p>
1440
- <h3>Features</h3>
1441
- <ul>
1442
- <li>classes: <code>row</code>, <code>row-x</code>, <code>row-y</code></li>
1443
- <li>
1444
- spacing: <a href="https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale" target="_blank">https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale</a>
1445
- <ul>
1446
- <li>vertical & horizontal: <code>g-4</code></li>
1447
- <li>horizontal: <code>gx-6</code></li>
1448
- <li>vertical: <code>gy-6</code></li>
1449
- </ul>
1450
- </li>
1451
- <li>
1452
- column width <small>(0% - 100%)</small>: <code>col-1</code> - <code>col-12</code>
1453
- (same principle as Bootstrap - <a href="https://getbootstrap.com/docs/5.0/layout/grid/" target="_blank">https://getbootstrap.com/docs/5.0/layout/grid/</a>)
1454
- </li>
1455
- <li>column width can be defined also with Tailwind classes: <code>w-1/5</code>, <code>w-3/6</code> (<a href="https://tailwindcss.com/docs/width" target="_blank">https://tailwindcss.com/docs/width</a>)</li>
1456
- </ul>
1457
- <p></p>
1458
- <p>You can use following responsive prefixes for all classes: <code>m:</code> <small>(&lt;768)</small>, <code>t:</code> <small>(&gt;768)</small>, <code>d:</code> <small>(&gt;960)</small>, <code>w:</code> <small>(&gt;1216)</small>, <code>hd:</code> <small>(&gt;1408)</small></p>
1459
- <p>Rows are not wrapped by default, for wrapping you have to use <code>flex-wrap</code></p>
1460
- <p></p>
1461
- </div>
1462
- {% code "html:mirror" %}
1463
- <div class="row g-4">
1464
- <div class="col col-6">
1465
- <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-blue-500">1</div>
1466
- </div>
1467
- <div class="col col-6">
1468
- <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-blue-500">2</div>
1469
- </div>
1470
- </div>
1471
- {% endcode %}
1472
- {% code "html:mirror" %}
1473
- <div class="row g-4 justify-between">
1474
- <div class="col col-4 items-end">
1475
- <div class="w-full h-2 my-2 bg-default bg-opacity-10 rounded"></div>
1476
- <div class="h-16 w-20 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-green-500">1</div>
1477
- </div>
1478
- <div class="col col-4">
1479
- <div class="w-full h-2 my-2 bg-default bg-opacity-10 rounded"></div>
1480
- <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-green-500">2</div>
1481
- </div>
1482
- </div>
1483
- {% endcode %}
1484
- {% code "html:mirror" %}
1485
- <div class="row g-4">
1486
- <div class="col col-12 t:col-auto flex-grow items-center">
1487
- <div class="w-full h-2 my-2 bg-default bg-opacity-10 rounded"></div>
1488
- <div class="h-16 w-20 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-red-500">1</div>
1489
- </div>
1490
- <div class="col col-12 t:col-4 items-center justify-center">
1491
- <div class="w-full h-2 my-2 bg-default bg-opacity-10 rounded"></div>
1492
- <div class="h-16 w-20 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-red-500">2</div>
1493
- </div>
1494
- </div>
1495
- {% endcode %}
1496
- {% code "html:mirror" %}
1497
- <div class="h-2 my-2 bg-light bg-opacity-10 rounded"></div>
1498
- <div class="row t:gx-6">
1499
- <div class="col col-12 t:col-6">
1500
- <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-blue-500">1</div>
1501
- </div>
1502
- <div class="col col-12 t:col-6">
1503
- <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-green-500">2</div>
1504
- </div>
1505
- </div>
1506
- <div class="h-2 my-2 bg-light bg-opacity-10 rounded"></div>
1507
- <div class="row t:g-6 flex-wrap">
1508
- <div class="col col-12 t:col-6 flex-row space-x-6">
1509
- <div class="col col-6 flex-row space-x-6">
1510
- <div class="col col-6">
1511
- <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-blue-500">1</div>
1512
- </div>
1513
- <div class="col col-6">
1514
- <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-red-500">2</div>
1515
- </div>
1516
- </div>
1517
- <div class="col col-6">
1518
- <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-green-500">2</div>
1519
- </div>
1520
- </div>
1521
- <div class="col col-12 t:col-6">
1522
- <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-blue-500">2</div>
1523
- </div>
1524
- <div class="col col-12 t:col-6">
1525
- <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-blue-500">1</div>
1526
- </div>
1527
- <div class="col col-12 t:col-6 flex-row space-x-6">
1528
- <div class="col col-6 flex-row space-x-6">
1529
- <div class="col col-6">
1530
- <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-blue-500">1</div>
1531
- </div>
1532
- <div class="col col-6">
1533
- <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-red-500">2</div>
1534
- </div>
1535
- </div>
1536
- <div class="col col-6">
1537
- <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-green-500">2</div>
1538
- </div>
1539
- </div>
1540
- </div>
1541
- <div class="h-2 my-2 bg-light bg-opacity-10 rounded"></div>
1542
- <div class="row t:g-6">
1543
- <div class="col col-12 t:col-6 space-y-6">
1544
- <div class="col col-12">
1545
- <div class="row gx-6">
1546
- <div class="col col-6">
1547
- <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-indigo-500">1</div>
1548
- </div>
1549
- <div class="col col-6">
1550
- <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-blue-500">2</div>
1551
- </div>
1552
- </div>
1553
- </div>
1554
- <div class="col col-12">
1555
- <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-green-500">2</div>
1556
- </div>
1557
- </div>
1558
- <div class="col col-12 t:col-6 space-y-6">
1559
- <div class="col col-12">
1560
- <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-green-500">1</div>
1561
- </div>
1562
- <div class="col col-12">
1563
- <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-red-500">2</div>
1564
- </div>
1565
- </div>
1566
- </div>
1567
- <div class="h-2 my-2 bg-light bg-opacity-10 rounded"></div>
1568
- <div class="row-y flex-col t:gy-6">
1569
- <div class="row-x gx-6">
1570
- <div class="col col-6">
1571
- <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-blue-500">1</div>
1572
- </div>
1573
- <div class="col col-6">
1574
- <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-indigo-500">2</div>
1575
- </div>
1576
- </div>
1577
- <div class="row-x gx-6">
1578
- <div class="col col-6">
1579
- <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-red-500">1</div>
1580
- </div>
1581
- <div class="col col-6">
1582
- <div class="h-16 text-white text-2xl font-extrabold rounded-md flex items-center justify-center bg-green-500">2</div>
1583
- </div>
1584
- </div>
1585
- </div>
1586
- <div class="h-2 my-2 bg-light bg-opacity-10 rounded"></div>
1587
- {% endcode %}
1588
- </div>
1589
- </div>
1590
- <div class="row g-8 flex-wrap" style="padding-top: 3rem;">
1591
- <div class="col-12" style="padding-top: 0">
1592
- <h1 class="ui-heading">Libraries</h1>
1593
- </div>
1594
- <div class="col-12" id="anchor">
1595
- <h1 class="ui-title uppercase text-primary mb-5">Anchor</h1>
1596
- <div class="ui-text">
1597
- <p>Located in <code>src/scripts/Libraries/Anchor.js</code></p>
1598
- <p>Anchors works native by default and are defined normally as always in the browser</p>
1599
- <p></p>
1600
- <p>For adding extra functionality you can add following attributes <code>data-action="click->lib#anchor"</code> and <code>data-lib-anchor="silent mobile"</code></p>
1601
- <p></p>
1602
- <p>Silent determines if we want to hide the hash and mobile if the anchor should only work on the phone. If we do not want either, we do not specify the attribute</p>
1603
- <p></p>
1604
- <p>Offset is calculated automatically with CSS property <code>--l-scroll-padding-top</code></p>
1605
- <p></p>
1606
- <p></p>
1607
- <p><b>Examples:</b></p>
1608
- </div>
1609
- {% code "html" %}
1610
- <a href="#section">Link to anchor</a>
1611
- <div id="section"></div>
1612
- {% endcode %}
1613
- {% code "html" %}
1614
- <button data-action="click->lib#anchor" data-action-href="#sekce" data-lib-anchor="mobile">Link to anchor</button>
1615
- <div id="sekce"></div>
1616
- {% endcode %}
1617
- <hr/>
1618
- </div>
1619
- <div class="col-12" id="cookieconsent">
1620
- <h1 class="ui-title uppercase text-primary mb-5">CookieConsent</h1>
1621
- <div class="ui-text">
1622
- <p>Located in <code>src/scripts/Libraries/CookieConsent.js</code>, <code>src/styles/Components/CookieConsent.css</code>, <code>src/styles/Components/Form/CookieConsent.css</code></p>
1623
- <p></p>
1624
- <p>The content is being prepared ...</p>
1625
- </div>
1626
- </div>
1627
- <div class="col-12" id="datepicker">
1628
- <h1 class="ui-title uppercase text-primary mb-5">Datepicker</h1>
1629
- <div class="ui-text">
1630
- <p>Mainlly used for <code>ui-input</code> for <code>type="date"</code> and <code>type="datetime-local"</code></p>
1631
- <p>Located in <code>src/styles/Libraries/Datepicker.css</code> and <a href="https://github.com/mymth/vanillajs-datepicker" target="_blank">Vanilla JS Datepicker</a> is used as library</p>
1632
- <p></p>
1633
- <p>The content is being prepared ...</p>
1634
- </div>
1635
- </div>
1636
- <div class="col col-12 items-start" id="dialog">
1637
- <h1 class="ui-title uppercase text-primary mb-5">Dialog</h1>
1638
- <div class="ui-text mb-5">
1639
- <p>On any element you can add <code>data-action="click->lib-dialog#show"</code> with attribute <code>data-action-url</code> which is url to <code>*.json</code> file or url request which contains html. For closing the dialog window, you can add <code>data-action="click->lib-dialog#hide"</code> to any element</p>
1640
- <p></p>
1641
- <p>Adding <code>data-lib-dialog-open</code> attribute on <code>data-controller="lib-dialog"</code> (by default located on body), then the dialog gets open upon page load</p>
1642
- <p>Url is passed the same way as normal, you can also add selector to <code>data-lib-dialog-open</code> and HTML content of that selector opens as dialog.</p>
1643
- <p></p>
1644
- <p></p>
1645
- <h3>Methods</h3>
1646
- <ul>
1647
- <li>open dialog with dialog with fetch request: <code>LibDialog.action(url)</code></li>
1648
- <li>open dialog with any content: <code>LibDialog.show(content)</code></li>
1649
- <li>close dialog: <code>LibDialog.hide()</code></li>
1650
- </ul>
1651
- <p>All methods returns promise</p>
1652
- <p></p>
1653
- <p></p>
1654
- <h3>Attributes (c-dialog)</h3>
1655
- <ul>
1656
- <li>data-size: <code>sm</code>, <code>base</code>, <code>lg</code></li>
1657
- <li>data-type: <code>scrollable</code> - scroll inside dialog</li>
1658
- <li>class: <code>justify-center</code> - vertical align to center</li>
1659
- </ul>
1660
- </div>
1661
- {% code "html:mirror" %}
1662
- <button class="ui-btn" data-action="click->lib-dialog#show" data-action-url="/dialog-basic.json">
1663
- Open dialog window
1664
- </button>
1665
- {% endcode %}
1666
- </div>
1667
- <div class="col-12" id="drawer">
1668
- <h1 class="ui-title uppercase text-primary mb-5">Drawer</h1>
1669
- <div class="ui-text">
1670
- <p>Located in <code>src/scripts/Libraries/Drawer.js</code>, <code>src/styles/Libraries/Drawer.css</code></p>
1671
- <p></p>
1672
- <p>The content is being prepared ...</p>
1673
- </div>
1674
- </div>
1675
- <div class="col-12" id="hint">
1676
- <h1 class="ui-title uppercase text-primary mb-5">Hint</h1>
1677
- <div class="ui-text">
1678
- <p>Located in <code>src/styles/Libraries/Hint.css</code></p>
1679
- <p></p>
1680
- <p>The content is being prepared ...</p>
1681
- </div>
1682
- </div>
1683
- <div class="col-12 col-images" id="lazysizes">
1684
- <h1 class="ui-title uppercase text-primary mb-5">Lazysizes</h1>
1685
- <div class="ui-text mb-5">
1686
- <p>Images should be wrapped insude <code>.ui-image</code> class and as <code>div</code> or <code>picture</code></p>
1687
- <p>You can add layzload for the images with the library <a href="https://github.com/aFarkas/lazysizes" target="_blank" rel="noopener">lazysizes</a></p>
1688
- <p>To maintain ratio of the images you have to add ratio class from tailwind, for example <code>aspect-[4/3]</code></p>
1689
- <p>Styles for lazysizes are located in <code>src/styles/Libraries/Lazysizes.css</code></p>
1690
- </div>
1691
- <style>
1692
- .col-images .ui-image {
1693
- max-width: 10rem;
1694
- }
1695
- </style>
1696
- <div>
1697
- {% code "html:mirror" %}
1698
- <div class="ui-image aspect-[3/2]">
1699
- <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://via.placeholder.com/300x200" alt="" class="lazyload"/>
1700
- <noscript>
1701
- <img src="https://via.placeholder.com/300x200" alt=""/>
1702
- </noscript>
1703
- </div>
1704
- {% endcode %}
1705
- </div>
1706
- <div>
1707
- {% code "html:mirror" %}
1708
- <picture class="ui-image aspect-[3/2]">
1709
- <source srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="https://via.placeholder.com/300x200" />
1710
- <img src="https://via.placeholder.com/300x200" alt="" class="lazyload"/>
1711
- </picture>
1712
- {% endcode %}
1713
- </div>
1714
- <div class="ui-text mb-5">
1715
- <p>Lazyload can be added also on <code>iframe</code></p>
1716
- </div>
1717
- <div>
1718
- {% code "html:mirror" %}
1719
- <div class="ui-image aspect-square">
1720
- <iframe class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10243.539317839937!2d14.3677486!3d50.0697185!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x66f5877a189baf0d!2sTvorba+webov%C3%BDch+str%C3%A1nek+-+New+Logic+Studio!5e0!3m2!1sen!2scz!4v1547215701439" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
1721
- </div>
1722
- {% endcode %}
1723
- </div>
1724
- <hr/>
1725
- </div>
1726
- <div class="col-12" id="nativeslider">
1727
- <h1 class="ui-title uppercase text-primary mb-5">NativeSlider</h1>
1728
- <div class="ui-text mb-5">
1729
- <p>Lightweight scroll based slider, which uses CSS <code>scroll-snap</code></p>
1730
- <p>It is intended for a simple solution, for advanced sliders it is recommended to use sliders such as <a href="https://github.com/metafizzy/flickity" target="_blank">Flickity</a></p>
1731
- <p></p>
1732
- <p>Dot navigation can be generated with <code>data-lib-ns-nav</code> attribute or manually with each <code>data-lib-ns-nav-item</code> attribute</p>
1733
- <p>Arrow control can be controlled with <code>data-lib-ns-prev</code> and <code>data-lib-ns-next</code> attributes</p>
1734
- <p></p>
1735
- <p>Slider area is defined with <code>data-lib-ns</code> attribute, you can set autoplay by entering a number in the attribute</p>
1736
- <p>Other advanced params are <code>&lt;progress data-lib-ns-progress&gt;&lt;/progress&gt;</code>, <code>data-lib-ns-counter="min"</code> and <code>data-lib-ns-counter="max"</code></p>
1737
- <p></p>
1738
- <p>The sliders is initialized with <code>data-controller="lib-ns"</code> on parent element</p>
1739
- </div>
1740
- <div>
1741
- {% code "html:mirror" %}
1742
- <div data-controller="lib-ns">
1743
- <div class="row gx-3" data-lib-ns>
1744
- {% for i in 1..6 %}
1745
- <div class="col col-4">
1746
- <div class="ui-image rounded-2xl overflow-hidden aspect-[8/5]">
1747
- <img src="{{lazy(1,1)}}" data-src="{{placeholder(1200,750)}}" alt="" class="lazyload" />
1748
- </div>
1749
- </div>
1750
- {% endfor %}
1751
- </div>
1752
- <div class="row-x justify-between items-center mt-4">
1753
- <div class="col col-left">
1754
- <button class="ui-btn" data-type="square" aria-label="Previous" data-lib-ns-prev>
1755
- <svg class="icon">
1756
- <use href="#icon-chevron-left"></use>
1757
- </svg>
1758
- </button>
1759
- </div>
1760
- <div class="col col-counter m:hidden">
1761
- <div class="row py-3 gx-6 items-center justify-center">
1762
- <div class="col">
1763
- <div class="flex" data-lib-ns-nav></div>
1764
- </div>
1765
- <div class="col">
1766
- <div><span data-lib-ns-counter="min">1</span>/<span data-lib-ns-counter="max"></span></div>
1767
- </div>
1768
- </div>
1769
- <progress class="ui-progress" data-size="sm" value="50" max="100" data-lib-ns-progress></progress>
1770
- </div>
1771
- <div class="col col-right">
1772
- <button class="ui-btn" data-type="square" aria-label="Next" data-lib-ns-next>
1773
- <svg class="icon">
1774
- <use href="#icon-chevron-right"></use>
1775
- </svg>
1776
- </button>
1777
- </div>
1778
- </div>
1779
- </div>
1780
- {% endcode %}
1781
- </div>
1782
- <hr/>
1783
- </div>
1784
- <div class="col-12" id="recaptcha">
1785
- <h1 class="ui-title uppercase text-primary mb-5">ReCaptcha</h1>
1786
- <div class="ui-text">
1787
- <p>Located in <code>src/scripts/Libraries/ReCaptcha.js</code></p>
1788
- <p></p>
1789
- <p>Uses Google's <a href="https://cloud.google.com/recaptcha-enterprise/docs/instrument-web-pages" target="_blank">recaptcha-enterprise</a></p>
1790
- <p></p>
1791
- <p>ReCaptcha can be added to various types of forms, which can be optionally distinguished with attribute <code>data-lib-recaptcha-action</code></p>
1792
- <p>Api key has to be added with <code>data-lib-recaptcha-api</code> attribute</p>
1793
- <p></p>
1794
- <p>It can be evaluated upon submitting the form, with attribute <code>data-action="submit->lib-recaptcha#submit"</code></p>
1795
- </div>
1796
- {% code "html" %}
1797
- <form data-controller="lib-recaptcha" data-lib-recaptcha-api="RECAPTCHA_KEY" data-lib-recaptcha-action="contact" data-action="submit->lib-recaptcha#submit">
1798
- <input name="gtoken" type="hidden">
1799
- <button>Send</button>
1800
- </form>
1801
- {% endcode %}
1802
- </div>
1803
- <div class="col-12 items-start" id="ripple">
1804
- <h1 class="ui-title uppercase text-primary mb-5">Ripple</h1>
1805
- <div class="ui-text">
1806
- <p>The ripple effect is automatically applied to buttons and other components</p>
1807
- <p>The effect is possible apply anywhere using the attribute <code>data-action="click->lib#ripple"</code></p>
1808
- <p>Background color can be changed with CSS property <code>--lib-ripple-bg</code></p>
1809
- <p></p>
1810
- <h3>Methods</h3>
1811
- <ul>
1812
- <li>initialization to any selector: <code>LibRipple(element)</code></li>
1813
- </ul>
1814
- <p></p>
1815
- </div>
1816
- {% code "html:mirror" %}
1817
- <div data-action="click->lib#ripple" class="cursor-pointer" style="--lib-ripple-bg: rgb(var(--color-primary))">Ripple me</div>
1818
- {% endcode %}
1819
- <hr/>
1820
- </div>
1821
- <div class="col-12" id="stimulus">
1822
- <h1 class="ui-title uppercase text-primary mb-5">Stimulus</h1>
1823
- <div class="ui-text">
1824
- <p><a href="https://stimulusjs.org/" target="_blank" rel="noopener">Stimulus</a> is used for component definition, events and other JS interaction</p>
1825
- <p>This library ensures the life of individual components and initializes them automatically when the content is redrawn</p>
1826
- <p></p>
1827
- <p>Stimulus uses three main attributes <code>data-controller</code> (component definition), <code>data-action</code> (event definition - click, change etc.), <code>data-target</code> (ref element in DOM)</p>
1828
- <p></p>
1829
- <p>Example usage of all attributes </p>
1830
- <p></p>
1831
- </div>
1832
- {% code "html" %}
1833
- <div data-controller="lib-example" data-lib-example-active-class="active" data-lib-example-text-value="0">
1834
- <button data-action="click->lib-example#show" data-action-color="red"></button>
1835
- <div data-lib-example-target="myTarget"></div>
1836
- </div>
1837
- {% endcode %}
1838
- {% code "javascript" %}
1839
- import {LibStimulus, Controller, getController} from "../Libraries/Stimulus.js";
1840
-
1841
- LibStimulus.register("lib-example", class extends Controller {
1842
- // alternative target definitions (you can also use this.queryTarget or this.queryTargetAll instead)
1843
- get target() {
1844
- return {
1845
- myTarget: this.targets.find("myTarget")
1846
- }
1847
- }
1848
-
1849
- // can be used without this type definition, but the methods this.data.get, this.data.set, this.data.has must be used and the data attribute must not have postfix -value
1850
- static get values() {
1851
- return {
1852
- text: Number
1853
- }
1854
- }
1855
-
1856
- connect() {
1857
- // starts when the controller is loaded into DOM
1858
- }
1859
-
1860
- disconnect() {
1861
- // starts when the controller is deleted from DOM, use mainly if event listeners that are outside the controller are created in connect
1862
- }
1863
-
1864
- show(e) {
1865
- // specific action to which the event can be applied
1866
- let currentTarget = e.currentTarget;
1867
-
1868
- // refer to a specific target element and add a class and color settings
1869
- this.queryTarget("myTarget").classList.add(this.getClass("active"));
1870
- this.queryTarget("myTarget").style.color = currentTarget.dataset.actionColor;
1871
-
1872
- // extract custom text defined by the controller, this always refers to the controller
1873
- if (!this.hasValue("text")) {
1874
- this.setValue("text", 1);
1875
- }
1876
-
1877
- this.queryTarget("myTarget").textContent = this.getValue("text");
1878
- this.setValue("text", 2);
1879
-
1880
- // This method can be used to communicate with another controller
1881
- getController(document.querySelector(".other_controller"), "other_controller").doSomething()
1882
- }
1883
- })
1884
- {% endcode %}
1885
- <div class="ui-text">
1886
- <p>To fully understand the functionality, we recommend studying <a href="https://stimulusjs.org/reference/controllers" target="_blank" rel="noopener">documentation</a></p>
1887
- </div>
1888
- <hr/>
1889
- </div>
1890
- <div class="col-12" id="swup">
1891
- <h1 class="ui-title uppercase text-primary mb-5">Swup</h1>
1892
- <div class="ui-text">
1893
- <p>Full-page animations are used between pages using a library <a href="https://github.com/gmrchk/swup" target="_blank" rel="noopener">Swup</a>
1894
- </p>
1895
- <p>Everything is automatic and if the JS is correctly defined via Stimulus, all JS is automatically reinitialized after site navigation</p>
1896
- <p></p>
1897
- <p>If you do not want to use Swup on a specific link, you can use the attribute <code>data-no-swup</code></p>
1898
- </div>
1899
- <hr/>
1900
- </div>
1901
- <div class="col col-12 items-start" id="tabs">
1902
- <h1 class="ui-title uppercase text-primary mb-5">Tabs</h1>
1903
- <div class="ui-text mb-5">
1904
- <p>Tabs are divided into navigation section <code>data-lib-tabs-nav</code> and content section <code>data-lib-tabs-area</code></p>
1905
- <p></p>
1906
- <p>In the navigation section, select the items that will be switched by the attribute <code>data-lib-tabs-item="nav"</code>, in the content section, we mark individual items with an attribute <code>data-lib-tabs-item="area"</code></p>
1907
- <p></p>
1908
- <p>In order to define that these are switch tabs, it is necessary to define the element by an attribute <code>data-controller="lib-tabs"</code> or you can self-initialize on any selector with method</p>
1909
- <p></p>
1910
- <h3>Methods</h3>
1911
- <ul>
1912
- <li>initialization: <code>LibTabs(element)</code></li>
1913
- </ul>
1914
- </div>
1915
- {% code "html:mirror" %}
1916
- <div data-controller="lib-tabs">
1917
- <div class="row gx-4" data-lib-tabs-nav>
1918
- <div class="col">
1919
- <button class="ui-btn" data-lib-tabs-item="nav" data-state="active">
1920
- <span>Tab 1</span>
1921
- </button>
1922
- </div>
1923
- <div class="col">
1924
- <button class="ui-btn" data-lib-tabs-item="nav">
1925
- <span>Tab 2</span>
1926
- </button>
1927
- </div>
1928
- <div class="col">
1929
- <button class="ui-btn" data-lib-tabs-item="nav">
1930
- <span>Tab 3</span>
1931
- </button>
1932
- </div>
1933
- </div>
1934
- <div class="mt-4" data-lib-tabs-area>
1935
- <div data-lib-tabs-item="area" data-state="active">
1936
- <div class="ui-text">
1937
- <p>Lorem ipsum dolor sit amet, consectetur
1938
- adipiscing elit. Donec eget efficitur metus. In bibendum nisi et dui
1939
- sagittis efficitur. Proin porttitor diam at quam finibus, quis porttitor
1940
- turpis ullamcorper. 1</p>
1941
- </div>
1942
- </div>
1943
- <div data-lib-tabs-item="area">
1944
- <div class="ui-text">
1945
- <p>Lorem ipsum dolor sit amet, consectetur
1946
- adipiscing elit. Donec eget efficitur metus. In bibendum nisi et dui
1947
- sagittis efficitur. Proin porttitor diam at quam finibus, quis porttitor
1948
- turpis ullamcorper. 2</p>
1949
- </div>
1950
- </div>
1951
- <div data-lib-tabs-item="area">
1952
- <div class="ui-text">
1953
- <p>Lorem ipsum dolor sit amet, consectetur
1954
- adipiscing elit. Donec eget efficitur metus. In bibendum nisi et dui
1955
- sagittis efficitur. Proin porttitor diam at quam finibus, quis porttitor
1956
- turpis ullamcorper. 3</p>
1957
- </div>
1958
- </div>
1959
- </div>
1960
- </div>
1961
- {% endcode %}
1962
- </div>
1963
- <div class="col col-12 items-start" id="tippy">
1964
- <h1 class="ui-title uppercase text-primary mb-5">Tippy</h1>
1965
- <div class="ui-text mb-5">
1966
- <p>For dropdowns and tooltips the <a href="https://atomiks.github.io/tippyjs/" target="_blank">Tippy.js</a> library is used</p>
1967
- <p>Tippy properties can be freely modified using attributes <a href="https://atomiks.github.io/tippyjs/v6/customization/" target="_blank">data-tippy-*</a></p>
1968
- <p>The basic properties are defined by <code>data-lib-tippy="type, template"</code></p>
1969
- <ul>
1970
- <li><code>type</code> can be <code>dropdown</code> or <code>tooltip</code> with variants <code>-arrow</code> and <code>-full</code> (full width view on your phone)</li>
1971
- <li><code>template</code> can be <code>id</code> section with html or url for <code>fetch</code> (the response must contain json with the key <code>content</code>)</li>
1972
- </ul>
1973
- <p></p>
1974
- <h3>Methods</h3>
1975
- <ul>
1976
- <li>initialization: <code>new LibTippy(element, attributes)</code></li>
1977
- </ul>
1978
- </div>
1979
- <div class="ui-text mb-5">
1980
- <p>Loading tippy template from external file</p>
1981
- </div>
1982
- {% code "html:mirror" %}
1983
- <button class="ui-btn" type="button" data-type="square" data-controller="lib-tippy" data-lib-tippy="dropdown-full, /json-tippy.json" data-lib-tippy-slot='{ "edit": "Upravit položku", "delete": "Smazat položku" }'>
1984
- <svg class="icon">
1985
- <use href="#icon-angle-down"></use>
1986
- </svg>
1987
- </button>
1988
- {% endcode %}
1989
- <div class="ui-text mb-5">
1990
- <p>Loading a tippy template from an inline template</p>
1991
- </div>
1992
- {% code "html:mirror" %}
1993
- <button class="ui-btn" type="button" data-controller="lib-tippy" data-lib-tippy="tooltip-arrow, tippy-template" data-lib-tippy-slot='{ "edit": "Upravit položku", "delete": "Smazat položku" }'>
1994
- Tooltip arrow
1995
- </button>
1996
- <template id="tippy-template">
1997
- <div class="ui-dropdown">
1998
- <ul class="wrp_ui_list flex-col row-y gy-4">
1999
- <li class="col">
2000
- <button class="ui-link">
2001
- <span>{edit}</span>
2002
- </button>
2003
- </li>
2004
- <li class="col">
2005
- <button class="ui-link">
2006
- <span>{delete}</span>
2007
- </button>
2008
- </li>
2009
- </ul>
2010
- </div>
2011
- </template>
2012
- {% endcode %}
2013
- <div class="ui-text mb-5">
2014
- <p>Classic tooltip</p>
2015
- </div>
2016
- {% code "html:mirror" %}
2017
- <button class="ui-btn" type="button" data-controller="lib-tippy" aria-label="Hello world">
2018
- Basic tooltip
2019
- </button>
2020
- {% endcode %}
2021
- </div>
2022
- </div>
2023
- <div class="row g-8 flex-wrap" style="padding-top: 3rem;">
2024
- <div class="col-12" style="padding-top: 0">
2025
- <h1 class="ui-heading">Other</h1>
2026
- </div>
2027
- <div class="col-12" id="functions">
2028
- <h1 class="ui-title uppercase text-primary mb-5">Functions</h1>
2029
- <div class="ui-text mb-5">
2030
- <p>Functions which you can use in JS </p>
2031
- <p></p>
2032
- <h3>dataValue - working with data attributes</h3>
2033
- <p><code>_addDataValue(key,value)</code> - adds value to data-key</p>
2034
- <p><code>_removeDataValue(key,value)</code> - removes value from data-key</p>
2035
- <p><code>_hasDataValue(key,value)</code> - if value exists in data-key, returns <code>true</code> or <code>false</code></p>
2036
- <p></p>
2037
- <h3>importScript</h3>
2038
- <ul>
2039
- <li>can be used to load scripts the old way into <code>window</code>with <code>importScript(url)</code> (returns promise)</li>
2040
- </ul>
2041
- <p></p>
2042
- <h3>importStyle</h3>
2043
- <ul>
2044
- <li>can be used to load styles into <code>head</code>with <code>importStyle(url)</code> (returns promise)</li>
2045
- </ul>
2046
- <h3>inView - is the conent in viewport?</h3>
2047
- <ul>
2048
- <li>can be used to call code if the content is visible in the viewport <code>inView(selector, options)</code> (returns promise)</li>
2049
- <li>options are optional and you can add same params asi in <code>IntersectionObserver</code></li>
2050
- </ul>
2051
- <p></p>
2052
- <h3>loadStymulus - dynamic load of stimulus elements</h3>
2053
- <ul>
2054
- <li>reload elements within a particular selector : <code>loadStimulus(selector)</code></li>
2055
- <li>the definition of which elements are dynamically loaded is in the array: <code>dynamicControllers</code> and <code>dynamicActions</code></li>
2056
- </ul>
2057
- </div>
2058
- <hr/>
2059
- </div>
2060
- <div class="col-12" id="build">
2061
- <h1 class="ui-title uppercase text-primary mb-5">Build</h1>
2062
- <div class="ui-text">
2063
- <p>Newlogic UI can be used with other tools, without the need to use Vituum and Newlogic Core or in a completely different environment than NodeJS</p>
2064
- <p></p>
2065
- <p>Following PostCSS plugins are used:</p>
2066
- {% code "json" %}
2067
- {
2068
- "devDependencies": {
2069
- "autoprefixer": "*",
2070
- "tailwindcss": "*",
2071
- "postcss-custom-media": "*",
2072
- "postcss-custom-selectors": "*",
2073
- "postcss-import": "*",
2074
- "postcss-nesting": "*",
2075
- }
2076
- }
2077
- {% endcode %}
2078
- <p></p>
2079
- <p>Tailwind config is located at root in <code>tailwind.config.cjs</code></p>
2080
- <p></p>
2081
- <p>The CSS framework can then be configured for use in any modern build tools such as Vite, Webpack, Parcel, etc.</p>
2082
- <p>Theoretically it is even possible to build outside the NodeJS environment in <a href="https://deno.land/manual/tools/bundler" target="_blank">Deno</a> with <a href="https://github.com/postcss/postcss-deno" target="_blank">PostCSS</a></p>
2083
- <p></p>
2084
- <p>Without use of Vituum you can't use compilation of twig templates from <code>src/templates</code></p>
2085
- </div>
2086
- <hr/>
2087
- </div>
2088
- </div>
2089
- </div>
2090
- </div>
2091
- </div>
2092
- </section>
6
+ {% include 'Ui/Docs/@styles.html' %}
7
+ {% include 'Ui/Docs/Default.twig' %}
2093
8
  {% endif %}