explore
Explore
door-enter
Log in
menu
announcement

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

Primer

For discussing Primer, Octicons, our style guide, and design systems at GitHub 🤖🎨

link
https://primer.style
Channels
# All channels
view-forward
# General
# Hiring
# Office Hours
# Releases
Team
Jon Rohan
@jonrohan
Emily Brick
@emily-brick
Emily Plummer 🌻
@emplums
Ash Guillaume
@ashygee
Shawn Allen
@shawnbot
Joshua Shao
@jhuashao
Diana is broccolini
@broccolini

New in Primer CSS 14.0

December 18, 2019 at 7:54am
simurai
@simurai

New in Primer CSS 14.0

December 18, 2019 at 7:54am (Edited 2 years ago)
Hero
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-overflow

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:
truncate-overflow

.flex-1

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.
flex-1
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.
flex-1-vs-flex-auto

.AnimatedEllipsis

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:
loading...

.position-sticky

Use .position-sticky to keep an element stuck to an edge as long as its parent is visible.
sticky
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