{"id":20214,"date":"2024-06-08T23:04:33","date_gmt":"2024-06-09T03:04:33","guid":{"rendered":"https:\/\/carleton.ca\/webservices\/?page_id=20214"},"modified":"2024-09-18T20:33:01","modified_gmt":"2024-09-19T00:33:01","slug":"raven-design-system","status":"publish","type":"page","link":"https:\/\/carleton.ca\/webservices\/raven-design-system\/","title":{"rendered":"Raven Design System"},"content":{"rendered":"\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-7xl  md:space-y-10 cu-prose-first-last\">\n\n            <div class=\"cu-textmedia flex flex-col lg:flex-row mx-auto gap-6 md:gap-10 my-6 md:my-12 first:mt-0 max-w-7xl\">\n        <div class=\"justify-start cu-textmedia-content cu-prose-first-last\" style=\"flex: 0 0 60%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h1 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem] pb-5 after:w-10 text-cu-black-700 not-prose\">\n                        Raven Design System\n                    <\/h1>\n                \n                                \n                                    \n\n\n<p>RDS, 杏吧原创 University\u2019s design system, is a living digital organism uniting campus wide teams around a common visual language.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/cuweb.github.io\/rds\">View the Library<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-light-grey is-style-light-grey--1\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/cuweb.github.io\/rds\/?path=\/docs\/get-started-changelog--docs\">RDS Changelog<\/a><\/div>\n<\/div>\n\n\n\n                            <\/header>\n\n                    <\/div>\n\n                    <div class=\"cu-textmedia-bgimg flex-1 rounded-xl bg-no-repeat bg-cover \" style=\"background-image: url(https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/2024\/06\/ravens.jpg); background-position: 100% 40%; transform: scale(1);\"><\/div>\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<p>RDS plays an important part in the university&#8217;s web brand guideline and is available to use by any member of the 杏吧原创 developer community. This initiative is fully supported by ITS and Web Services in collaboration with the Department of University Communications.<\/p>\n\n\n\n<p>RDS is currently in active development and has yet to reach it&#8217;s first full version release. More information about how the 杏吧原创 dev community can leverage it in their own work, or contribute to fixing bugs or adding functionality will be coming soon.<\/p>\n\n\n    \n<section class=\"w-screen px-6 cu-section cu-section--grey ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl bg-cu-black-50 max-w-screen-2xl mx-auto rounded-xl px-6 py-5 md:px-14 md:py-12 md:space-y-10 cu-prose-first-last\">\n\n                            \n\n\n<header class=\"mb-6 cu-pageheader cu-component-updated md:mb-12\">\n    <h2 id=\"building-blocks-of-rds\" class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative text-2xl md:text-3xl lg:text-4xl lg:leading-[3rem] pb-4 after:w-8 after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px\">\n        Building Blocks of RDS\n    <\/h2>\n\n            <p class=\"max-w-5xl font-light prose-lg md:prose-2xl\">\n            Raven Design System would not be possible without amazing tools like these.\n        <\/p>\n    <\/header>\n        \n        <div class=\"cu-column cu-component not-contained mx-auto grid max-w-5xl md:grid-cols-3 gap-6 md:gap-10\">\n            \n\n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100   \">\n    \n                        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n                \n        \n    \n    <h2 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        React\n    <\/h2>\n\n            <\/header>\n\n        \n                    <div class=\"flex flex-col px-6\">\n                <p class=\"text-base text-cu-black-700\">\n                    React lets you build user interfaces by creating and combining components into application layouts.\n                <\/p>\n            <\/div>\n        \n                                \n            <footer class=\"px-6 pt-3 mt-auto text-white md:pt-5\">\n                <a  href=\"https:\/\/react.dev\/\" class=\"cu-button cu-button--red cu-button--small\">\n                    Learn React\n                <\/a>\n            <\/footer>\n            <\/div>\n    \n\n\n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100   \">\n    \n                        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n                \n        \n    \n    <h2 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        TypeScript\n    <\/h2>\n\n            <\/header>\n\n        \n                    <div class=\"flex flex-col px-6\">\n                <p class=\"text-base text-cu-black-700\">\n                    A strongly typed language that builds on JavaScript, giving you better tooling at any scale.\n                <\/p>\n            <\/div>\n        \n                                \n            <footer class=\"px-6 pt-3 mt-auto text-white md:pt-5\">\n                <a  href=\"https:\/\/www.typescriptlang.org\/\" class=\"cu-button cu-button--red cu-button--small\">\n                    Upgrade to TS\n                <\/a>\n            <\/footer>\n            <\/div>\n    \n\n\n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100   \">\n    \n                        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n                \n        \n    \n    <h2 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        Tailwind CSS\n    <\/h2>\n\n            <\/header>\n\n        \n                    <div class=\"flex flex-col px-6\">\n                <p class=\"text-base text-cu-black-700\">\n                    A utility-first CSS framework packed with classes that can be used to build designs directly in markup.\n                <\/p>\n            <\/div>\n        \n                                \n            <footer class=\"px-6 pt-3 mt-auto text-white md:pt-5\">\n                <a  href=\"https:\/\/tailwindcss.com\/\" class=\"cu-button cu-button--red cu-button--small\">\n                    Use Tailwind\n                <\/a>\n            <\/footer>\n            <\/div>\n    \n\n\n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100   \">\n    \n                        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n                \n        \n    \n    <h2 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        Storybook JS\n    <\/h2>\n\n            <\/header>\n\n        \n                    <div class=\"flex flex-col px-6\">\n                <p class=\"text-base text-cu-black-700\">\n                    Storybook is a frontend workshop for building UI components and pages in isolation.\n                <\/p>\n            <\/div>\n        \n                                \n            <footer class=\"px-6 pt-3 mt-auto text-white md:pt-5\">\n                <a  href=\"https:\/\/storybook.js.org\/\" class=\"cu-button cu-button--red cu-button--small\">\n                    Build Your UI\n                <\/a>\n            <\/footer>\n            <\/div>\n    \n\n\n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100   \">\n    \n                        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n                \n        \n    \n    <h2 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        Formik\n    <\/h2>\n\n            <\/header>\n\n        \n                    <div class=\"flex flex-col px-6\">\n                <p class=\"text-base text-cu-black-700\">\n                    Formik provides solutions for input validation, formatting, masking, arrays, and error handling.\n                <\/p>\n            <\/div>\n        \n                                \n            <footer class=\"px-6 pt-3 mt-auto text-white md:pt-5\">\n                <a  href=\"https:\/\/formik.org\/\" class=\"cu-button cu-button--red cu-button--small\">\n                    Explore Formik\n                <\/a>\n            <\/footer>\n            <\/div>\n    \n\n\n<div class=\"not-prose cu-card rounded-lg @container md:max-w-xl flex flex-col gap-3 bg-white shadow-lg shadow-cu-black-100   \">\n    \n                        <header class=\"flex flex-col gap-3  px-6 first:mt-6\">\n                \n        \n    \n    <h2 class=\"line-clamp-3 text-lg font-semibold text-cu-black @sm:md:text-xl leading-6 @sm:md:leading-8\">\n        Vite\n    <\/h2>\n\n            <\/header>\n\n        \n                    <div class=\"flex flex-col px-6\">\n                <p class=\"text-base text-cu-black-700\">\n                    Vite is a build tooling that significantly improves the frontend development experience.\n                <\/p>\n            <\/div>\n        \n                                \n            <footer class=\"px-6 pt-3 mt-auto text-white md:pt-5\">\n                <a  href=\"https:\/\/vitejs.dev\/\" class=\"cu-button cu-button--red cu-button--small\">\n                    Build with Vite\n                <\/a>\n            <\/footer>\n            <\/div>\n    \n\n        <\/div>\n\n        \n    <\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>RDS plays an important part in the university&#8217;s web brand guideline and is available to use by any member of the 杏吧原创 developer community. This initiative is fully supported by ITS and Web Services in collaboration with the Department of University Communications. RDS is currently in active development and has yet to reach it&#8217;s first [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_cu_dining_location_slug":"","footnotes":"","_links_to":"","_links_to_target":""},"cu_page_type":[370],"class_list":["post-20214","page","type-page","status-publish","hentry","cu_page_type-projects"],"acf":{"cu_post_thumbnail":false},"_links":{"self":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/pages\/20214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/comments?post=20214"}],"version-history":[{"count":6,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/pages\/20214\/revisions"}],"predecessor-version":[{"id":21370,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/pages\/20214\/revisions\/21370"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/media?parent=20214"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/cu_page_type?post=20214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}