Our goal is to create a system that enables us to build consistent user experiences with ease, yet with enough flexibility to support the broad spectrum of GitHub websites. This goal is embedded in our design and code decisions. Our approach to CSS is influenced by Object Oriented CSS principles, functional CSS, and BEM architecture.
Styles can be mixed and matched to achieve many different layouts, independent of their location. These styles fall into three categories:
Primer CSS is built upon systems that form the foundation of our styles such as spacing, typography, and color. This systematic approach helps ensure our styles are consistent and interoperable with each other.
Primer CSS is published to npm as
@primer/css. Each of Primer CSS’s “modules” lives in a subfolder under
src/ with an
index.scss in it. Generally speaking, the styles are divided into three primary themes:
core/) are common dependencies, which include support variables, native element and typography styles, buttons, navigation, tooltips, etc.
product/) are specific to github.com, and include components such as avatars, labels, markdown styles, popovers, and progress indicators.
marketing/) are specific to GitHub marketing efforts, including international and event-focused sites as well as the more design-heavy feature pages on github.com. Marketing styles include new colors and button styles, and extend the core typography and whitespace scales.