From 455dd2096a15a60c5a3646cd4e61cf502d6db739 Mon Sep 17 00:00:00 2001 From: srgeneroso <5541794+SrGeneroso@users.noreply.github.com> Date: Thu, 6 Mar 2025 15:46:36 +0100 Subject: [PATCH 1/2] Add Open Props to design-essentials collection --- collections/design-essentials/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/collections/design-essentials/index.md b/collections/design-essentials/index.md index ea9ecebf304..c190f9980fa 100644 --- a/collections/design-essentials/index.md +++ b/collections/design-essentials/index.md @@ -21,6 +21,7 @@ items: - tabler/tabler-icons - saadeghi/daisyui - responsively-org/responsively-app + - argyleink/open-props display_name: Design essentials created_by: jonrohan --- From 15c55838bc7c626221bb157e5d6c804dbf2f0962 Mon Sep 17 00:00:00 2001 From: srgeneroso <5541794+SrGeneroso@users.noreply.github.com> Date: Thu, 6 Mar 2025 15:50:25 +0100 Subject: [PATCH 2/2] Added new topic open-props --- topics/open-props/index.md | 23 +++++++++++++++++++++++ topics/open-props/open-props.png | Bin 0 -> 11039 bytes 2 files changed, 23 insertions(+) create mode 100644 topics/open-props/index.md create mode 100644 topics/open-props/open-props.png diff --git a/topics/open-props/index.md b/topics/open-props/index.md new file mode 100644 index 00000000000..3ab4835f31a --- /dev/null +++ b/topics/open-props/index.md @@ -0,0 +1,23 @@ +--- +aliases: open-props, openprops, open props +created_by: Adam Argyle +display_name: Open Props +github_url: https://github.com/argyleink/open-props +logo: open-props.png +released: November 30, 2021 +short_description: CSS custom properties to help accelerate adaptive and consistent design. +topic: open-props +url: https://open-props.style/ +related: tailwind, css-framework, css-layout, css-reset, responsive-design, media-queries +items: + - https://www.youtube.com/watch?v=9VXR_qRgROE + - https://www.youtube.com/watch?v=szPNMKZazzQ + - https://www.youtube.com/watch?v=hW-itQMKyiU +--- +**Open Props** is a comprehensive design system of custom variables created by Adam Argyle that offers expertly crafted web design tokens for animations, borders, colors, shadows, and many more design elements that easily works in any project helping in the creation of beautiful and consistent UI. + +It is compatible with tailwind and any frontend framework, is customizable, with predictable name conventions and provides a great and harmonious developer experience. Quite easy to integrate and incrementally adoptable, very much worth to check it out for quick prototyping and full fledge projects. + +Also features options to import it from CDN, NPM or CLI, works with CSS-In-JS, CSS modules, PostCSS-JIT-Props, can be loaded from JS, has a very thoughtful normalize script with options to light/dark theming, has VScode and Sublime autocomplete... + +Have I mentioned that is very easy to learn and the docs are so amazing that you wish your site just could look like that? It can with Open Props. 😘 \ No newline at end of file diff --git a/topics/open-props/open-props.png b/topics/open-props/open-props.png new file mode 100644 index 0000000000000000000000000000000000000000..1944d856c86dd27edae747bc0c20aedba798d627 GIT binary patch literal 11039 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 Z000000002eQ