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 --- 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 00000000000..1944d856c86 Binary files /dev/null and b/topics/open-props/open-props.png differ