Skip to content

1.12.0

Compare
Choose a tag to compare
@pilgreen pilgreen released this 20 Aug 19:04
· 1374 commits to master since this release

What's new?

This release addresses a number of issues on the story pages, focusing mostly on text flowing outside of the main container on mobile.

Story page layout system

The issue of text going outside of the parent container isn't a bug as much as the way Flexbox works with injected and embedded content. In cases where width is defined on the element, that content can force a flexible column to be wider than its container. In our case, ads and embeds from social media using JavaScript to determine and set a width inline were getting numbers different from the actual screen size, and CSS properties like max-width were not working.

The only way to fix this universally was to change the layout model to one that can have a defined width: CSS Grid. The new layout system uses the same HTML markup as before, and includes a couple new checks that the previous version did not. For starters, the grid system is only applied above 768px where it is needed. Additionally, SDS is checking for support of CSS Grid and providing an alternative layout. In IE11, readers will see the story rail centered below the article, the same that they would on mobile.

Link variable rework

Link variations were starting to get a little messy again and it was time for another review. For some atoms, we moved defaults to the element itself instead of a defined global. This allows for more flexibility of setting that variable at the card and molecule level.

Icons file removed

The CSS was no longer being used in WPS.

Impact2020 deck

The deck is ready for swagging. This CSS is not currently being included in the distribution files, and we will cut a new release before that is scheduled.

Author card image fixes

Size of the thumbnail images was off.

Other story fixes

We included work on several smaller spacing issues. Some of the issues are for elements that pre-date SDS and have not been redone. Others are cleaning up elements inside the story body for the new layout system. We were also able to remove several styles for elements that have been refactored, and will continue the ongoing effort of streamlining the codebase.