[{"id":351,"date":"2024-07-29T14:16:19","date_gmt":"2024-07-29T14:16:19","guid":{"rendered":"https:\/\/blogs.vcu.edu\/compass\/?p=351"},"modified":"2024-07-30T15:44:44","modified_gmt":"2024-07-30T15:44:44","slug":"compass-1-8-0","status":"publish","type":"post","link":"https:\/\/blogs.vcu.edu\/compass\/2024\/07\/29\/compass-1-8-0\/","title":{"rendered":"Compass 1.8.0"},"content":{"rendered":"\n<p>The latest version of Compass comes with all new colors and other minor visual changes to follow the new <a href=\"https:\/\/brand.vcu.edu\/\" data-type=\"link\" data-id=\"https:\/\/brand.vcu.edu\/\">VCU brand guidelines<\/a>. These changes will roll out <strong>the last week of July\/first week of August 2024<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Colors &amp; accents<\/h2>\n\n\n\n<p>Compass will soon ship with a set of new colors directly pulled from the new <a href=\"https:\/\/brand.vcu.edu\/\" data-type=\"link\" data-id=\"https:\/\/brand.vcu.edu\/\">VCU brand guidelines<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"468\" src=\"https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-color-palette-1024x468.jpg\" alt=\"Compass v1.8.0 offers 4 primary colors (gold, black, gray, and white) and 4 accent colors (rust, plum, blue, and forest)\" class=\"wp-image-352\" srcset=\"https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-color-palette-1024x468.jpg 1024w, https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-color-palette-300x137.jpg 300w, https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-color-palette-768x351.jpg 768w, https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-color-palette.jpg 1098w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Here&#8217;s some important things to keep in mind:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>All new colors are globally available via new &#8211;vcu- prefixed CSS custom properties. They are also mapped to the old CSS custom properties for better compatibility.<\/li>\n\n\n\n<li><strong>Gold<\/strong> has a slightly different hex value than before. It is now <code>#ffb300<\/code> instead of <code>#f8b300<\/code>.<\/li>\n\n\n\n<li>The only accent color that is unchanged is <strong>blue<\/strong>.<\/li>\n\n\n\n<li><strong>Rust<\/strong> is the new, default accent background color (it was previously <strong>blue<\/strong>).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Distribution<\/h3>\n\n\n\n<p>In addition to new colors, the new&nbsp;<strong><a href=\"https:\/\/brand.vcu.edu\/\" target=\"_blank\" rel=\"noreferrer noopener\">VCU brand guidelines<\/a><\/strong>&nbsp;also influence how these colors are used throughout a web page.&nbsp;<strong>Brand colors of black and gold with neutrals of white and grey should be dominant.Accent colors should be used for emphasis only, and take up around 10% of a page<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"432\" src=\"https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-color-distribution-1024x432.jpg\" alt=\"A VCU brand color distribution chart: Gold and black should be used than gray, white, or the accent colors, and gray and white should be used more than the accent colors\" class=\"wp-image-353\" srcset=\"https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-color-distribution-1024x432.jpg 1024w, https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-color-distribution-300x127.jpg 300w, https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-color-distribution-768x324.jpg 768w, https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-color-distribution.jpg 1098w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Changes<\/h2>\n\n\n\n<p>With these new colors and how they&#8217;re distributed in mind, Compass needed to rework how components are styled and where\/how users can configure a custom accent color to better follow the new brand.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Header &amp; navigation<\/h3>\n\n\n\n<p>The header quick links (when viewed in modal or mobile mode) and the light variation of main\/sub navigation components no longer use the configured accent background color. They use gold\/black instead.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"374\" height=\"424\" src=\"https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-light-sub-nav.jpg\" alt=\"A Compass light sub navigation showcasing new gold\/black colors\" class=\"wp-image-355\" srcset=\"https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-light-sub-nav.jpg 374w, https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-light-sub-nav-265x300.jpg 265w\" sizes=\"auto, (max-width: 374px) 100vw, 374px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"904\" height=\"340\" src=\"https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-header-quick-links-modal.jpg\" alt=\"A Compass header's quick links, shown in modal view, showcasing new gold\/black colors\" class=\"wp-image-354\" srcset=\"https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-header-quick-links-modal.jpg 904w, https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-header-quick-links-modal-300x113.jpg 300w, https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-header-quick-links-modal-768x289.jpg 768w\" sizes=\"auto, (max-width: 904px) 100vw, 904px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Breadcrumbs<\/h3>\n\n\n\n<p>The breadcrumbs component now leverages the accent background color for its links, except for its &#8220;More&#8221; menu, which uses gold\/black.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"454\" height=\"195\" src=\"https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-breadcrumb-with-dropdown.jpg\" alt=\"A Compass breadcrumb component with rust-colored links and a gold\/black dropdown menu\" class=\"wp-image-356\" srcset=\"https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-breadcrumb-with-dropdown.jpg 454w, https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-breadcrumb-with-dropdown-300x129.jpg 300w\" sizes=\"auto, (max-width: 454px) 100vw, 454px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Links<\/h3>\n\n\n\n<p>Links now use the configured accent background color! This means that by default, Compass will ship with rust colored links.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"189\" src=\"https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-links-1024x189.jpg\" alt=\"\" class=\"wp-image-357\" srcset=\"https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-links-1024x189.jpg 1024w, https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-links-300x55.jpg 300w, https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-links-768x142.jpg 768w, https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-links.jpg 1095w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Markers, buttons, &amp; blockquotes<\/h3>\n\n\n\n<p>Markers (along with the left double quote of blockquotes) now use a new flag\/bookmark shape instead of the old angled shape. Buttons now use a gold background with black text instead of a blue background with white text. Blockquotes have been altered to use the configured accent background color for the left double quote embellishment and attribution (it no longer uses it for the top\/bottom borders).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"874\" src=\"https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-marker-button-blockquote-1024x874.jpg\" alt=\"A mockup of Compass content, including a header with a marker, a gold\/black button, and a redesigned blockquote\" class=\"wp-image-358\" srcset=\"https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-marker-button-blockquote-1024x874.jpg 1024w, https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-marker-button-blockquote-300x256.jpg 300w, https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-marker-button-blockquote-768x655.jpg 768w, https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-marker-button-blockquote.jpg 1116w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Cards<\/h3>\n\n\n\n<p>Cards have many new styling options available! Not only can you now use a gold (automatically used if used in the sidebar area) and black themes to change things up. The biggest change is that accent cards are no longer a theme, but a modifier that can be used with any other theme to add a strip of color to the top of a card for extra emphasis.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"957\" src=\"https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-cards.jpg\" alt=\"An example of default, gray, black, gold, and accented Compass card components\" class=\"wp-image-359\" srcset=\"https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-cards.jpg 760w, https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2024\/07\/compass-180-cards-238x300.jpg 238w\" sizes=\"auto, (max-width: 760px) 100vw, 760px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Footer<\/h3>\n\n\n\n<p>The footer no longer offers a light variant, creating more consistency across websites using Compass and with the new <a href=\"https:\/\/brand.vcu.edu\/\">VCU brand guidelines<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to get help for your Compass website<\/h2>\n\n\n\n<p>This update may introduce some issues, especially if your site is highly customized. Additionally, the new university brand may require some changes. That&#8217;s why the Compass team is available to help!<\/p>\n\n\n\n<p><strong>Web consultation with Technology Services<\/strong>: Not sure how to update your website? Technology Services offers bi-weekly open consultations for helping with websites that use the university\u2019s CMS (Terminalfour) and the Compass Web Framework.&nbsp;<a href=\"https:\/\/go.vcu.edu\/wsconsult\" data-type=\"link\" data-id=\"https:\/\/go.vcu.edu\/wsconsult\">Join a Web Services consultation<\/a>.<\/p>\n\n\n\n<p><strong>Brand consultation with Enterprise Marketing &amp; Communication:&nbsp;<\/strong>Reach out to&nbsp;<a href=\"mailto:identity@vcu.edu\">identity@vcu.edu<\/a>&nbsp;with any brand-related questions.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The latest version of Compass comes with all new colors and other minor visual changes to follow the new VCU brand guidelines. These changes will roll out the last week of July\/first week of August 2024. Colors &amp; accents Compass will soon ship with a set of new colors directly pulled from the new VCU [&hellip;]<\/p>\n","protected":false},"author":837,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-351","post","type-post","status-publish","format-standard","hentry","category-releases"],"_links":{"self":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts\/351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/users\/837"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/comments?post=351"}],"version-history":[{"count":0,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts\/351\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/media?parent=351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/categories?post=351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/tags?post=351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":346,"date":"2024-06-21T13:23:00","date_gmt":"2024-06-21T13:23:00","guid":{"rendered":"https:\/\/blogs.vcu.edu\/compass\/?p=346"},"modified":"2024-06-21T17:25:55","modified_gmt":"2024-06-21T17:25:55","slug":"brand-changes-coming-to-compass","status":"publish","type":"post","link":"https:\/\/blogs.vcu.edu\/compass\/2024\/06\/21\/brand-changes-coming-to-compass\/","title":{"rendered":"Brand changes coming to Compass"},"content":{"rendered":"\n<p>Last year, Enterprise Marketing and Communications rolled out <a href=\"https:\/\/annualreports.vcu.edu\/new-branding\/\">the UNCOMMON brand platform<\/a>. This platform changed VCU\u2019s overall visual identity in order to create a more robust and flexible system for use across the entire enterprise.&nbsp;<\/p>\n\n\n\n<p>With this rollout, <strong>VCU websites require updates to align with the new brand standards.<\/strong><\/p>\n\n\n\n<p>VCU\u2019s Compass Web Framework team has been diligently implementing updates and has established a schedule that ensures brand compliance.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>What is changing?<\/strong><\/h3>\n\n\n\n<p>To align with the UNCOMMON brand platform, we will be updating the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Compass Web Framework: <\/strong>A new release, Compass v1.8.0, will include <strong>color updates.<\/strong><\/li>\n\n\n\n<li><strong>VCU brand bar:<\/strong> The VCU brand bar will feature a <strong>revised design and updated color options.<\/strong><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>What is the timeline for changes?<\/strong><\/h3>\n\n\n\n<p>Timeline: <strong>July through mid-August, 2024<\/strong><strong><br><\/strong><strong><br><\/strong>The updates will follow a phased approach from July to mid-August 2024, allowing us to effectively manage the changes and their impact on VCU websites using Compass and Terminalfour. This timeline provides a transition phase for web managers to address any issues that may arise.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>June 26:<\/strong> EMC will launch a new VCU Brand standards website to brand.vcu.edu.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Week of June 25th <\/strong>&#8211; VCU brand bar update<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>July to August<\/strong>\n<ul class=\"wp-block-list\">\n<li>Release Compass v1.8<\/li>\n\n\n\n<li>Integration of Compass v1.8 release changes in Terminalfour<\/li>\n\n\n\n<li>Update of Compass-specific content types in Terminalfour<\/li>\n\n\n\n<li>Update of the Plugin library (including content types such as Brand Bar, Cards, Tabs, etc.)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>How will the change impact my website?<\/strong><\/h3>\n\n\n\n<p>This change will impact your site in the following ways:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Required update to VCU\u2019s approved brand colors.<\/li>\n\n\n\n<li>Revised VCU brand bar design.<\/li>\n<\/ul>\n\n\n\n<p>For those using the Compass Web Framework in Terminalfour:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The color palette will be updated in the global stylesheet (CSS).<\/li>\n\n\n\n<li>The default accent color will be reset to a new default color.<\/li>\n\n\n\n<li>The brand bar will be updated.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Will I have to manually update my website?<\/strong><\/h3>\n\n\n\n<p>Whether you need to manually update your website depends on the extent of your customizations.<br><br><strong>What is a customization?<\/strong> A customization is additional code or visual graphics that has been added beyond what Compass provides as a default.<\/p>\n\n\n\n<p><strong>Website without customizations: <\/strong>If you are using the default Compass Web Framework assets without any customizations to colors and visual styles, manual updates are unlikely to be necessary.<\/p>\n\n\n\n<p><strong>Websites WITH customizations:<\/strong> If your website includes custom CSS or other customized elements, you will need to review and update these to align with the new brand standards. This may involve manually updating any custom code that introduces non-compliant colors.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>When does my website need to be compliant?<\/strong><\/h3>\n\n\n\n<p>Websites must be fully compliant with the new brand standards by <strong>August 1, 2024.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Where can I get assistance for help with my website?<\/strong><\/h3>\n\n\n\n<p><strong>Get help with an existing website<\/strong>: Not sure how to update your website? Technology Services offers bi-weekly open consultations for helping with websites that use the university\u2019s CMS (Terminalfour) and the Compass Web Framework. <a href=\"https:\/\/ts.vcu.edu\/askit\/web-tools\/web-publishing\/\">Join a Web Services consultation<\/a>.<\/p>\n\n\n\n<p><strong>Branding consultation: <\/strong>Reach out to <a href=\"mailto:identity@vcu.edu\">identity@vcu.edu<\/a> with any brand-related questions.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last year, Enterprise Marketing and Communications rolled out the UNCOMMON brand platform. This platform changed VCU\u2019s overall visual identity in order to create a more robust and flexible system for use across the entire enterprise.&nbsp; With this rollout, VCU websites require updates to align with the new brand standards. VCU\u2019s Compass Web Framework team has [&hellip;]<\/p>\n","protected":false},"author":811,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-346","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts\/346","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/users\/811"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/comments?post=346"}],"version-history":[{"count":0,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts\/346\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/media?parent=346"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/categories?post=346"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/tags?post=346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":322,"date":"2022-04-29T16:51:14","date_gmt":"2022-04-29T16:51:14","guid":{"rendered":"https:\/\/blogs.vcu.edu\/compass\/?p=322"},"modified":"2022-04-29T16:51:18","modified_gmt":"2022-04-29T16:51:18","slug":"compass-1-7-0","status":"publish","type":"post","link":"https:\/\/blogs.vcu.edu\/compass\/2022\/04\/29\/compass-1-7-0\/","title":{"rendered":"Compass 1.7.0"},"content":{"rendered":"\n<p>The latest version of Compass comes with visual enhancements, bug fixes, UX improvements, and the newest set of Font Awesome icons. These changes will be rolled out <strong>the first week of May 2022<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Components<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Accordion<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Drop-shadows were removed in favor of solid borders for better visual coherence with the rest of the framework.<\/li><li>The chevron icon SVG (used in the panel headers) has been upgraded to <a href=\"https:\/\/fontawesome.com\/\" data-type=\"URL\" data-id=\"https:\/\/fontawesome.com\/\">Font Awesome<\/a> v6.1.1.<strong><sup>1<\/sup><\/strong><\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"906\" height=\"524\" src=\"https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2022\/04\/2022-04-26_09-45.png\" alt=\"A new, grouped, v1.7.0 Compass accordion component without drop shadows.\" class=\"wp-image-323\"\/><figcaption>A new, grouped, v1.7.0 Compass accordion component without drop shadows<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Breadcrumb<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Multiple instances of the breadcrumb component now support keyboard\/interaction functionality.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Modal<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Linking between modals now works as expected.<\/li><li>The times icon SVG (used in the close buttons) has been upgraded to <a href=\"https:\/\/fontawesome.com\/\" data-type=\"URL\" data-id=\"https:\/\/fontawesome.com\/\">Font Awesome<\/a> v6.1.1.<strong><sup>1<\/sup><\/strong><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Nav<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Vertically scrolling navigation lists now use a custom <code><strong>.cwf-nav__list--scroll<\/strong><\/code> class instead of utilizing the built-in vertical scrolling utility class.<\/li><li>Improved accessibility by providing more context to screen readers when interacting with nav toggles.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Notification<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>The times icon SVG (used in the close buttons) has been upgraded to <a href=\"https:\/\/fontawesome.com\/\" data-type=\"URL\" data-id=\"https:\/\/fontawesome.com\/\">Font Awesome<\/a> v6.1.1.<strong><sup>1<\/sup><\/strong><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Footer<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>The direct edit link is now optional in the component for non-T4 websites.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1260\" height=\"463\" src=\"https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2022\/04\/2022-04-26_09-50.png\" alt=\"A v1.7.0 Compass footer component without the T4 direct edit link.\" class=\"wp-image-325\"\/><figcaption>The v1.7.0 Compass footer component without the T4 direct edit link<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Tabs<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Panels now have a <strong><code>max-width<\/code><\/strong> set by <strong><code>--cwf-tabs__panel--max-width<\/code><\/strong> when visible to prevent them from overflowing outside the main content area.<\/li><li>Tabs panels will no longer increase their <strong><code>z-index<\/code><\/strong> when focused to prevent odd rendering behavior.<\/li><li>Fixed a regression where linking to a tab panel wouldn\u2019t automatically open it.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Terminalfour<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Plugin updates only on T41<\/h3>\n\n\n\n<p>Per the WUG communication sent back in January by the Platform Services team, only <a href=\"https:\/\/t4.vcu.edu\/\" data-type=\"URL\" data-id=\"https:\/\/t4.vcu.edu\/\">T41<\/a> will receive feature updates moving forward. For the release of Compass v1.7.0, this includes the \u201cAccordion Panel\u201d, \u201cModal\u201d, \u201cNotification\u201d, and \u201cTab Panel\u201d plugins.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Plugin &#8220;Injectors&#8221; fields<\/h3>\n\n\n\n<p>Moving away from \u201cName\u201d field injectors\/keywords towards a dedicated \u201cInjectors\u201d field within the plugin system has been a long-term project for Platform Services. You may have noticed that all of the Compass content types and newer plugins only support an \u201cInjectors\u201d field. For the release of Compass v1.7.0, the \u201cAccordion Panel\u201d and \u201cModal\u201d plugins will receive a new \u201cInjectors\u201d field. \u201cName\u201d field injectors\/keywords will still work, but injectors from the \u201cInjectors\u201d field will take precedence over them when used. We advise everyone to begin switching your injectors over to the new, dedicated field when possible.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1044\" height=\"1001\" src=\"https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2022\/04\/2022-04-26_09-55.png\" alt=\"A development version of the accordion panel plugin in T4 with a dedicated injectors field\" class=\"wp-image-326\"\/><figcaption>A development version of the accordion panel plugin in T4 with a dedicated injectors field<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Upcoming<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Button variations<\/h3>\n\n\n\n<p>We\u2019re researching and prototyping new button variations. These will come in handy to better create visual\/interaction hierarchies on web pages.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Carousel<\/h3>\n\n\n\n<p>We\u2019ve continued to work on the upcoming carousel component, with more rounds of design\/UX refinement. We hope to deliver a polished component to users within the next release.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Template engine<\/h3>\n\n\n\n<p>We\u2019ve begun researching\/working on a replacement to the Twig template engine, as the Node.js implementation of Twig isn\u2019t well maintained. Switching to something more modern will allow us to use HTML logic in more places and implementations.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Developer<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Changes<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>The recommended LTS version of Node.js has been bumped to v16.13.2 (Gallium).<\/li><li>The recommended version of NPM has been bumped to v.8.3.0.<\/li><li>All dependencies have been updated to their latest versions.<\/li><li>Faker.js has been replaced by the community package.<\/li><li>The <strong><code>gulpfile.js<\/code><\/strong> file has been updated to simplify and reorganize the build system for improved maintainability.<\/li><li>Package tree shaking has been improved:<ul><li>Module bundles, such as <strong><code>components\/index.js<\/code><\/strong>, have been updated to only export child modules as-is. In this example, while you can no longer get an array of all component classes via <strong><code>import { components } from \u2018cwf\/components\/index.js\u2019;<\/code><\/strong>, you can get an object of all component classes via <strong><code>import * as components from \u2018cwf\/components\/index.js\u2019;<\/code><\/strong>.<\/li><li>The root JS and SCSS files have been updated to only export the entire framework, not act as prebuilt, site-ready code; For that, you can pull from the <strong><code>dist<\/code><\/strong> directory instead.<\/li><li>Prebuilt CSS and CommonJS can now be found in the <strong><code>dist<\/code><\/strong> directory to better distinguish them from their source code counterparts.<\/li><li>JS modules no longer have a default export; Named exports must be used.<\/li><\/ul><\/li><li><a href=\"https:\/\/fontawesome.com\/\" data-type=\"URL\" data-id=\"https:\/\/fontawesome.com\/\">Font Awesome<\/a> was updated to v6.1.1.<strong><sup>1<\/sup><\/strong><\/li><li>The <strong><code>print<\/code><\/strong> mixin within the <strong><code>shared\/media<\/code><\/strong> SCSS module now works as expected.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1257\" height=\"557\" src=\"https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2022\/04\/2022-04-26_10-05.png\" alt=\"An example of v6.X Font Awesome icons now used in Compass v1.7.0\" class=\"wp-image-327\"\/><figcaption>An example of v6.X Font Awesome icons now used in Compass v1.7.0<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">New<\/h3>\n\n\n\n<p>All reset, utility, and component JS is now provided as prebuilt CommonJS under the <strong><code>dist<\/code><\/strong> directory for projects not using ESM in Node.js.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The latest version of Compass comes with visual enhancements, bug fixes, UX improvements, and the newest set of Font Awesome icons. These changes will be rolled out the first week of May 2022. Components Accordion Drop-shadows were removed in favor of solid borders for better visual coherence with the rest of the framework. The chevron [&hellip;]<\/p>\n","protected":false},"author":837,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,9],"tags":[33,12,19,34,36,16,35,18,10,11,38,20,17,39,37],"class_list":["post-322","post","type-post","status-publish","format-standard","hentry","category-plugin-updates","category-releases","tag-1-7-0","tag-accordion","tag-accordion-panel","tag-breadcrumb","tag-footer","tag-modal","tag-nav","tag-notification","tag-plugin","tag-plugins","tag-t4","tag-tab-panel","tag-tabs","tag-terminalfour","tag-v1-7-0"],"_links":{"self":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts\/322","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/users\/837"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/comments?post=322"}],"version-history":[{"count":0,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts\/322\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/media?parent=322"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/categories?post=322"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/tags?post=322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":310,"date":"2022-02-02T17:37:20","date_gmt":"2022-02-02T17:37:20","guid":{"rendered":"https:\/\/blogs.vcu.edu\/compass\/?p=310"},"modified":"2022-04-26T14:13:42","modified_gmt":"2022-04-26T14:13:42","slug":"compass-1-6-0","status":"publish","type":"post","link":"https:\/\/blogs.vcu.edu\/compass\/2022\/02\/02\/compass-1-6-0\/","title":{"rendered":"Compass 1.6.0"},"content":{"rendered":"\n<p>The Compass web framework is now available in version 1.6.0. <\/p>\n\n\n\n<p>This version was <strong>released the week of Jan.10th, 2022<\/strong>. Since this past release cycle had a short duration (due to VCU winter break), we focused on enhancements, debugging and minor updates.<\/p>\n\n\n\n<p><strong>Recent updates <\/strong>listed below:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Utilities<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Marker<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Paragraphs and selections with the marker class and a heading class now render as expected.<\/li><li>All marker utility selectors have been simplified to be more readable and maintainable.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Components<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Footer<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>The footer can now handle phone-numbers with alphabetical characters and country codes for the phone\/fax fields.<strong><sup>1<\/sup><\/strong><\/li><li>The \u201cView Text Version\u201d standards link has been removed.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Header<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>The search modal on mobile will now appear correctly when no quick-links are present.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Developer<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Changes<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>The recommended LTS version of Node.js has been bumped to v16.13.0 (Gallium).<\/li><li>The recommended version of NPM has been bumped to v.8.1.2.<\/li><li>All dependencies have been updated to a newer version.<\/li><li>SASS modules providing maps now explicitly use string keys per the <a href=\"https:\/\/sass-lang.com\/documentation\/values\/maps\">recommendations of the SASS team<\/a>.<\/li><li>The shared SCSS style module has been updated to improve the <strong>style.darken(&#8230;)<\/strong> and <strong>style.lighten(&#8230;)<\/strong> functions to take primary color keywords in addition to regular color values.<\/li><li>The shared SCSS style module has a new <strong>style.opacity(&#8230;)<\/strong> function that bootstraps the native <strong>rgba(&#8230;)<\/strong> CSS function and allows for primary color keywords and proper percentages.<\/li><li>Error and warning handling in SCSS modules has been improved to provide better, more contextual feedback.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">New<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>The published package of Compass core, <strong>cwf<\/strong>, is now of type <strong>module<\/strong>. This means <strong>import\/export<\/strong> (ESM) is used for Node.js functionality instead of <strong>require\/module.exports<\/strong> (CommonJS), dropping the need to transpile anything during runtime.<\/li><li>CommonJS versions of shared JS modules are packaged to ensure compatibility.<\/li><li>The <strong>marked<\/strong> and <strong>faker<\/strong> packages are listed as dependencies instead of development dependencies, meaning they\u2019re installed alongside the <strong>cwf<\/strong> package.<\/li><li>CSS versions of component, reset, and utility SCSS are packaged to ensure flexibility.<\/li><li>A new <strong>phone(string)<\/strong> function has been added to the shared transform JS module; This now parses phone-numbers with alphabetical characters and country codes for use within link HREFs.<strong><sup>1<\/sup><\/strong><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Terminalfour<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Page Layout<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>The page layout will now indicate a full-text page in the page title, navigation, and breadcrumb. This will use whatever field is set to generate the full-text filename (which is the \u201cName\u201d field by default).<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The Compass web framework is now available in version 1.6.0. This version was released the week of Jan.10th, 2022. Since this past release cycle had a short duration (due to VCU winter break), we focused on enhancements, debugging and minor updates. Recent updates listed below: Utilities Marker Paragraphs and selections with the marker class and [&hellip;]<\/p>\n","protected":false},"author":811,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[32,36,42,41,38,39],"class_list":["post-310","post","type-post","status-publish","format-standard","hentry","category-releases","tag-1-6-0","tag-footer","tag-header","tag-marker","tag-t4","tag-terminalfour"],"_links":{"self":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts\/310","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/users\/811"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/comments?post=310"}],"version-history":[{"count":0,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts\/310\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/media?parent=310"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/categories?post=310"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/tags?post=310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":303,"date":"2021-10-25T15:14:11","date_gmt":"2021-10-25T15:14:11","guid":{"rendered":"https:\/\/blogs.vcu.edu\/compass\/?p=303"},"modified":"2022-04-26T14:14:16","modified_gmt":"2022-04-26T14:14:16","slug":"compass-1-5-0-enhancements-and-progress","status":"publish","type":"post","link":"https:\/\/blogs.vcu.edu\/compass\/2021\/10\/25\/compass-1-5-0-enhancements-and-progress\/","title":{"rendered":"Compass 1.5.0: Enhancements"},"content":{"rendered":"\n<p class=\"has-medium-font-size\">The October 2021 release of the Compass web framework introduces numerous enhancements to improve existing elements. <\/p>\n\n\n\n<p class=\"has-normal-font-size\">This release cycle also included <strong>\u2018work in progress\u2019 on a new Carousel component<\/strong> that is intended for a future release.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>A reminder about the Patterns section<\/strong><\/h2>\n\n\n\n<p>Patterns are examples\/guidelines on how to use multiple resets, utilities and components in tandem for a more specialized use case and to assist website developers and moderators in creating consistent, usable pages.<\/p>\n\n\n\n<p><strong>A pattern guide is available<\/strong> at the <a href=\"https:\/\/prod.compass.vcu.edu\/patterns\/\"><strong>production example site\u2019s patterns page<\/strong><\/a> until proper documentation can be provided on <a href=\"https:\/\/compass.vcu.edu\">compass.vcu.edu<\/a>. We recommend utilizing this new resource.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Resets updates<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Blockquote<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Blockquotes will use VCU gold instead of the configured accent color when used within a dark footer, hero, or non-secondary notification.<\/li><li>Blockquotes will appear simplified when used within a footer, hero, or notification.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Paragraph<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Lead paragraph styles, when using the modifier class on a wrapping element of text, now works as intended.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Utilities updates<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Marker<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>The marker utility now works on paragraphs as well selections such as spans, strong tags, and emphasis tags. This changes the text color to the global accent color (blue by default) unless used within a component where color contrast is a concern where it will display as VCU gold.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Text<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>New color and font text utilities are now included.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Component updates<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Carousel (work in progress)<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>The Compass team is hard at work coming up with a carousel solution that meets user\/developer expectations while also striving to exceed accessibility and user experience standards. More information on this new component coming soon!<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Footer<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>The footer component now has an optional fax field, which shows up after the phone number but before the email.<\/li><li>TikTok accounts linked within the social links area will now display a TikTok icon.<\/li><li>The middle column is now optional; If no middle column content is provided, the middle column won\u2019t be rendered and the dividers will be removed.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Grid<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>The page layout main column will no longer expand past its intended maximum width.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Hero<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Captions no longer have a background-color or blur effect applied when it is not displayed as floating to ensure better performance on mobile devices and make style overrides easier.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Navigation<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Fixed an issue where the nav wouldn\u2019t indicate the current page and its parent pages properly in certain circumstances.<\/li><li>Toggling the main navigation\u2019s visibility on mobile viewports now uses a more descriptive, element-level class instead of a document body class.<strong><sup>2<\/sup><\/strong><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Developer updates<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><em>Changes<\/em><\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>The recommended LTS version of Node.js has been bumped to v14.17.3.<\/li><li>The recommended version of NPM has been bumped to v7.20.0.<\/li><li>All dependencies have been updated to their latest versions.<\/li><li>All instances of SCSS divisions by slash have been converted to <strong>math.div(&#8230;)<\/strong> per the <a href=\"https:\/\/sass-lang.com\/documentation\/breaking-changes\/slash-div\">recommendations of the SASS team<\/a>.<\/li><li>Example site generation code within the core repo has been sandboxed into a <strong>site<\/strong> directory at the root.<\/li><li>JSON data, flattened route data, and FontAwesome brand icons from a given string can now be used in Twig files using the new <strong>json<\/strong>, <strong>flattenRoutes<\/strong>, and <strong>icon<\/strong> filters.<strong><sup>1<\/sup><\/strong><\/li><li>Redundant functionality paradigms within components\/resets have been consolidated into the shared, global <strong>Component<\/strong> JS class.<\/li><li>Main navigation on mobile viewports will toggle a <strong>.cwf-nav&#8211;modal<\/strong> class on the navigation element itself instead of toggling a <strong>.cwf&#8211;show-main-nav<\/strong> class on the document body to show\/hide.<strong><sup>2<\/sup><\/strong><\/li><li>All components with JS functionality can now be passed a <strong>prefix<\/strong> option, which gets prepended to all IDs\/classes defined by the component for easier integration into third-party applications or custom components.<\/li><li>Readme documentation for most resets, utilities, components, and patterns has been improved to include more information, especially T4 implementation and better examples.<\/li><li>Shared miscellaneous functions have been organized under the <strong>shared<\/strong> directory.<ul><li><strong>shared\/route.js<\/strong> &#8211; Includes the <strong>flattenRoutes<\/strong> function (now named <strong>flatten<\/strong>) as well as its functional dependencies.<\/li><li><strong>shared\/transform.js<\/strong> &#8211; Includes transformational functions previously reserved for Twig filters, such as converting markdown to HTML and generating icon classes from a string.<\/li><\/ul><\/li><li>The shared <strong>style.angle(&#8230;)<\/strong> SCSS mixin now supports specifying the side of the element the angle appears as an argument. This argument is <strong>&#8220;right&#8221;<\/strong> by default, but can be set to <strong>&#8220;left&#8221;<\/strong> or <strong>&#8220;both&#8221;<\/strong>.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong><em>New<\/em><\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>The navigation component examples now have their own defaults data instead of relying on the example site\u2019s defaults.<strong><sup>1<\/sup><\/strong><\/li><li>Two new global JS functions are available to consolidate redundant code:<ul><li><strong>stateListener(state)<\/strong> of the event module generates an event listener string based on the provided state.<\/li><li><strong>trap(focusable, event = {})<\/strong> of the focus module provides focus trapping functionality.<\/li><\/ul><\/li><li>All SCSS selectors using the <strong>cwf<\/strong> prefix can be changed\/configured.<\/li><li>Faker is included in the Gulp Twig task, allowing developers to generate fake content with Twig files (i.e. <strong>&lt;p&gt;{{ faker.lorem.paragraph() }}&lt;\/p&gt;<\/strong> ).<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Have questions about this release?<\/strong><\/h2>\n\n\n\n<p>If you have questions about the Compass 1.5.0 release, or suggestions for a future release, message our team on the <a href=\"https:\/\/vcudigital-community.slack.com\/join\/shared_invite\/zt-fuuoltdd-~n7hwtRlagOed4yAIruz2A#\/\"><strong>VCU digital community Slack channel<\/strong><\/a> or send us an email at <strong><a href=\"mailto:compass@vcu.edu\">compass@vcu.edu<\/a><\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The October 2021 release of the Compass web framework introduces numerous enhancements to improve existing elements. This release cycle also included \u2018work in progress\u2019 on a new Carousel component that is intended for a future release. A reminder about the Patterns section Patterns are examples\/guidelines on how to use multiple resets, utilities and components in [&hellip;]<\/p>\n","protected":false},"author":811,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,9],"tags":[25,28,29,13,30,31,26,38,39,27,40],"class_list":["post-303","post","type-post","status-publish","format-standard","hentry","category-plugin-updates","category-releases","tag-1-5-0","tag-carousel","tag-grid","tag-hero","tag-navigation","tag-patterns","tag-resets","tag-t4","tag-terminalfour","tag-utilities","tag-v1-5-0"],"_links":{"self":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts\/303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/users\/811"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/comments?post=303"}],"version-history":[{"count":0,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts\/303\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/media?parent=303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/categories?post=303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/tags?post=303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":297,"date":"2021-07-09T20:22:36","date_gmt":"2021-07-09T20:22:36","guid":{"rendered":"https:\/\/blogs.vcu.edu\/compass\/?p=297"},"modified":"2021-07-09T20:23:52","modified_gmt":"2021-07-09T20:23:52","slug":"pattern-guide-accessibility-updates-and-more-in-compass-1-4-0","status":"publish","type":"post","link":"https:\/\/blogs.vcu.edu\/compass\/2021\/07\/09\/pattern-guide-accessibility-updates-and-more-in-compass-1-4-0\/","title":{"rendered":"Pattern guide, accessibility updates and more in Compass 1.4.0"},"content":{"rendered":"\n<p>The July 2021 release of Compass \u2013 The University Web Framework introduces two new features: a patterns guide and the area component.\u00a0<\/p>\n\n\n\n<p>Compass 1.4.0 also includes updates to existing content types, with a strong focus on providing better accessibility to users who rely on assistive technology. With this release, Compass now meets most WCAG 2.1 AA accessibility requirements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">New features<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Patterns&nbsp;<\/h3>\n\n\n\n<p>Patterns are new examples\/guidelines on how to use multiple resets, utilities and components in tandem for a more specialized use case and to assist website developers and moderators in creating consistent, usable pages.<\/p>\n\n\n\n<p>A pattern guide will be available at the <a href=\"https:\/\/prod.compass.vcu.edu\/patterns\/\">production example site&#8217;s patterns page<\/a> until proper documentation can be provided.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Area&nbsp;<\/h3>\n\n\n\n<p>Areas define where other components or content can be used outside of the main column or sidebar.<\/p>\n\n\n\n<p>Areas are automatically included in the page layout to ensure header, feature or footer content is wrapped in an ARIA landmark to provide context to assistive technology users for better accessibility.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Component updates<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Accordion<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Panel headings now tell assistive technologies that they\u2019re an interactive button.&nbsp;<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Card<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Cards with images will now have a .cwf-card&#8211;image class added to them automatically to make identifying\/targeting them easier.<\/li><li>Non-themed (or default) cards can be made borderless by adding a .cwf-card&#8211;borderless class to them.<\/li><li>A prominent label can be added to a card to better highlight important information by adding a data-label=\u201d$\u201d attribute to it, where $ is the label message.<\/li><li>Blockquotes used with a card\u2019s body will now use the new simplified blockquote styles.<\/li><li>Blockquotes used within accent cards will now have their accent color set to VCU gold to ensure legibility.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Footer<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>The VCU link\u2019s accessible label changed, so as not to confuse assistive technology users.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Form<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Checkbox groups now tell assistive technologies their purpose.&nbsp;<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Grid<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>You can now span items across multiple columns or set which column an item starts at, allowing for more creative ways to display your content.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Header<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>The search submit button now has alternative text for better accessibility.&nbsp;<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Hero<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Floating captions can now be aligned vertically to the top of a hero\u2019s content, allowing for six distinct locations for captions to be presented.<\/li><li>Caption backgrounds can now be blurred for better legibility.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Modal<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Focusable elements with hidden modal dialog boxes are now inaccessible to assistive technologies.&nbsp;<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Navigation<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>The dropdown toggle buttons now have alternative text for better accessibility.&nbsp;<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Notification<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Notifications will now have bottom margins to better align it with other components, ensure consistent styling, and for usage outside of a Compass website.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Tabs<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Focusable elements within hidden panels are now inaccessible to assistive technologies.&nbsp;<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Developer updates<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Changes<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>The recommended LTS version of Node.js has been bumped to v14.16.1.<\/li><li>The recommended version of NPM has been bumped to v6.14.12.<\/li><li>All dependencies have been updated to their latest versions.<\/li><li>The hero component Twig has been fixed to allow for the alignment of captions.<\/li><li>Shared SCSS modules are now utilized via @use instead of @import, allowing for namespaced and simpler variable, function, and mixin names.<\/li><li>Most globally available SASS functions have been replaced with new SASS built-in modules.<\/li><li>There are now new categories for code, including utilities (which are styles\/functionality not tied to a specific component) and resets (which was previously its own component but is now a collection of modules).<\/li><li>Dropped official Opera Mini support as it was previously being unsupported and there is no way to target the browser.<\/li><li>The global lighten(&#8230;)\/darken(&#8230;) color functions have been replaced with style.lighten(&#8230;)\/style.darken(&#8230;), which uses color.scale(&#8230;) under the hood for more finite\/accurate color brightness adjustments.<\/li><li>The example site has been reorganized to make navigation of assets or auxiliary websites easier and more consistent.<\/li><li>The general content component has been removed and instead has been modularized into different resets and utilities and is exemplified in a pattern.<sup>2<\/sup><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">New<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Compass now meets most WCAG 2.1 AA accessibility requirements.<\/li><li>Patterns are a new category for use case guidelines and specific examples of utilizing multiple resets, utilities, and components in tandem.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Release schedule&nbsp;<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">July 8<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Compass v1.4.0 NPM package publish<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">July 12<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Card plugin upgrade (<a href=\"https:\/\/itsupport.vcu.edu\/CherwellPortal\/IT?_=64c1b57a#1\">CM9180<\/a>)<\/li><li>Hero plugin upgrade (<a href=\"https:\/\/itsupport.vcu.edu\/CherwellPortal\/IT?_=64c1b57a#3\">CM9181<\/a>)<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">July 13<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Accordion panel plugin upgrade (<a href=\"https:\/\/itsupport.vcu.edu\/CherwellPortal\/IT?_=64c1b57a#5\">CM9182<\/a>)<\/li><li>Notification plugin upgrade (<a href=\"https:\/\/itsupport.vcu.edu\/CherwellPortal\/IT?_=64c1b57a#7\">CM9183<\/a>)<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">July 14<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Tab panel plugin upgrade (<a href=\"https:\/\/itsupport.vcu.edu\/CherwellPortal\/IT?_=64c1b57a#9\">CM9184<\/a>)<\/li><li>Modal plugin upgrade (<a href=\"https:\/\/itsupport.vcu.edu\/CherwellPortal\/IT?_=64c1b57a#11\">CM9185<\/a>)<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">July 15<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Compass header content type update (<a href=\"https:\/\/itsupport.vcu.edu\/CherwellPortal\/IT?_=64c1b57a#13\">CM9186<\/a>)<\/li><li>Compass footer content type update (<a href=\"https:\/\/itsupport.vcu.edu\/CherwellPortal\/IT?_=64c1b57a#17\">CM9187<\/a>)<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">July 16<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Compass navigation content type update (<a href=\"https:\/\/itsupport.vcu.edu\/CherwellPortal\/IT?_=64c1b57a#19\">CM9188<\/a>)<\/li><li>Compass page layout update (<a href=\"https:\/\/itsupport.vcu.edu\/CherwellPortal\/IT?_=64c1b57a#19\">CM9189<\/a>)<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">July 19\u2013 23<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Component documentation site update<\/li><li>Production example site update<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Have questions about this release?<\/h2>\n\n\n\n<p>If you have questions about the Compass 1.4.0 release, or suggestions for a future release, message our team on the <a href=\"https:\/\/vcudigital-community.slack.com\/join\/shared_invite\/zt-fuuoltdd-~n7hwtRlagOed4yAIruz2A#\/\">VCU digital community Slack channel<\/a> or send us an email at <a>compass@vcu.edu<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The July 2021 release of Compass \u2013 The University Web Framework introduces two new features: a patterns guide and the area component.\u00a0 Compass 1.4.0 also includes updates to existing content types, with a strong focus on providing better accessibility to users who rely on assistive technology. With this release, Compass now meets most WCAG 2.1 [&hellip;]<\/p>\n","protected":false},"author":1011,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-297","post","type-post","status-publish","format-standard","hentry","category-releases"],"_links":{"self":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts\/297","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/users\/1011"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/comments?post=297"}],"version-history":[{"count":0,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts\/297\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/media?parent=297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/categories?post=297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/tags?post=297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":247,"date":"2021-03-29T20:16:35","date_gmt":"2021-03-29T20:16:35","guid":{"rendered":"https:\/\/blogs.vcu.edu\/compass\/?p=247"},"modified":"2021-03-29T20:16:37","modified_gmt":"2021-03-29T20:16:37","slug":"upcoming-plugin-changes","status":"publish","type":"post","link":"https:\/\/blogs.vcu.edu\/compass\/2021\/03\/29\/upcoming-plugin-changes\/","title":{"rendered":"Upcoming plugin changes"},"content":{"rendered":"\n<p>On April 5 and April 6, VCU Technology Services will begin updating all plugins mapped to a Compass component. While this upcoming release does not introduce any new components, there are significant improvements to existing ones, which has introduced changes our users should be aware of. For a detailed breakdown of our updates and schedule, check out our <a href=\"https:\/\/blogs.vcu.edu\/compass\/2021\/03\/26\/compass-1-3-0-to-feature-component-updates\/\">blog post on v1.3.0<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Custom CSS property prefix<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1257\" height=\"857\" src=\"https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2021\/03\/Screenshot-2021-03-29-105908.png\" alt=\"\" class=\"wp-image-252\"\/><figcaption>The upcoming CSS for the &#8220;Accordion Panel&#8221; plugin showing the changes to custom CSS properties.<\/figcaption><\/figure>\n\n\n\n<p>To aid development between local environments and production T4 sites, as well as make our documentation more consistent between platforms, plugin custom CSS properties will no longer be prefixed with <code>--plugin-<\/code>, and instead will use <code>--cwf-<\/code>. Class names for plugins will remain <code>.plugin-<\/code> prefixed, however.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The &#8220;Callout&#8221; plugin becomes the &#8220;Card&#8221; plugin<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"705\" height=\"1233\" src=\"https:\/\/blogs.vcu.edu\/compass\/wp-content\/uploads\/sites\/604\/2021\/03\/Screenshot-2021-03-29-110113.png\" alt=\"\" class=\"wp-image-253\"\/><figcaption>Examples of the Compass card (formerly callout) component and its variations.<\/figcaption><\/figure>\n\n\n\n<p>In v1.3.0 of Compass, we decided to reimagine the callout component into what is now referred to as a card. Because of this change, its class names have been renamed to be more contextual, which means its class names will change for the plugin as well.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Class name updates<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Changes<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li><code>.cwf-callout\/.plugin-callout<\/code> becomes <code>.cwf-card\/.plugin-card<\/code><\/li><li><code>.cwf-callout--accent\/.plugin-callout--accent<\/code> becomes <code>.cwf-card--accent\/.plugin-card--accent<\/code><\/li><li><code>.cwf-callout__container\/.plugin-callout__container<\/code> becomes <code>.cwf-card__container\/.plugin-card__container<\/code><\/li><li><code>.cwf-callout__wysiwyg\/.plugin-callout__wysiwyg<\/code> becomes <code>.cwf-card__body\/.plugin-card__body<\/code><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">New<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li><code>.cwf-card--stacked\/.plugin-card--stacked<\/code> &#8211; Modifies the card to stack an image and body on top instead of next to each other. Will be used by default in the sidebar or when contained within a grid component.<\/li><li><code>.cwf-card--reversed\/.plugin-card--reversed<\/code> &#8211; Modifies the card to show an image to the left of the body instead of to the right. This does not affect stacked behavior.<\/li><li><code>.cwf-card--gray\/.plugin-card--gray<\/code> &#8211; Makes the background of the card a light gray color and darkens the borders; This is stylistically similar to the default callout.<\/li><li><code>.cwf-card__media\/.plugin-card__media<\/code> &#8211; A conditional wrapping element to contain a provided image and its blurred background.<\/li><li><code>.cwf-card__background\/.plugin-card__background<\/code> &#8211; A duplicate of a provided image to create a blurred background; This is stylistically similar to hero backgrounds.<\/li><li><code>.cwf-card__image\/.plugin-card__image<\/code> &#8211; An image to be used adjacent to body content.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Style updates<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Changes<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>All CSS custom properties are prefixed with <code>--cwf-card<\/code> instead of <code>--cwf-callout\/--plugin-callout<\/code>.<\/li><li>All SCSS variables use <code>card<\/code> instead of <code>callout<\/code> in their names.<\/li><li>The <code>1.5rem<\/code> padding is no longer on the container element but on the body element.<\/li><li>Cards now have a <code>1px<\/code> border slightly darker than the background color (using a <code>0.125<\/code> opacity black, i.e. <code>rgba(0,0,0,0.125)<\/code>).<\/li><li>Buttons no longer use custom colors unless the card is themed.<\/li><li>Style changes to heading markers has been removed.<\/li><li>The accent style for cards now uses the global accent colors for easy theme modification.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">New<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Cards now support images, which show up to the right of the body content by default. It shows up above the body content when a). the <code>.cwf-card--stacked\/.plugin-card--stacked<\/code> modifier class is applied, b). on mobile viewport sizes, c). when within a grid, and d). when within the sidebar area. It shows up to the left of the body content when the <code>.cwf-card--reversed\/.plugin-card--reversed <\/code>modifier class is applied.<\/li><li>The \u201cCard\u201d plugin will have a new, optional \u201cImage\u201d field to allow for the new image functionality.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Find &amp; replace<\/h2>\n\n\n\n<p>While the updates to the plugins shouldn\u2019t break functionality, if you\u2019ve written custom CSS overrides for them, you may see some style changes. The following find\/replace statements should easily convert your custom CSS to work with all the new changes coming to plugins:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Convert <code>--plugin-callout<\/code> to <code>--plugin-card<\/code><\/li><li>Convert <code>--plugin-<\/code> to <code>--cwf-<\/code><\/li><li>Convert <code>.plugin-callout__wysiwyg<\/code> to <code>.plugin-card__body<\/code><\/li><li>Convert <code>.plugin-callout<\/code> to <code>.plugin-card<\/code><\/li><li>Convert <code>.cwf-callout<\/code> to <code>.cwf-card<\/code><\/li><\/ol>\n\n\n\n<p>Keep in mind, these changes will not be implemented until the week of April 5, so we do not advise making these find\/replace changes until the rollout begins.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Have questions about these plugin changes?<\/strong><\/h2>\n\n\n\n<p>If you have questions about the Compass 1.3.0 release, the plugins changes, or suggestions for a future Compass release, message our team on the <a href=\"https:\/\/vcudigital-community.slack.com\/join\/shared_invite\/zt-fuuoltdd-~n7hwtRlagOed4yAIruz2A#\/\">VCU digital community Slack channel<\/a> or send us an email at <a href=\"mailto:compass@vcu.edu\">compass@vcu.edu<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>On April 5 and April 6, VCU Technology Services will begin updating all plugins mapped to a Compass component. While this upcoming release does not introduce any new components, there are significant improvements to existing ones, which has introduced changes our users should be aware of.<\/p>\n","protected":false},"author":837,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[23,12,19,14,15,21,22,13,16,18,10,11,20,17,24],"class_list":["post-247","post","type-post","status-publish","format-standard","hentry","category-plugin-updates","tag-1-3-0","tag-accordion","tag-accordion-panel","tag-callout","tag-card","tag-compass","tag-cwf","tag-hero","tag-modal","tag-notification","tag-plugin","tag-plugins","tag-tab-panel","tag-tabs","tag-v1-3-0"],"_links":{"self":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts\/247","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/users\/837"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/comments?post=247"}],"version-history":[{"count":0,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts\/247\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/media?parent=247"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/categories?post=247"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/tags?post=247"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":244,"date":"2021-03-26T13:31:52","date_gmt":"2021-03-26T13:31:52","guid":{"rendered":"https:\/\/blogs.vcu.edu\/compass\/?p=244"},"modified":"2021-03-26T13:31:54","modified_gmt":"2021-03-26T13:31:54","slug":"compass-1-3-0-to-feature-component-updates","status":"publish","type":"post","link":"https:\/\/blogs.vcu.edu\/compass\/2021\/03\/26\/compass-1-3-0-to-feature-component-updates\/","title":{"rendered":"Compass 1.3.0 to feature component updates"},"content":{"rendered":"\n<p>Between April 5 and April 9, VCU Technology Services and University Relations will release the latest round of updates for Compass \u2013 The University Web Framework.<\/p>\n\n\n\n<p>While this upcoming release does not introduce any new components, the Compass team has made significant improvements to existing ones.&nbsp;<\/p>\n\n\n\n<p>Here\u2019s what you can expect:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Component updates<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Breadcrumb<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Dropdown menus from a truncated breadcrumb are no longer obstructed by page content such as heading markers and form inputs.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Card (callout)<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Callouts have been renamed to cards, as their functionality and purpose have been extended.<\/li><li>Cards now allow for an image to be placed adjacent to body content (right by default), with options to display it to the left or on top of the body content.<\/li><li>Accented cards now use the global accent background\/foreground colors for the background, text and links colors.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Footer<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>The privacy link found within the inclusion section now points to the newer URL instead of relying on an old redirect.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">General content<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Typography alignment and spacing has been overhauled.<\/li><li>Site-wide serif font (Merriweather) use is now supported.<sup> <\/sup>Only general content, or general content areas of components, can use the serif font (global\/interactable components and elements will remain sans-serif, Roboto).<\/li><li>Multi-line headings no longer have undesirable line heights.<\/li><li>Blockquotes now use the global accent background color for the borders and attribute text, Font Awesome for its left double-quote icon, automatically adds the closing right double-quote for you, and allows for just a quote (with no footer\/citation).<\/li><li>Multi-line headings with markers now indent to keep the left side of the text aligned.<\/li><li>Lists have reduced indentation when used within WYSIWYG areas of other components to allow more horizontal space for text.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Grid<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>The available space the page layout main column can take up is now calculated from the <strong>&#8211;cwf-contain&#8211;max-width<\/strong> global property to account for theming.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Header<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Header quick links, when displayed in modal form, now use the global accent background\/foreground colors for hover\/focus background\/foreground colors.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Navigation<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Dropdown menus from a desktop main navigation are no longer obstructed by page content such as heading markers and form inputs.<\/li><li>Dropdown menus of the main navigation on desktop viewports have been widened to avoid text wrapping within links.<\/li><li>Light navs now use the global accent background\/foreground colors for active borders and hover\/focus background\/foreground colors.<\/li><li>Nav link padding has been reduced to allow more horizontal space for text.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Notification<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Lists within the notification body no longer appear unstyled when viewed on mobile devices or smaller screens.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Tabs<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Tabs now use the global accent background\/foreground colors for active borders and hover\/focus background\/foreground colors.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Utility<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>New classes to transform text to uppercase, lowercase and capitalized have been added (and mapped to their T4 WYSIWYG editor equivalent).<\/li><li>New class to mute text has been added (and mapped to its T4 WYSIWYG editor equivalent).<\/li><li>New classes to style lead and\/or drop-cap paragraphs have been added.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Developer updates<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Changes<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>The supported version of Node.js has been bumped to v14.15.4<\/li><li>All dependencies have been updated and security vulnerabilities have been audited and fixed.<\/li><li>The shared libraries have been normalized to match the component structure for better maintainability and readability.<\/li><li>The component JS has been normalized to function identically in terms of instantiation\/initialization, leading to a new shared\/component JS library which provides a universal initialize function and a base Component class that all component classes now extend.<\/li><li>All callout classes and CSS variables are now prefixed with cwf-card.<\/li><li>The media__contain mixin has been moved to the shared theme SCSS library under the name theme__contain, now using the library\u2019s structure and formatting to accomplish this.<\/li><li>Font Awesome has been upgraded to <a href=\"https:\/\/fontawesome.com\/changelog\/latest\">v5.15.2<\/a>, which includes incremental updates to existing icons and provides new icons, such as COVID-19 awareness icons.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">&nbsp;New<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>The shared SCSS libraries have been extended to include new mixins for removing vertical spacing of child elements (style__children), using a pointer on hover (style__cursor), and flipping an element for use in animations (animation__flip).<\/li><li>Z-indexes have been categorized into easy-to-understand layers\/levels and are now accessible from a shared style mixin, style__z-index.<\/li><li>Creating angled elements or Font Awesome pseudo-element icons can now be accomplished via the style__angle and style__icon mixins respectively.<\/li><li>A new theme structure has been implemented as a shared SCSS library, shared\/_theme.scss. This library allows setting and using custom CSS properties that handles fallbacks, and it makes theming an entire Compass site much easier.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Release schedule<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">April 5<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Card (formerly callout) plugin upgrade (<a href=\"https:\/\/itsupport.vcu.edu\/CherwellPortal\/IT?_=41ea6c2e#1\">CM8610<\/a>)<\/li><li>Accordion panel plugin update (<a href=\"https:\/\/itsupport.vcu.edu\/CherwellPortal\/IT?_=41ea6c2e#2\">CM8611<\/a>)<\/li><li>Hero plugin update (<a href=\"https:\/\/itsupport.vcu.edu\/CherwellPortal\/IT?_=41ea6c2e#4\">CM8612<\/a>)<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">April 6<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Modal plugin update (<a href=\"https:\/\/itsupport.vcu.edu\/CherwellPortal\/IT?_=41ea6c2e#6\">CM8613<\/a>)<\/li><li>Notification plugin update (<a href=\"https:\/\/itsupport.vcu.edu\/CherwellPortal\/IT?_=41ea6c2e#8\">CM8614<\/a>)<\/li><li>Tab panel plugin update (<a href=\"https:\/\/itsupport.vcu.edu\/CherwellPortal\/IT?_=41ea6c2e#10\">CM8615<\/a>)<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">April 7<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Compass header content type update (<a href=\"https:\/\/itsupport.vcu.edu\/CherwellPortal\/IT?_=41ea6c2e#12\">CM8616<\/a>)<\/li><li>Compass nav content type update (<a href=\"https:\/\/itsupport.vcu.edu\/CherwellPortal\/IT?_=41ea6c2e#14\">CM8617<\/a>)<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">April 8<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Compass footer content type update (<a href=\"https:\/\/itsupport.vcu.edu\/CherwellPortal\/IT?_=41ea6c2e#16\">CM8618<\/a>)<\/li><li>Compass page layout update (<a href=\"https:\/\/itsupport.vcu.edu\/CherwellPortal\/IT?_=41ea6c2e#18\">CM8619<\/a>)<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">April 9<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Component documentation site update (<a href=\"https:\/\/itsupport.vcu.edu\/CherwellPortal\/IT?_=41ea6c2e#19\">CM8620<\/a>)<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Have questions about this release?<\/h2>\n\n\n\n<p>If you have questions about the Compass 1.3.0 release, or suggestions for a future release, message our team on the <a href=\"https:\/\/vcudigital-community.slack.com\/join\/shared_invite\/zt-fuuoltdd-~n7hwtRlagOed4yAIruz2A#\/\">VCU digital community Slack channel<\/a> or send us an email at <a>compass@vcu.edu<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Between April 5 and April 9, VCU Technology Services and University Relations will release the latest round of updates for Compass \u2013 The University Web Framework. While this upcoming release does not introduce any new components, the Compass team has made significant improvements to existing ones.&nbsp; Here\u2019s what you can expect: Component updates Breadcrumb Dropdown [&hellip;]<\/p>\n","protected":false},"author":1011,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,9],"tags":[],"class_list":["post-244","post","type-post","status-publish","format-standard","hentry","category-plugin-updates","category-releases"],"_links":{"self":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts\/244","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/users\/1011"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/comments?post=244"}],"version-history":[{"count":0,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts\/244\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/media?parent=244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/categories?post=244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/tags?post=244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":236,"date":"2020-12-14T15:51:38","date_gmt":"2020-12-14T15:51:38","guid":{"rendered":"https:\/\/blogs.vcu.edu\/compass\/?p=236"},"modified":"2020-12-14T15:51:40","modified_gmt":"2020-12-14T15:51:40","slug":"compass-1-2-0-releasing-this-week","status":"publish","type":"post","link":"https:\/\/blogs.vcu.edu\/compass\/2020\/12\/14\/compass-1-2-0-releasing-this-week\/","title":{"rendered":"Compass 1.2.0 releasing this week"},"content":{"rendered":"\n<p>This week, VCU Technology Services and University Relations will be rolling out the latest version of <a href=\"https:\/\/blogs.vcu.edu\/compass\/2020\/02\/17\/introducing-compass-the-university-web-framework\/\">Compass \u2013 The University Web Framework<\/a>. Along with some improvements to existing features, our latest release includes two new components: Tabs and grid system.&nbsp;<\/p>\n\n\n\n<p>All updates will be available to the VCU web community by end-of-day Friday, Dec. 18.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tabs component<\/h2>\n\n\n\n<p>The new tabs component can be used to organize sections of content into a navigable structure, reducing vertical page space. More details about this component will be available on <a href=\"http:\/\/compass.vcu.edu\">compass.vcu.edu<\/a> this Friday.\u00a0<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Grid system component<\/h2>\n\n\n\n<p>The new grid system component can be used to organize content in up to five evenly sized columns. The page layout grid has been optimized to allow main content to take up as much space as possible in the absence of a sub-nav and\/or sidebar content.<\/p>\n\n\n\n<p>To create a grid, wrap any content in a <strong>.cwf-grid<\/strong> element. Add a <strong>.cwf-grid&#8211;[n]-columns<\/strong> class to a wrapping grid element to restrict the number of evenly sized columns to <strong>[n]<\/strong>, which can be 2 through 5.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Component updates<\/h2>\n\n\n\n<p>The Compass 1.2.0 release includes improvements to the following components:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Hero<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>A hero\u2019s blurred background will no longer flicker when opening a main nav\u2019s drop-down menu.<\/li><li>A hero can now be used with just an image and no caption.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Modal<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>The modal is now styled to be more in line with other Compass modals such as the header quick-links modal.<\/li><li>When a modal is opened, it will now focus the dialog box first.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Nav<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Scroll shadow indicators on long sub navs no longer appear above other elements such as the main nav\u2019s drop-down menus.<\/li><li>If the current page exists as a link within a nav component, it will now be indicated as such to assistive technologies via <strong>aria-current=&#8221;page&#8221;<\/strong>.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Utility<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Responsive table functionality will now work for tables without a <strong>thead<\/strong> element and a table body with a first row of <strong>th<\/strong>\u2019s instead.<\/li><li>New screen-reader-only classes are available to visually hide elements above\/below certain breakpoints.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Developer updates<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">New features<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Component SCSS and JS are easier to pull into external projects, with an option to pull in everything with a single line of code.<\/li><li>All colors and additional functionality found in a component\u2019s styles can be overridden with SCSS variable declarations.<\/li><li>All themed components expose a mixin to register new, custom themes.<\/li><li>All HTML files have been converted to a <strong>*.twig<\/strong> file extension for easier development within code editors. In addition, all pages use one unified layout and components expose their structure via macros in an <strong>index.twig<\/strong>.<\/li><li>Markdown is supported within Twig templates using a <strong>markdown<\/strong> filter.<\/li><li>There\u2019s a new <strong>shared\/media.js<\/strong> file for handling reduced motion preferences within component JS. This is currently being used by the accordion and tabs component.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Changes<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>All dependencies have been updated, security issues have been resolved and new development dependencies have been added to extend the build system.<\/li><li>The default SASS compiler has been changed to the mainline <strong>sass<\/strong> package (which uses DartSASS under the hood). This is due to better feature support and the deprecation of LibSASS.<\/li><li>The supported Node LTS version has been bumped to v12.19.0.<\/li><li>The global <strong>.l-contain<\/strong> class has been removed in favor of using a global <strong>media__contain<\/strong> mixin on unique component container classes.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Change management schedule<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Monday, Dec. 14<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Compass core v1.2.0 released to VCU\u2019s private NPM repository.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Tuesday, Dec. 15<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>\u201cHero\u201d plugin updates (<a href=\"https:\/\/itsupport.vcu.edu\/CherwellPortal\/IT?_=225e2eb5#1\">CM 8080<\/a>)<\/li><li>\u201cAccordion Panel\u201d plugin updates (<a href=\"https:\/\/itsupport.vcu.edu\/CherwellPortal\/IT?_=225e2eb5#2\">CM 8081<\/a>)<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Wednesday, Dec. 16<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>\u201cModal\u201d plugin updates (<a href=\"https:\/\/itsupport.vcu.edu\/CherwellPortal\/IT?_=225e2eb5#2\">CM 8082<\/a>)<\/li><li>\u201cCallout\u201d plugin updates (<a href=\"https:\/\/itsupport.vcu.edu\/CherwellPortal\/IT?_=225e2eb5#2\">CM 8083<\/a>)<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Thursday, Dec. 17<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Compass Web Framework T4 updates (<a href=\"https:\/\/itsupport.vcu.edu\/CherwellPortal\/IT?_=225e2eb5#2\">CM 8084<\/a>)<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Friday, Dec. 18<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>\u201cTab Panel\u201d plugin launch (T4 implementation of Compass\u2019 new tabs component)<\/li><li>Components documentation site updates<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Have questions about this release?<\/h2>\n\n\n\n<p>If you have questions about the Compass 1.2.0 release, or suggestions for a future release, message our team on the <a href=\"https:\/\/vcudigital-community.slack.com\/join\/shared_invite\/zt-fuuoltdd-~n7hwtRlagOed4yAIruz2A#\/\">VCU digital community Slack channel<\/a> or send us an email at <a>compass@vcu.edu<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This week, VCU Technology Services and University Relations will be rolling out the latest version of Compass \u2013 The University Web Framework. Along with some improvements to existing features, our latest release includes two new components: Tabs and grid system.&nbsp; All updates will be available to the VCU web community by end-of-day Friday, Dec. 18. [&hellip;]<\/p>\n","protected":false},"author":1011,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-236","post","type-post","status-publish","format-standard","hentry","category-releases"],"_links":{"self":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts\/236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/users\/1011"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/comments?post=236"}],"version-history":[{"count":0,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts\/236\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/media?parent=236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/categories?post=236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/tags?post=236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}},{"id":225,"date":"2020-10-01T12:41:35","date_gmt":"2020-10-01T12:41:35","guid":{"rendered":"https:\/\/blogs.vcu.edu\/compass\/?p=225"},"modified":"2021-02-17T13:28:13","modified_gmt":"2021-02-17T13:28:13","slug":"whats-new-in-compass-1-1-0","status":"publish","type":"post","link":"https:\/\/blogs.vcu.edu\/compass\/2020\/10\/01\/whats-new-in-compass-1-1-0\/","title":{"rendered":"What&#8217;s new in Compass 1.1.0"},"content":{"rendered":"\n<p>Compass 1.1.0 is now available to the VCU web community! This release includes a new notification component, updates to the sub and breadcrumb navigation, and additional fixes and improvements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Notification component<\/h2>\n\n\n\n<p>The new notification component, also known as an alert or alert banner, creates a colorful banner that can be used to visually distinguish urgent content or highlight responses to user actions. It is available in four variations (default, compact, dismissable and stacked). <a href=\"https:\/\/compass.vcu.edu\/components\/content\/notification\/\">Learn more about the notification component and how to use it here<\/a>. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Updated features and fixes<\/h2>\n\n\n\n<p>In addition to releasing the notification component, the Compass team has made several updates to the navigation component in version 1.1.0.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Sub navigation variations<\/h3>\n\n\n\n<p>There are now variations for the sub navigation:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>&#8220;Sub,&#8221; which is the default, will show any child and grandchild pages of the current page, unless there are none, at which it will show siblings and their child pages.<\/li><li>The &#8220;Sub (no siblings)&#8221; option allows no sidebar content to show if child and grandchild pages of the current page do not exist.<\/li><\/ul>\n\n\n\n<p>These variations can be toggled within the Compass core repository by setting nav.sub.siblings in components.json to true or false, respectively.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Breadcrumb styling and functionality updates<\/h3>\n\n\n\n<p>The breadcrumb navigation will now always keep at least two links visible to users. If the user is more than three levels deep into a site, the first link within the breadcrumb navigation \u2014 titled &#8220;More&#8221; \u2014 will double as a drop-down menu to show the full breadcrumb list once clicked.<\/p>\n\n\n\n<p><a href=\"https:\/\/compass.vcu.edu\/components\/global\/navigation\/\">Learn more about the sub and breadcrumb navigation<\/a>. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Additional updates<\/h3>\n\n\n\n<p>Other changes you will find in version 1.1.0:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Reduced motion accessibility features in the accordion, header and modal components<\/li><li>Utility classes for text alignment, list styles and general spacing adjustments<\/li><li>Form with styling options (<em>documentation on this feature coming soon<\/em>; for now, <a href=\"https:\/\/dev.compass.vcu.edu\/components\/form\/\">visit the example on the Compass production site<\/a>)<\/li><li>Footer updates including:<br>-\u201cSticky footer\u201d use (footer \u201csticking\u201d to the bottom of the page) if the main content is smaller than the screen height<br>-Optimized SVG files for the VCU seal<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Need help?<\/h2>\n\n\n\n<p>If you have questions about Compass, reach out to our team on the <a href=\"https:\/\/vcudigital-community.slack.com\/join\/shared_invite\/zt-fuuoltdd-~n7hwtRlagOed4yAIruz2A#\/\">VCU digital community Slack channel<\/a>, where we discuss Compass and other digital initiatives, or send us a message at <a href=\"mailto:compass@vcu.edu\">compass@vcu.edu<\/a>.<\/p>\n\n\n\n<p>Compass version 1.1.0 (Change Management #7471) has been approved by the Change Advisory Board (CAB) and has followed <a href=\"https:\/\/ts.vcu.edu\/askit\/policies-and-publications\/cm\/\">Technology Services\u2019 Change Management protocol<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Compass 1.1.0 is now available to the VCU web community! This release includes a new notification component, updates to the sub and breadcrumb navigation, and additional fixes and improvements. Notification component The new notification component, also known as an alert or alert banner, creates a colorful banner that can be used to visually distinguish urgent [&hellip;]<\/p>\n","protected":false},"author":941,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-225","post","type-post","status-publish","format-standard","hentry","category-releases"],"_links":{"self":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts\/225","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/users\/941"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/comments?post=225"}],"version-history":[{"count":0,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/posts\/225\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/media?parent=225"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/categories?post=225"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.vcu.edu\/compass\/wp-json\/wp\/v2\/tags?post=225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}]