Skip to main content

Stephanie Paulantis
Carly Gerard
Max Bronsema

5.3.2

** February 12, 2024 **

  • Various styles for MABEL's Archipelago launch
  • Component fix to prevent duplication
  • Main Navigation component a11y improvement

5.3.1

** February 5, 2024 **

  • Ultimenu fix for Drupal 9.5
  • Helper styles for CKEditor 5

5.3.0

** January 29, 2024 **

  • New: Cypress Testing integration! Automated testing for component development, woohoo!
  • New Byline Styles available
  • Docusaurus upgraded to version 3.1.0

Stephanie Paulantis
Carly Gerard
Max Bronsema

5.2.1

** January 16, 2024 **

  • Main navigation now useable as a standalone component

5.2.0

** January 4, 2024 **

  • New: Search now uses Google Search Console
  • Updates for Drupal 10

Stephanie Paulantis
Carly Gerard
Max Bronsema

5.1.21

** December 11, 2023 **

  • Layout builder style bug fix
  • Pager style fix
  • NPM Updates

5.1.20

** November 20, 2023 **

  • Further markup fixes for alerts

5.1.19

** November 13, 2023 **

  • Markup fix for alerts
  • Wordpress style fix
  • Template declaration path fix

5.1.18

** November 6, 2023 **

  • Library cleanup for unused JS file
  • Pager style fix for views with cards
  • Statistics style fix

5.1.17

** October 16, 2023 **

  • Font size adjustment for event lists
  • NPM vulnerability fixes

5.1.16

** October 2, 2023 **

  • Backups for catalog customization added
  • cta fix
  • responsive table fix

5.1.15

** September 11, 2023 **

  • New CTA style options: .small and .no-animation
  • Gulp task: removed jQuery from js files in CDN

5.1.14

** September 6, 2023 **

  • Gulp tasks updated to generate CDN folder
  • some material icon fixes

5.1.13

** August 14, 2023 **

  • Centered CTAs with material icons and added additional documentation
  • Mobile header height issues fix

5.1.12

** August 7, 2023 **

  • Adjustments to accordion js, to fix some issues with svg icon/material icon discrepencies when used in views

5.1.11

** July 31, 2023 **

  • Social media icon updates in WWU footer- Threads added, Twitter icon updated
  • Styles added for upcoming MABEL update
  • Some small fixes for upcoming WCAG updates

5.1.10

** July 24, 2023 **

  • A few material icon fixes from last update
  • Readme update to make cloning and install more straitforward

5.1.9

** July 17, 2023 **

  • Visual fix for org charts

Some performance improvements around how fonts are loaded

Only essential fonts are preloaded now. The material icons font (which is quite larger) is no longer loaded by default. Instead:

  • Components with static icons (like the WWU Header and footer, and some components like content switchers) now use SVG versions of the material icons. So these are still packaged with those components
  • Drupal block types that use material icons in an open ended way (like Call to Action links and Announcements) will load the library when they are included in a page
  • They are loaded as part of the accordion library. So if you are already loading ashlar/accordion (say, in a view) then you also get material icons
  • They can also be included by themselves by loading the ashlar/material-icons library (for example, in a view using the Views Attach Library module)

If you notice a page where material icons were loading, but aren't any more, please [mailto:masons7@wwu.edu](contact Stephanie) so she can advise on the best way to get the library loaded in your use case.

5.1.8

** July 10, 2023 **

  • Author tags unlinked in comments

5.1.7

** July 3, 2023 **

  • Sticky header class option/improvements for tables
  • Styles added for Wordpress blocks in preparation for Wordpress Ashlar themeing
  • Revert views html list template to default

5.1.6

** June 27, 2023 **

  • Search fix

5.1.5

** June 20, 2023 **

  • Keyboard use improvements for content switchers

5.1.4

** June 12, 2023**

  • Word break helper class added
  • NPM updates

5.1.3

June 5, 2023

  • Minor style changes for detail elements
  • Improvements to variable documentation
  • Configuration fix for docusaurus

5.1.2

May 30, 2023

  • Styles for new MABEL (not active, just backups for inline styles on Archipelego)
  • Card style fixes for hover cards and heading size overrides
  • Updates for incoming block configuration syncs

5.1.1

May 15, 2023

  • Readme has been updated
  • Clean up on block type templates in preparation to block configuration updates
  • Updates to docusaurus config for new url (https://ashlar.wwu.edu)

5.1.0

May 8, 2023

  • Search profiles are now configurable from Pre-Header & Search components
  • Site name links are now configurable from WWU Header component

Stephanie Paulantis
Carly Gerard

5.0.4

May 8, 2023

  • a11y improvements to accordions
  • usability improvements for page menus
  • typo fix for noscript footers
  • style fixes for degree cards

5.0.3

May 1, 2023

  • CTA Styles added for extensions other than PDF
  • Forced color improvments for icons
  • Template fix for page menus

5.0.2

April 17, 2023

Miscellaneous fixes:

  • fix tagline color
  • better radio buttons
  • footer fix
  • add padding to land statement
  • make ultimenu region selector more specific
  • fix testimonial markup in template
  • set font color on light gray based bgs"
  • hide random ultimenu button again
  • tabindex on accordion views
  • enter/space key controls for accordion
  • change field label to h2

5.0.1

April 10, 2023

Various minor style adjustments and bug fixes for the major release, related to:

  • Cards
  • Image links
  • Statistics
  • Footer
  • Overlays
  • Print Styles
  • Call to Action Links
  • Font size helper classes
  • Background videos
  • Accordions (in views, specifically)

There have also been various configuration fixes. Github branch has been updated so that it deploys on the main branch.

Stephanie Paulantis

Ashlar is the university's Drupal theme, and basis for its component library/design system and Brand and Communication Guide. And it is getting a major update this month!

Many of the updates are under the hood. We have refactored almost all the SASS/CSS and Javascript, take advantage of the latest features those languages. We have also completely redone the documentation and pattern library. We are moving away from Pattern Lab (which hasn't seen many update and is starting to fall out of maintenance) and into Docusaurus (the website you're looking at now.)

There have also been some changes that you will see reflected in the visual styles on Drupal sites. Most of these are minor, like subtle changes to heading and other text styles.

Some will be more noticeable, like changes to some card styles and Call to Action links. In this post, we outline what to expect.

We don't have an exact timeline for deploying this update, but you can expect to see the changes on Development sites in March, and on Production sites in late March or early April.

Front End Changes

These are the style changes that have been made in the theme, that you will probably notice on Western's Drupal websites.

This is one of the biggest style changes. Call to action links (or CTAs) have been update so that they no longer resemble buttons. The number of CTA style variants have also been reduced.

There is an important reason for this change, but it is somewhat technical. In short, links (eg <a> elements) and buttons (eg <button> elements) are semantically different in HTML. This means that assistive technology announces them differently, and they have different interactive behaviors. For sited, mouse-using folks, these differences aren't readily apparent. This means that when links are styled to look like buttons, they get called buttons. But when they are called buttons, it can (and does) create confusion for assistive technology users–particularly users who are site impaired and cannot see the visual button styles. In order reduce the barriers produced by that visual styling, we have opted to re-do call to action styles so that they visually resemble links, while still standing out on page to call attention to the text.

If you're interested in learning more about this, we recommend reading the article A call to action – links are not buttons.

Along with this change, we have also refreshed the actual semantic <button> styles.

Screenshot of old CTA styles, which looked like buttons

Call to Action CTA with .blue class

Old Buttons

Screenshot of old button styles

New Buttons

It can take some time for us to get configuration on Drupal user interfaces synced up with theme changes. You may still notice block types referred to as Button or Image Button when they should actually be Call to Action Link and Image Link. Please don't hesitate to get in touch if you notice this discrepency!

Cards

This is the other major change. We no longer support styles for the following card variants:

  • Solid Round Blue/Green
  • Tag tile
  • Simple
  • Information/Split Information

Old solid blue style Old tag style card Old simple card Old info style card

Anywhere these variants are used will revert to the basic card styles.

Font/Text Changes

Condensed Fonts Removed

Fira Sans Condensed has been removed for style consistency and improved menu readability. This will be most noticeable in the main navigation.

Old main navigation, with condensed font New main navigation, with regular font

Headings

Styles have been simplified. There are now only two variations for headings, and both make use of the title case Montserrat for level 1 headings.

Link styles and borders in general have become a little less bold.

Old link styles

This link appears outside of a paragraph.

This is a link is very long, (it may overlap in smaller containers) has a descenders (yjgpq) and is in a regular paragraph of text.

Forms

Minor style updates, particularly with radios and checkboxes which no longer rely on images.

Icons

Icon with text style removed as an atom. Instead, icons line up with text horizontally by default: Home Apply

Has been replaced with Dialog

The Link List style has been removed (not widely used, this has already been replaced on pages it was used on)

Ribbon

This style has been removed.

Schedule

Round edges option has been removed.

Social Media Icons

A custom element has been created for social media icons, to simplify the markup, and the styles have changed slightly. Old instances of social media markup will still be supported, but we recommend switching to the new markup and styles at your earliest convenience.

Statistics

The markup and CSS for these has been simplified. Drupal blocks will update automatically, but any existing custom markup will need to be replaced.

Switcher

Styles have been updated to better match other component styles. There is also a column layout available now.

Old Switcher

old switcher styles

New Switcher

new switcher styles

Tables

Tables are a little lighter by default, with less contrast between cells. Table styles in dark mode have been improved as well.

Western Header

On both mobile and desktop, the styes for fonts and icons have inherited change from elsewhere in the theme. The site name is also now larger on desktops.

Old Header

Screenshot of older header styles on small screens Older header styles on large screens

New Header

New header styles on large screens

The footer has been rearranged, and links have been placed at the bottom of the page.

Older footer styles, with content in three columns

New footer styles, with content stacked in a single column

Back End Changes

There have been a LOT of code changes on the back end. Many things have been simplified, reorganized, and condensed.

CSS Updates

One big change is that we are now using CSS variables to set things like link colors and font sizes. This makes inheritence a lot more logical, so that a lot less overrides are needed to make sure that things like contrast and font sizes are maintained when different user preferences are set, or in different situations like when a background color changes.

Another technical change is that we've converted nearly all of our jQuery to vanilla javscript, and many of our components are now available as custom web elements.

The SASS module Breakpoint has been removed. We are now using vanilla CSS media queries. (Note that the variables are still referred to as breakpoints, we're just not using the sass plugin anymore)

Support for IE has been removed (eg no more -ms- prefixes cluttering things up).

These changes, along with dropping out some extra style variants, has lead to a great overall improvement in the file size for our compiled stylesheets. Our ashlar-base.css stylesheet will go from 11,544 lines of code, and 796 kb to 5991 lines of code, and 452 kb on this release.

Helper Class Changes

Some class names and helper class names have changed. This will not affect any native Drupal blocks, but if you have custom styles, you may need to update them.

  • The "button" class is no longer supported for links. Use "cta" instead.
  • .block-- has been updated to .wwu-
  • .block__title has been updated to .title

File Reorganization

We moved .html.twig templates out of the _docs/patterns folders and directly into the templates folder. Since these are no longer being used for both the component library and Drupal, it makes more sense to me to keep them in the Drupal-only part of the theme files. This makes the templates a little less reusable, but easier to find.

With the move away from Pattern Lab, we no longer need YAML files. Component documentation lives in Markdown files, alongside the SASS and any Javascript for a component.

We have also continued to convert components to Custom Elements (eg Web Components, but without shadow DOMs). Generally, anything that requires Javascript to function outside of being a web component (like a content switcher or an accordion) will be scripted as a custom element. What this means is that markup for these types of elements has been greatly simplified, so that they are easier to implement across different platforms. For example, a content switcher previously needed the following markup:

<div class="block--content-switcher" id="example">
<div class="content-switcher" role="tablist" aria-label="Title of Content Switcher">
</div>

<div class="content-switcher-container">
<button class="switch-1" role="tab" id="switch-button-1" title="switch-button-1" aria-controls="switch-content-1">
Content 1
</button>

<div class="switch-1 content" role="tabpanel" id="switch-content-1" aria-labelledby="switch-button-1" tabindex="0">
We have an infinite amount to learn both from nature and from each other. Science has not yet mastered prophecy. We predict too much for the next year and yet far too little for the next 10.
</div>

<button class="switch-2" role="tab" id="switch-button-2" title="switch-button-2" aria-controls="switch-content-2">
Content 2
</button>

<div class="switch-2 content" role="tabpanel" id="switch-content-2" aria-labelledby="switch-button-2" tabindex="0">
If you could see the earth illuminated when you were in a place as dark as night, it would look to you more splendid than the moon. Curious that we spend more time congratulating people who have succeeded than encouraging people who have not.
</div>

<button class="switch-3" role="tab" id="switch-button-3" title="switch-button-3" aria-controls="switch-content-3">
Content 3
</button>

<div class="switch-3 content" role="tabpanel" id="switch-content-3" aria-labelledby="switch-button-3" tabindex="0">
Astronomy compels the soul to look upward, and leads us from this world to another.
</div>
</div>
</div>

Now, the same switcher can be marked up as:

<wwu-accordion>
<wwu-accordion-item label="Cats" heading-level="h3">
<p>Purr when being pet claw at curtains stretch and yawn nibble on tuna ignore human bite human hand this is the day hell is other people meowwww. Jump five feet high and sideways when a shadow moves naughty running cat or crash against wall but walk away like nothing happened scratch the box your pillow is now my pet bed. Lick human with sandpaper tongue miaow then turn around and show you my bum rub face on everything. Somehow manage to catch a bird but have no idea what to do next, so play with it until it dies of shock bleghbleghvomit my furball really tie the room together mew hunt anything. Lick plastic bags disappear for four days and return home with an expensive injury; bite the vet but scratch leg; meow for can opener to feed me for shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff eats owners hair then claws head but sleep over your phone and make cute snoring noises. Trip owner up in kitchen i want food human give me attention meow.</p>
</wwu-accordion-item>
<wwu-accordion-item label="Dogs" heading-level="h3">
<p>Doggo ipsum blep corgo doggo smol borking doggo with a long snoot for pats, the neighborhood pupper what a nice floof boofers, wow very biscit he made many woofs. Boofers thicc fluffer big ol very taste wow extremely cuuuuuute, blep thicc clouds shooberino, vvv extremely cuuuuuute ruff waggy wags. You are doin me a concern bork what a nice floof fluffer puggorino, very hand that feed shibe pupper smol borking doggo with a long snoot for pats pupper, heckin good boys and girls shooberino sub woofer. Blep yapper big ol pupper very hand that feed shibe big ol, doggorino blep doing me a frighten. Doing me a frighten adorable doggo ruff ur givin me a spook waggy wags, what a nice floof waggy wags noodle horse, shoober doge pupperino.</p>
</wwu-accordion-item>
<wwu-accordion-item label="Fish" heading-level="h3">
<p>Rough pomfret lemon shark plownose chimaera southern sandfish kokanee northern sea robin Antarctic cod. Yellow-and-black triplefin gulper South American Lungfish mahi-mahi, butterflyfish glass catfish soapfish ling gray mullet! Warbonnet denticle herring spiny-back cod straptail tailor zebra loach sea lamprey.</p>
</wwu-accordion-item>
</wwu-accordion>

There are some components (such as Announcements and Cards) that don't require Javascript for their basic functionality. We have opted for less Javascript over simplified markup, though this may change in the future.

Conclusion

Why the changes? As time passes, many new styles (and their accompanying code) get introduced to the theme. Some components become cluttered with many style variants. Some of those style options get added that strayed from the look and feel of the theme, and/or don't see much use.

We've removed certain style variations so that there is more consistency across the theme. This reduces the complexity for the people who are managing the components. It also reduces the amount of CSS, which means pages load faster.

That doesn't mean we don't want to keep innovating and adding new styles. In fact, simplifying makes this easier to do. We're starting from a fresh slate, which means there are less style conflicts and bugs to worry about.

If you have any questions, or notice that something on your page that doesn't just look different, but looks brokenplease reach out to Web.Help@wwu.edu or contact Stephanie directly.

Stephanie Paulantis
Carly Gerard

4.6.3

March 6, 2022

  • npm updates
  • Facebook tracking pixel removed

4.6.2

February 2, 2022

Able Player styling

4.6.1

January 23, 2022

  • SkipTo plugin removed from theme
  • Line heigh reset on cards

4.6.0

January 11, 2022

  • NEW Paragraph templates for banners, media, and headings
  • NEW alignment helper classes added

Stephanie Paulantis
Carly Gerard

4.5.20

January 11, 2022

  • Paragraph templates for banners, media, and headings
  • New alignment helper classes added
  • NPM updates
  • Email template updates

4.5.19

December 5, 2022

  • Styles added for upcoming in-page menu component

  • Minor style updates for cards

  • Minor contrast fixes

4.5.18

November 14, 2022

  • Improvements to email signature for screen readers

4.5.17

November 7, 2022

  • Various dark mode and a11y style fixes

4.5.16

October 31, 2022

  • More forced colors style improvements

4.5.12 - 13

October 24, 2022

  • Accordion style and markup fixes for views

4.5.11

October 17, 2022

  • Updates for accordion

4.5.9 - 10

October 3, 2022

  • Mini pagers have unique aria labels
  • Forced color style updates

4.5.8

September 26, 2022

  • Glossary template override created
  • Year added to event card displays

4.5.7

September 20, 2022

  • Breadcrumbs update

4.5.6

September 13, 2022

  • Tugboat removed
  • Twig "spaceless" updated for future-proofing

4.5.5

September 12, 2022

  • 404 page fix
  • border-bottom helper classes added

4.5.4

September 6, 2022

  • Bug fix for background video pause feature
  • Contrast fix for accordions

4.5.3

August 22, 2022

  • Style a11y improvements for accordions, call to actions, split-style information cards, and layouts

4.5.2

August 8, 2022

  • Markup fix for schedule component links

4.5.1

July 25, 2022

  • Contrast fixes for icons with text

4.5.0

July 18, 2022

  • Modernized embed container styles
  • Alternate content switcher layout added

Stephanie Paulantis
Carly Gerard

4.4.4-4.4.5

July 7, 2022

  • Icon contrast fixes
  • Horizontal menu fix

4.4.3

June 27, 2022

  • Manual Login option added to theme's appearance settings

4.4.2

June 13, 2022

  • Menu fix

4.4.1

June 6, 2022

  • Card styles for APICs page
  • Manual login toggle added to theme
  • Forced color improvements
  • Wordpress builds script improvements

4.4.0

May 23, 2022

  • Forced color mode styles added
  • Content Switchers javascript updated, multiple switchers can now be added to a single page and custom element may be used
  • Inline field label styles fixed

Stephanie Paulantis
Carly Gerard

4.3.3

May 16, 2022

  • Fixed footer link
  • CDN scripting added

4.3.2

May 9, 2022

  • Fix for spacing helper classes
  • Typo fix for alerts
  • Files added for Azure deployments
  • Update component library yaml declaration

4.3.1

April 25, 2022

  • Minor style fixes for table and org chart

4.3.0

April 18, 2022

  • <wwu-footer> custom element created
  • Quicksearch removed from theme

Stephanie Paulantis
Carly Gerard

4.2.8

April 11, 2022

  • A11y fixes for Ultimenu and taxonomy term styles

4.2.6-4.2.7

April 6, 2022

  • Layout template fix for homepage
  • Dark mode css fix for cards
  • Accordion fix for views
  • Views filter a11y fix

4.2.5

March 21, 2022

  • Apple touch icon added
  • Styles for new directory, homepage navigation

4.2.4

March 14, 2022

  • Performance improvements for skip to link
  • Heading structure fixes for aggregator feeds
  • Removal of deprecated Ashlar library

4.2.2-4.2.3

March 7, 2022

  • Breadcrumb cacheing issue fix

4.2.1

February 28, 2022

  • A11y patch for visually hidden text running together
  • A few css fixes

4.2.0

February 22, 2022

The display settings and search will be moved up to a new, pre-header bar. Additionally, the skip to content link will become visible without requiring focus. There has also been a new "Jobs" quick link added to the menu.

Mobile:

New Mobile Header

Desktop:

New Desktop Header

The mobile menu layout and animation will change from a sliding animation to a fading animation, and the layout of the Western Quick links will change slightly. The site and Western footers will also now be visible when the mobile menu is open:

New Mobile Menu

The skip to content button now also has additional navigation functionality, for jumping to various headers on a page.

New Skip-to Menu