Spectrum is now read-only. Learn more about the decision in our official announcement.


For discussing Primer, Octicons, our style guide, and design systems at GitHub πŸ€–πŸŽ¨


New in Primer CSS 14.0

December 18, 2019 at 7:54am

New in Primer CSS 14.0

December 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 πŸš€ Here are a few highlights since the last major release.


Use .css-truncate .css-truncate-overflow to truncate any overflowing text regardless of the element's width. Unlike .css-truncate-target, there is no need to override the max-width and is meant to be used to truncate the entire element. Thanks to for this great feature request. :heart:


A new .flex-1 utility class is now available. It's similar to .flex-auto but without the problem of having to add .flex-shrink-0 to sibling elements to stop them from shrinking.
As a general rule:
  • Use .flex-1 whenever a flex item should fill the available space regardless of the content. This should cover most cases.
  • Use .flex-auto to make a certain flex item take up extra space based on its content.
Notice in the example below how the .flex-1 element doesn't change in width while typing. Whereas .flex-auto is 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 AnimatedEllipsis component:
Loading<span class="AnimatedEllipsis"></span>
It should work in most places where text is used:


Use .position-sticky to keep an element stuck to an edge as long as its parent is visible.
Things to keep in mind:
  • The .position-sticky class needs to be used with a [top|bottom|left|right]-0 position class to take effect, e.g. .position-sticky top-0.
  • Add a background-color to sticky elements so it covers the content underneath.
  • Use style="z-index: 1;" (or higher) in case there are other elements with z-index on 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 .js-sticky instead.
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. πŸŽ…πŸŽ
No messages yet