Releases: mcclatchy/design
1.12.0
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.
1.11.16
What's new?
We have a new search page deck and CSS file for the search form at the top. That form is a one-off, so there is no card page. The rest of the deck uses a standard grid of stories. Bootstrap pagination has been replaced with a single button and the search functionality has been reduced to the bare minimum.
Deck file changes
decks/search.css
1.11.15
What's new?
A single small fix to address accessibility in the pull out menu. The outline is back in unless a user is hovering over the menu itself. This is a CSS-only replacement of previous functionality. There are no changes required to the HTML from release 1.11.14.
1.11.14
What's new?
Several small fixes and new code for omissions in the flag and footer releases. We're breaking this out by need rather than file because there were many files that needed adjustments. The minified increase for AMP was 1.3K, but with these latest releases allowing for the removal of old code the size shouldn't be as pressing. Still very important, but we shouldn't be as close to the line.
Sub pub dropdown menu
The dropdown menu is now part of the cards/flag.css file. It's piggy-backing off of the search functionality to keep size down. The .submenu div is directly on top of the .search form in the DOM. It's toggled by the class .submenu-out on the .flag element. There is a simple function on the style guide if you need a reference. An HTML code sample is on our menu page and there is a working example on our homepage deck.
Search in the pull-out menu
We intended for this to be replaced by the standard search functionality in the flag, but there just wasn't room. CSS is added to the cards/menu.css file and you can see the new HTML on our menu page. There is also a working example on our story deck.
Blogs & columns header in the pull-out menu
An unfortunate omission on our part. We added CSS for these elements and used the current .option-label class. An HTML code sample is on our menu page and there is a working example on our story deck.
New styles for the upper nav
A slight miscommunication means new stuff we didn't need yet. All the better. We have a new upper-nav page and a working example on our story page.
Homepage nav hover effect
Links now swap to black on hover.
Utility blue class
The blue is being used in more places that don't always match the defaults of the system, and is more prevalent in marketing material. There's a new .blue utility class for these occasions.
1.11.13
What's new?
Section navigation is now in the system, along with a new section deck to showcase them. The section nav is primarily an expander with a few additions. Using the expander as a base, we were able to keep size small. This release adds 451 bytes to the minified file.
There are a couple of different rules depending on what the editors have placed in CUE:
- If there is no nav in CUE, or if there is a nav with zero links in CUE, the caret should not show. This can be done by omitting the
expanderclass on the section name. - The nav should be collapsed on load in all cases.
One final note, there is no Javascript treatment or popout for navigations that have more links than one row will show at any given screen size. The links will wrap. After reviewing several sections on many publications, we determined this was more of a theoritical issue than a real one and is adding complexity and bloat when we just don't need it.
Atomic file changes
cards/section-nav.css
New file: enhancements to the expander molecule for this card.
1.11.12
1.11.11
What's new?
The final of the navigation trilogy .. the flag. This is one of our more complicated elements and has slightly different output for different scenarios. To see the logic behind these in a more organized fashion than the style guide page, check out the footer.html template in GitHub.
In addition to the flag CSS, this release also includes and makes use of some new display classes. These are very light, mobile first, and located in the display-classes.css file.
Note: These additions have also been included in the amp.css file, and given the complexity of this card are a little larger than previous releases. They are smaller than the current implementation by quite a bit, however, so we should see a good improvement with a straight swap. Minified this release adds 1,489 bytes to the file.
Atomic file changes
decks/display-classes.css
Techincally included in the previous two releases, this is the first one that uses them. This is a mobile-first approach and the breakpoints are 769px and 1024px.
| Class | Behavior |
|---|---|
| d-tablet | Only visible at 769px and up |
| h-tablet | Hides at 769px and up |
| d-desktop | Only visible at 1024px and up |
| h-desktop | Hides at 1024px and up |
decks/flag.css
Includes full CSS for the DOM structure used in our style guide that requires no external dependencies.
1.11.10
What's new?
The slide-out menu. Slightly different from our current implementation, the menu is a fixed panel with internal scrolling and is mostly made up of expander molecules. In order to keep the DOM similar and allow for styling of button elements when needed for accessibility, we have also added two new custom properties to the button element.
Note: These additions have also been included in the amp.css file. It may be better to bundle the navigation releases to fully optimize that code base. Minified this release adds 896 bytes to the file.
Atomic file changes
atoms/button.css
Techincally included in the previous two releases, this is the first one that utilizes the --bc and --bbc custom properties on buttons.
decks/menu.css
Includes full CSS for the DOM structure used in our style guide that requires no external dependencies.
1.11.9
What's new?
We have a footer people. We will continue to add elements to the style guide that couldn't be addressed during the refactor. This is one of three releases coming in quick succession to allow for staged development. In addition to the CSS for the footer we also added a light way to create generic center-aligned flexible rows, and two additional classes to handle icons and icons with labels. The latter requires a custom class to fix a line-height issue with our font files.
Note: These additions have also been included in the amp.css file. It may be better to bundle this change together with the next release (or two) to fully optimize that code base. Minified this adds 736 bytes to the file.
Atomic file changes
cards/flex-row.css
This file adds three generic classes.
| Class | |
|---|---|
| .flex | converts any element to flex display with center alignment |
| .icons | gives all direct descendants 15px of padding |
| .icon-label | adjusts text vertically to appear in the center of the row |
decks/footer.css
Includes full CSS for the DOM structure used in our style guide that requires no external dependencies.
1.11.8
What's new?
In order to optimize the design system for AMP we needed to come up with a plan to distribute different builds (or decks). The first thing we needed to do was to split all elements into their own files, allowing us to pick and choose which elements got included with which build. Then we needed to pick the tool to do it, and we went with the very reliable SASS. Lastly, we separated the distributed versions of the atomic files from the style guide website and gave those versions a new home.
Atomic file changes
/dist/
All atomic file builds have been moved from the /static/css/ folder to the /dist/ folder, and the package.json file has been updated to reflect this as well.
You will need to change your @import statements to match.
amp.css
There is a new file built specifically for AMP in the /dist/ folder. This is a copy of the amp.sds.css file we provided development last week and should be a simple swap.