New in Primer CSS 14.0December 18, 2019 at 7:54am (Edited 2 years ago)
The Design Systems team recently released Primer CSS 14.0.0 (the UI library used for github.com). 🚀 Here are a few highlights since the last major release.
.css-truncate .css-truncate-overflowto truncate any overflowing text regardless of the element's width. Unlike
.css-truncate-target, there is no need to override the
max-widthand is meant to be used to truncate the entire element. Thanks to for this great feature request. :heart:
.flex-1utility class is now available. It's similar to
.flex-autobut without the problem of having to add
.flex-shrink-0to sibling elements to stop them from shrinking.
As a general rule:
.flex-1whenever a flex item should fill the available space regardless of the content. This should cover most cases.
.flex-autoto make a certain flex item take up extra space based on its content.
Notice in the example below how the
.flex-1element doesn't change in width while typing. Whereas
.flex-autois a bit more "aggressive" and expands the more text gets added.
A simple way to show users that something is in progress is to use the
It should work in most places where text is used:
.position-stickyto keep an element stuck to an edge as long as its parent is visible.
Things to keep in mind:
.position-stickyclass needs to be used with a
[top|bottom|left|right]-0position class to take effect, e.g.
- Add a background-color to sticky elements so it covers the content underneath.
style="z-index: 1;"(or higher) in case there are other elements with
z-indexon the page.
- There is no way to change the appearance of stuck elements, like adding a shadow for example. If that's a requirement, consider using
There are lots more bug fixes and improvements, check out the CHANGELOG.
ps. If you have any wishes for Primer CSS
15.0, Santa might still be listening. 🎅🎁