From 315d5d20ff5e6460a4086ea147939a7167a3e448 Mon Sep 17 00:00:00 2001 From: srgeneroso <5541794+SrGeneroso@users.noreply.github.com> Date: Thu, 6 Mar 2025 19:58:01 +0100 Subject: [PATCH 1/4] Add open-props topic --- 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 Date: Sat, 15 Mar 2025 15:56:18 +0100 Subject: [PATCH 2/4] Fixes redundant alias and removes opinionated description. --- topics/open-props/index.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/topics/open-props/index.md b/topics/open-props/index.md index 3ab4835f31a..28d32a07e62 100644 --- a/topics/open-props/index.md +++ b/topics/open-props/index.md @@ -1,5 +1,5 @@ --- -aliases: open-props, openprops, open props +aliases: openprops, open props created_by: Adam Argyle display_name: Open Props github_url: https://github.com/argyleink/open-props @@ -18,6 +18,4 @@ items: 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 +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... \ No newline at end of file From d2cf96f6eb6e1df7c479ba3d6f9963eeba1dda77 Mon Sep 17 00:00:00 2001 From: srgeneroso <5541794+SrGeneroso@users.noreply.github.com> Date: Fri, 21 Mar 2025 01:01:12 +0100 Subject: [PATCH 3/4] Removed Items from YAML in topic and added youtube embed --- topics/open-props/index.md | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/topics/open-props/index.md b/topics/open-props/index.md index 28d32a07e62..f09ccd2a229 100644 --- a/topics/open-props/index.md +++ b/topics/open-props/index.md @@ -9,13 +9,17 @@ short_description: CSS custom properties to help accelerate adaptive and consist 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... \ No newline at end of file +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... + +**Overview** + +[//youtube-embed-unfurl//]: # (hW-itQMKyiU) + +**Watch it in action** + +[//youtube-embed-unfurl//]: # (9VXR_qRgROE) \ No newline at end of file From a2943b71e2656afb58d2e3a98bdc8f315f381c85 Mon Sep 17 00:00:00 2001 From: srgeneroso <5541794+SrGeneroso@users.noreply.github.com> Date: Tue, 25 Mar 2025 21:52:23 +0100 Subject: [PATCH 4/4] Update topics/open-props/index.md lgtm Co-authored-by: Eric Sorenson Signed-off-by: srgeneroso <5541794+SrGeneroso@users.noreply.github.com> --- topics/open-props/index.md | 8 -------- 1 file changed, 8 deletions(-) diff --git a/topics/open-props/index.md b/topics/open-props/index.md index f09ccd2a229..000f333910c 100644 --- a/topics/open-props/index.md +++ b/topics/open-props/index.md @@ -15,11 +15,3 @@ related: tailwind, css-framework, css-layout, css-reset, responsive-design, medi 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... - -**Overview** - -[//youtube-embed-unfurl//]: # (hW-itQMKyiU) - -**Watch it in action** - -[//youtube-embed-unfurl//]: # (9VXR_qRgROE) \ No newline at end of file