2.5.0

SDS Version 2.5 is here!

We are updated SDS to a new 2.5 version that will serve as a bridge between the current design and the conceptualized 3.0. This 2.5 version will look as close to 3.0 as possible with the given DOM. Updates have also been made to the style guide to reflect the new atoms, molecules, and other shortcode properties.

We’ll need to update custom elements to ensure the custom properties come through as expected.

There will also be subsequent releases related to necessary Front End template changes to complete the entire transition.

Related Jira ticket: PE-257

Figma mock 1
Figma mock 2

2.1.27

AMP pages author thumb initials styling

The grey circle that appears when an author's image isn't available contains the authors initials, which are now styled to match non-AMP pages.

Related Jira ticket: FE-473

2.1.26

Additional Viafoura comments styling & AMP pages author thumb grey circle placeholder

1. The header element .viafoura .vf-comment-header[data-v-ddad5b80] is updated to be left aligned on mobile with more verbose targeting on the element.
2. AMP pages now have styling to account for a missing author thumbnail image. A grey circle will appear, just as non-AMP pages already function.

Related Jira tickets: FE-363, FE-406

2.1.25

This release adds rules for #zone-el-7 to display inside the .header element on story pages.

2.1.24

This release decreases the flag font size to 13px so that games can be added to the quick nav, and also removes the padding and background color from the new sponsored zone on sections and story pages (#zone-el-7).

2.1.23

Additional Viafoura comments styling

1. The header element .viafoura .vf-comment-header[data-v-ddad5b80] left-aligned with spacing cleaned up
2. “All Comments” font size reduced to match the other tabs next to it
3. Padding removed from around the comments input element by more specific selection to mediate the vendor default styles

Updates related to the PE-213 ticket.

2.1.22

Add styling for #zone-el-7 sponsored by ad unit

Ensure that the #zone-el-7 element goes full width within the grid structure of the page. The element is filled by the Performance Team, who is loading in an ad unit with the words "sponsored by" + sponsor logo asset. This sits atop the page's section/topic name.

2.1.21

Add styling for Viafoura comments

Style overrides for Viafoura comments have been relocated from Performance team implementation to SDS. Since Viafoura has their own styling built in, we've modified to match the Figma mocks from the design team. Styles are all preceded with .viafoura.

Figma:
https://www.figma.com/design/EETJOb1k7q4rD31kkpWwxz/Viafoura?node-id=157-3378&m=dev

2.1.20

Add styling for author card initials

If an article author doesn't have an image selected to appear as their thumbnail, their initials will appear centered within a grey circle instead. The styling to be added to a child div within the .thumb element with a class of .initials.

2.1.19

Update leaderboard ad height on mobile

Fixed height of 90px changed to 140px on the leaderboard ad zone on mobile. This accounts for ads with a max height of 100px.